/* My Dreams Properties — site styles */
:root{
  --navy:#0B2B50;
  --navy-deep:#001F3F;
  --brand:#003A72;
  --brand-dark:#002550;
  --accent:#1E6FB8;
  --ink:#0B2545;
  --body:#68788C;
  --line:#E3E9F0;
  --wash:#F5F8FB;
  --white:#fff;
  --radius:12px;
  --shadow:0 2px 6px rgba(16,42,74,.05), 0 16px 40px rgba(16,42,74,.07);
  --maxw:1180px;
  --display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--body);font-family:var(--text);font-size:15.5px;line-height:1.62}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;font-weight:700;text-wrap:balance;line-height:1.2}
h1{font-size:clamp(28px,4vw,46px)}
h2{font-size:clamp(24px,2.8vw,34px)}
h3{font-size:19px}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
section{padding-block:48px}
section[id],div[id]{scroll-margin-top:96px}
@media (max-width:760px){section{padding-block:38px}}
.stack{display:flex;flex-direction:column;gap:14px}
.stack.center{gap:8px}
.stack.center h2{margin-top:2px}
.center{text-align:center}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* labels + buttons */
.label{font-family:var(--display);font-size:14px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:12px}
.label::after{content:"";height:2px;width:46px;background:var(--brand);opacity:.5}
.label.center{justify-content:center}
.pill{display:inline-block;background:var(--white);color:var(--brand);font-family:var(--display);font-weight:600;font-size:14px;
  padding:7px 22px;border-radius:999px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:600;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;padding:12px 22px;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-outline{border-color:rgba(255,255,255,.75);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--navy);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-round{border-radius:6px}

/* top bar + header */
.topbar{background:var(--wash);font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:0}
.topbar .welcome{background:var(--brand);color:#fff;padding:12px 40px 12px 20px;margin-left:-20px;
  clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%)}
.topbar .welcome b{font-weight:600}
.topbar .social{display:flex;gap:14px;align-items:center;color:var(--navy);font-size:13px}
@media (max-width:860px){.topbar{display:none}}

.masthead{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:20px;padding-block:14px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo b{font-family:var(--display);font-weight:700;font-size:23px;color:var(--navy);letter-spacing:-.01em}
.logo span{font-family:var(--display);font-size:11px;letter-spacing:.34em;color:#9AA8B8;margin-top:4px}
nav.main{margin-left:auto;display:flex;align-items:center;gap:20px}
nav.main a{font-family:var(--display);font-weight:500;font-size:13.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--accent)}
.has-sub{position:relative;padding-block:12px;margin-block:-12px}
.has-sub>a::after{content:" +";color:var(--accent)}
.submenu{position:absolute;top:100%;left:-16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  min-width:220px;padding:8px 0;display:none}
.submenu a{display:block;padding:9px 18px;text-transform:none;letter-spacing:0;font-size:14px}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;
  padding:9px;color:var(--navy);cursor:pointer;line-height:0}
.menu-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu-toggle .ico-x{display:none}
.menu-toggle[aria-expanded="true"] .ico-bars{display:none}
.menu-toggle[aria-expanded="true"] .ico-x{display:block}
.sub-toggle{display:none}
.nav-scrim{display:none}

/* The drawer. This used to be a panel that dropped out of the masthead with
   every submenu permanently expanded — twelve links and four headings in one
   column, taller than the phone. Now it slides in from the right, the
   submenus start closed, and the page behind it is locked and dimmed. */
@media (max-width:1200px){
  /* The drawer is a later sibling inside the masthead, so without this the
     panel paints over the button and there is no visible way to close it. */
  .menu-toggle{display:block;position:relative;z-index:1}
  .masthead .btn{display:none}

  /* The drawer is fixed, but it lives inside .masthead, which is sticky with
     a z-index — so it is trapped in the masthead's stacking context and paints
     at the masthead's level, not its own. With the masthead at 40 the scrim
     (55) covered the drawer and swallowed every tap, and the sticky Call bar
     (50) sat on top of it too. Lifting the masthead while the drawer is open
     is what fixes it; a bigger z-index on the drawer itself cannot. */
  nav.main{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);
    margin:0;background:#fff;border-left:1px solid var(--line);box-shadow:-18px 0 40px rgba(4,18,34,.18);
    flex-direction:column;align-items:stretch;gap:0;padding:74px 0 calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);visibility:hidden}
  nav.main.open{transform:none;visibility:visible}

  nav.main > a{padding:14px 22px;border-bottom:1px solid var(--line)}
  .has-sub{padding:0;margin:0;display:grid;grid-template-columns:1fr auto;align-items:center;
    border-bottom:1px solid var(--line)}
  .has-sub > a{padding:14px 22px}
  .has-sub > a::after{content:none}

  /* The chevron is its own control, so tapping the label still navigates to
     the section's own page instead of only opening a list. */
  .sub-toggle{display:flex;align-items:center;justify-content:center;width:52px;align-self:stretch;
    background:none;border:0;border-left:1px solid var(--line);color:var(--accent);cursor:pointer}
  .sub-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
  .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

  /* No height animation here. Animating open would need the links wrapped in
     one more element, and the drawer's own slide is the movement that reads.
     The :hover/:focus-within rule from the desktop styles has to be beaten
     explicitly, or tabbing through the drawer springs every submenu open. */
  .submenu,
  .has-sub:hover > .submenu,
  .has-sub:focus-within > .submenu{position:static;grid-column:1 / -1;display:none;
    border:0;box-shadow:none;padding:0;background:var(--wash);min-width:0}
  .has-sub.is-open > .submenu{display:flex;flex-direction:column}
  .submenu a{padding:11px 22px 11px 34px;color:var(--body);text-transform:none;letter-spacing:0;font-size:14px;
    white-space:normal}

  body.nav-open .masthead{z-index:60}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(4,18,34,.5);
    opacity:0;transition:opacity .26s ease}
  .nav-scrim.is-on{opacity:1}
  .nav-scrim[hidden]{display:none}
  body.nav-open{overflow:hidden}
}

/* hero */
.hero{position:relative;background:var(--navy-deep);overflow:hidden;display:grid;
  min-height:clamp(195px,20vw,278px)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .overlay{position:relative;z-index:1;display:flex;align-items:center;padding-block:26px;
  background:linear-gradient(90deg,rgba(4,18,34,.88) 0%,rgba(4,18,34,.72) 45%,rgba(4,18,34,.45) 100%)}
.hero h1{color:#fff;max-width:34ch;text-wrap:balance}
@media (max-width:980px){.hero h1{max-width:22ch}}
/* One headline is 31 characters and wanted 730px of a 705px column — 25px
   short of fitting on one line. Scoped to that heading rather than shrinking
   every hero, because the home page's two-line headline is deliberate. */
@media (min-width:981px){.hero h1.oneline{font-size:44px;max-width:none;white-space:nowrap}}
.hero .eyebrow{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.82);display:flex;align-items:center;gap:14px;margin-bottom:12px}
.hero .eyebrow::after{content:"";width:56px;height:2px;background:var(--accent)}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.hero-copy{flex:1 1 520px;max-width:760px}
@media (max-width:760px){.hero-row{align-items:flex-start}.hero-copy{flex:1 1 100%}}

/* inner banner */
.banner{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(112px,11.5vw,148px);
  background:linear-gradient(112deg,#001B36 0%,#002F5A 54%,#014676 100%)}
/* fine diagonal weave so the band reads as a surface, not a flat slab */
.banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(112deg,rgba(255,255,255,.055) 0 1px,transparent 1px 20px)}
/* soft green glow anchoring the right side to the brand accent */
.banner::after{content:"";position:absolute;top:-80%;right:-10%;width:38%;height:260%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(47,163,107,.26),rgba(47,163,107,0) 72%)}
.banner .wrap{position:relative;z-index:1;width:100%;padding-block:24px}
.banner h1{color:#fff;font-size:clamp(25px,3vw,36px)}
.banner-sub{color:rgba(255,255,255,.74);font-size:14.5px;margin-top:7px;max-width:58ch}

/* cards */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card h3{margin-bottom:10px}
.feature-cards{margin-top:-46px;position:relative;z-index:5}
.feature-cards .card{box-shadow:var(--shadow)}
/* The overlap is a wide-screen flourish: three cards in a row, lifted so they
   sit over the bottom edge of the hero. It only works while the hero's buttons
   are off to the right of that strip.
   On a phone the hero stacks, the two buttons wrap onto their own line at the
   bottom of the hero, and the first card was landing on top of "Contact Us" —
   covering the button, not just crowding it. The cards are a single column at
   this width anyway, so there is nothing for the lift to do. */
@media (max-width:900px){.feature-cards{margin-top:26px}}
.icon{width:40px;height:40px;border-radius:12px;background:#EAF2F9;color:var(--accent);display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;margin-bottom:12px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}
  /* Stacked, a split follows DOM order, and the services page alternates
     which side the picture is on — so it came out image, text, text, image,
     image, text. Pulling the figure up gives every section the same shape. */
  .split > figure{order:-1}}
.rounded{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

.service{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.service img{height:165px;object-fit:cover;width:100%}
.service .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.service .body h3{text-align:center}
.service .body p{text-align:center;flex:1}
.service .btn{align-self:center}

/* dark band */
.dark{background:linear-gradient(120deg,#001F3F 0%,#00437F 100%);color:#C7D5E3}
.dark h2,.dark h3{color:#fff}
.dark .label{color:#7FB2DA}
.dark .label::after{background:#7FB2DA}
.fleet{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.fleet li{display:flex;gap:12px}
.fleet li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:11px;flex:none}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.stat b{font-family:var(--display);font-size:42px;color:#fff;line-height:1;font-weight:700}
.stat b i{color:var(--accent);font-style:normal}
.stat span{display:block;margin-top:8px;color:#AFC2D4}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:28px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{text-align:center}
.step b{font-family:var(--display);font-size:26px;color:var(--navy);display:block}
.step .rule{width:34px;height:3px;background:var(--accent);margin:6px auto 12px}

/* project highlight */
.project-card{display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.project-card img{width:100%;height:auto;object-fit:contain;align-self:center}
.project-card .body{padding:32px;display:flex;flex-direction:column;gap:16px;justify-content:center}
/* A project with no picture of its own. Without this the card keeps the empty
   picture column and the wording sits in half a card for no reason. */
.project-card.is-textonly{grid-template-columns:1fr}
/* The buttons at the foot of a guide, which used to be pasted into the article
   text itself. */
.guide-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media (max-width:900px){.project-card{grid-template-columns:1fr}}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  background:#EAF2F9;color:var(--brand);padding:6px 12px;border-radius:6px;white-space:nowrap}

/* tables + specs */
.spec{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spec th{text-align:left;font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--body);
  font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--line)}
.spec td{padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.spec td:last-child,.spec th:last-child{text-align:right}
.spec tr:last-child td{font-weight:600;border-bottom:0}

/* On a phone a four-column table of plot sizes squeezes every column to
   nothing and wraps "Corner and odd-shaped" over three lines. Below 560 each
   row becomes a small card: first cell is the heading, the rest are
   label/value pairs taking their labels from data-label. Cells marked
   data-empty are the em-dashes in the totals row, which say nothing once the
   column header is gone. */
@media (max-width:560px){
  .spec,.spec tbody,.spec tr,.spec td{display:block;width:100%}
  .spec thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .spec tr{border-bottom:1px solid var(--line);padding:13px 0}
  .spec tr:last-child{border-bottom:0}
  .spec td{border:0;padding:3px 0;display:flex;justify-content:space-between;align-items:baseline;gap:18px}
  .spec td::before{content:attr(data-label);flex:none;color:var(--body);font-family:var(--display);
    font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
  .spec td:first-child{display:block;font-family:var(--display);font-weight:600;font-size:16px;
    color:var(--ink);margin-bottom:6px}
  .spec td:first-child::before{content:none}
  .spec td:last-child,.spec th:last-child{text-align:right}
  .spec td[data-empty]{display:none}
  .spec tbody tr:hover{background:none}
}
.record-band{background:var(--wash);border-block:1px solid var(--line);padding-block:20px}
.record{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.record > div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 17px;
  display:flex;flex-direction:column;gap:7px;height:100%}
.record dt{font-family:var(--display);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--body);font-weight:600}
.record dd{margin:0;color:var(--ink);font-size:14px;line-height:1.5;flex:1}
/* nowrap here clipped the RERA number: PRM/KA/RERA/1250/304/PR/270526/008688
   is longer than the cell and simply ran off the right-hand edge, so the one
   number a buyer's lawyer checks was unreadable. It wraps now. anywhere rather
   than break-word because the breaks that matter are at the slashes. */
.record dd .code{font-size:13px;letter-spacing:-.01em;overflow-wrap:anywhere}
.record .doc{display:inline-flex;align-items:center;gap:6px;margin-top:auto;align-self:flex-start;
  font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--brand);
  border:1px solid var(--line);border-radius:6px;padding:6px 11px}
.record .doc:hover{border-color:var(--accent);color:var(--accent)}
.record dd .doc:hover{border-color:var(--accent);color:var(--accent)}
/* Two grids, not one. The base .tick flows left to right and suits the short
   lists (4 and 5 items). .tick-cols is the fixed 3 x 5 column-flow grid built
   for the project page's fifteen-item infrastructure list, where the count is
   known and reading down each column is the point.
   These were the same rule, so a four-item list filled rows 1-4 of column one
   and left two columns empty, which looks like a missing image. */
.tick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 34px}
.tick-cols{grid-template-columns:repeat(3,1fr);grid-auto-flow:column;grid-template-rows:repeat(5,auto)}
@media (max-width:1000px){.tick-cols{grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(8,auto)}}
@media (max-width:640px){.tick,.tick-cols{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}}
.tick li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.tick li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:11px;flex:none}
.dist{list-style:none;margin:0;padding:0}
.dist li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.dist span{color:var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.group{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:28px 0 6px}
.group:first-child{margin-top:0}
.dist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 34px}
.dist-block .group{margin-top:0}
@media (max-width:1040px){.dist-grid{grid-template-columns:repeat(2,1fr);gap:26px 34px}}
@media (max-width:640px){.dist-grid{grid-template-columns:1fr;gap:22px}}
figure{margin:0;position:relative}
.impression{position:absolute;top:12px;right:12px;background:rgba(11,28,48,.72);color:#fff;font-family:var(--display);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:4px}

/* testimonials */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative;box-shadow:var(--shadow)}
.quote p{color:var(--body)}
.quote b{display:block;margin-top:14px;font-family:var(--display);color:var(--ink)}

/* contact */
.contact-strip{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:760px){.contact-strip{grid-template-columns:1fr}}
.contact-strip div{padding:24px 20px;color:#fff}
.contact-strip .a{background:var(--brand)}
.contact-strip .b{background:var(--navy-deep)}
.contact-strip small{display:block;opacity:.8;font-size:13px}
.contact-strip b{font-family:var(--display);font-size:22px}
.infocard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;gap:18px;align-items:flex-start;box-shadow:var(--shadow)}
.infocard .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  background:var(--brand);flex:none;transition:background .22s ease}
.infocard .ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.infocard:hover .ic{background:var(--brand-dark)}
.infocard .ic.teal{background:#2E7D8F}
.infocard .ic.sea{background:#3E9AA8}
.infocard h4{font-family:var(--display);color:var(--ink);margin:0 0 4px;font-size:17px}
form.enquiry{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);display:grid;gap:11px}
form.enquiry h3{text-align:center;margin-bottom:6px}
/* in a two-column split the form must not float in the middle of a long text
   column: pin it to the top and let it follow the scroll */
@media (min-width:901px){
  .split > form.enquiry{align-self:start;position:sticky;top:92px}
}
form.enquiry input,form.enquiry textarea{width:100%;border:1px solid var(--line);background:var(--wash);border-radius:8px;
  padding:12px 14px;font-family:var(--text);font-size:15px;line-height:1.35;color:var(--ink)}
form.enquiry textarea{min-height:96px;resize:vertical}
form.enquiry .note{font-size:13px;color:var(--body);text-align:center}

/* footer */
footer{background:var(--navy-deep);color:#A9BACC;padding-block:40px 24px;font-size:14.5px}
footer h4{font-family:var(--display);color:#fff;font-size:16px;margin:0 0 16px}
footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:30px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
/* Four stacked blocks ran past two screens. Two columns for the link lists,
   with the logo and blurb spanning the top, roughly halves it. */
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px 20px}
  .foot-grid > :first-child{grid-column:1 / -1}
  .foot-grid ul{gap:7px}
  footer{padding-block:30px 18px;font-size:14px}
  footer h4{margin-bottom:11px;font-size:15px}
  .foot-logo{max-width:210px}
  .legal{margin-top:20px;padding-top:14px}
}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;font-size:12.5px;line-height:1.7;color:#8FA3B8}
.rera{font-size:12.5px;color:#C7D5E3}

/* sticky mobile cta */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line)}
.sticky .btn{flex:1}
@media (max-width:700px){.sticky{display:flex}body{padding-bottom:78px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- now selling strip ---------- */
.now-selling{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:13.5px;
  color:#fff;background:linear-gradient(135deg,#1C7A4C 0%,#2FA36B 55%,#37B878 100%);
  border-radius:999px;padding:6px 15px;position:relative;overflow:hidden;
  box-shadow:0 2px 10px rgba(47,163,107,.30);transition:box-shadow .25s ease,transform .25s ease}
.now-selling .ns-rot,.now-selling .dot,.now-selling .arw{position:relative;z-index:1}
/* rotating message: lines flip up through a fixed-height window */
.ns-rot{display:block;height:1.5em;line-height:1.5;overflow:hidden}
.ns-line{position:absolute;left:0;top:0;line-height:1.5;white-space:nowrap;opacity:0;transform:translateY(105%);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,.7,.28,1)}
.ns-line.is-on{opacity:1;transform:none}
.ns-line.is-out{opacity:0;transform:translateY(-105%)}
/* light sweeps across the pill every few seconds */
.now-selling::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:sheen 6s cubic-bezier(.45,0,.15,1) infinite}
@keyframes sheen{0%{left:-60%}55%,100%{left:135%}}
.now-selling:hover{color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(47,163,107,.45)}
.now-selling .arw{display:inline-block;transition:transform .25s ease}
.now-selling:hover .arw{transform:translateX(4px)}
.now-selling .dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 0 0 rgba(255,255,255,.75);
  animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ---------- scroll reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.7,.28,1)}

/* ---------- hover ---------- */
.btn{transition:background .2s ease,color .2s ease,transform .18s ease,box-shadow .2s ease}
.btn-primary:hover,.btn-dark:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,42,74,.22)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

.card,.quote,.infocard{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.card:hover,.quote:hover,.infocard:hover{transform:translateY(-5px);border-color:#CFDCEA;
  box-shadow:0 10px 20px rgba(16,42,74,.07),0 24px 48px rgba(16,42,74,.09)}

.service{transition:transform .28s ease,box-shadow .28s ease}
.service img{transition:transform .6s cubic-bezier(.22,.7,.28,1)}
.service:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(16,42,74,.07),0 24px 48px rgba(16,42,74,.09)}
.service:hover img{transform:scale(1.06)}

.project-card img{transition:transform .7s cubic-bezier(.22,.7,.28,1)}
.project-card:hover img{transform:scale(1.04)}
.rounded img{transition:transform .7s cubic-bezier(.22,.7,.28,1)}
.rounded:hover img{transform:scale(1.03)}

nav.main a{position:relative}
nav.main > a::after,.has-sub > a::before{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--accent);transition:width .25s ease}
nav.main > a:hover::after,.has-sub > a:hover::before{width:100%}
.has-sub > a::before{bottom:-6px}
@media (max-width:1200px){nav.main > a::after,.has-sub > a::before{display:none}}

.dist li{transition:color .2s ease}
.dist li:hover{color:var(--accent)}
.spec tbody tr{transition:background .2s ease}
.spec tbody tr:hover{background:rgba(47,123,184,.05)}
.fleet li,.tick li{transition:transform .2s ease}
.fleet li:hover,.tick li:hover{transform:translateX(4px)}

.badge{transition:background .2s ease,color .2s ease}
.badge:hover{background:var(--brand);color:#fff}

footer a{transition:color .2s ease,padding-left .2s ease}
footer a:hover{padding-left:3px}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important}
  *{transition:none!important;animation:none!important}
}

/* ================= motion upgrades ================= */

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--accent),#6FC3A1);transition:width .12s linear}

/* hero: slow drift + staged entrance */
.hero>img{animation:kenburns 22s ease-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.js .hero .eyebrow,.js .hero h1,.js .hero .hero-copy p,.js .hero .actions{
  opacity:0;animation:riseIn .9s cubic-bezier(.22,.7,.28,1) forwards}
.js .hero .eyebrow{animation-delay:.10s}
.js .hero h1{animation-delay:.22s}
.js .hero .hero-copy p{animation-delay:.34s}
.js .hero .actions{animation-delay:.46s}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* headings wipe up instead of plain fade */
.js h2[data-reveal]{opacity:1;transform:none}
.js h2[data-reveal] > .wipe{display:block;clip-path:inset(0 0 105% 0)}
.js h2[data-reveal].is-in > .wipe{clip-path:inset(0 0 -10% 0);
  transition:clip-path .85s cubic-bezier(.22,.7,.28,1)}

/* images wipe open */
.js figure.rounded[data-reveal] img,.js .plan[data-reveal] img{clip-path:inset(0 0 100% 0)}
.js figure.rounded[data-reveal].is-in img,.js .plan[data-reveal].is-in img{
  clip-path:inset(0 0 0 0);transition:clip-path .95s cubic-bezier(.22,.7,.28,1) .05s}

/* parallax drift on paired images */
@media (min-width:900px){.split figure img{will-change:transform}}

/* buttons grow an arrow */
.btn-primary::after,.btn-dark::after{content:"\2192";display:inline-block;
  max-width:0;opacity:0;transform:translateX(-4px);overflow:hidden;
  transition:max-width .25s ease,opacity .25s ease,transform .25s ease}
.btn-primary:hover::after,.btn-dark:hover::after{max-width:1.4em;opacity:1;transform:translateX(0)}

/* floating whatsapp, desktop */
.float-wa{position:fixed;right:22px;bottom:22px;z-index:45;display:none;align-items:center;gap:10px;
  background:#25D366;color:#06301A;font-family:var(--display);font-weight:600;font-size:14px;
  padding:13px 20px;border-radius:999px;box-shadow:0 10px 26px rgba(6,48,26,.28);
  transform:translateY(12px);opacity:0;transition:transform .35s ease,opacity .35s ease,box-shadow .25s ease}
.float-wa.show{transform:none;opacity:1}
.float-wa:hover{box-shadow:0 14px 34px rgba(6,48,26,.36)}
@media (min-width:701px){.float-wa{display:inline-flex}}

/* layout plan opens full screen */
.plan img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(7,18,30,.93);display:flex;align-items:center;
  justify-content:center;padding:28px;opacity:0;pointer-events:none;transition:opacity .3s ease;cursor:zoom-out}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(1400px,96vw);max-height:92vh;width:auto;object-fit:contain;
  transform:scale(.97);transition:transform .35s cubic-bezier(.22,.7,.28,1)}
.lightbox.open img{transform:scale(1)}
.lightbox .hint{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#9FB4C8;
  font-family:var(--mono,var(--display));font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* availability table */
#availability .spec thead th{background:var(--wash);padding-bottom:12px}
#availability .spec tbody tr:first-child td{padding-top:14px}

@media (prefers-reduced-motion:reduce){
  .hero>img{animation:none}
  .js .hero .eyebrow,.js .hero h1,.js .hero .hero-copy p,.js .hero .actions{opacity:1;animation:none}
  .js h2[data-reveal] > .wipe,.js figure.rounded[data-reveal] img,.js .plan[data-reveal] img{clip-path:none!important}
  .now-selling::after{animation:none;display:none}
  .now-selling .dot{animation:none}
  .ns-line{transition:none}
  .float-wa{transform:none;opacity:1}
}

/* ================= forms, modals, map ================= */
form.enquiry select{width:100%;border:1px solid var(--line);background:var(--wash);border-radius:8px;
  padding:12px 14px;font-family:var(--text);font-size:15px;line-height:1.35;color:var(--ink);-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--body) 50%),linear-gradient(135deg,var(--body) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.map-embed{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.map-embed iframe{display:block;width:100%;height:280px;border:0}
.map-embed.tall iframe{height:clamp(300px,26vw,360px)}

.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(7,18,30,.72);opacity:0;pointer-events:none;transition:opacity .25s ease}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{background:#fff;border-radius:16px;width:min(460px,100%);max-height:92vh;overflow:auto;
  padding:30px;box-shadow:0 30px 70px rgba(7,18,30,.35);transform:translateY(14px) scale(.98);
  transition:transform .3s cubic-bezier(.22,.7,.28,1)}
.modal.open .modal-card{transform:none}
.modal-card h3{margin-bottom:6px}
.modal-card .sub{font-size:14.5px;margin-bottom:18px}
.modal-card form{display:grid;gap:11px}
.modal-card input,.modal-card select{width:100%;border:1px solid var(--line);background:var(--wash);border-radius:8px;
  padding:12px 14px;font-family:var(--text);font-size:15px;line-height:1.35;color:var(--ink);height:46px}
/* a native select sizes itself, so it comes out shorter than the inputs beside
   it: strip the native chrome and draw the same arrow the page forms use */
.modal-card select{-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--body) 50%),linear-gradient(135deg,var(--body) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:24px;line-height:1;
  color:var(--body);cursor:pointer;padding:6px}
.modal-card{position:relative}
.modal-note{font-size:12.5px;color:var(--body);text-align:center;margin-top:4px}
.modal-done{text-align:center;padding:10px 0}
.modal-done .tick-mark{width:52px;height:52px;border-radius:50%;background:#E7F6EE;color:#1E8E5A;
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px}

/* ---------------------------------------------------------------- additions
   Added when the static pages became a real application. */

/* Keyboard users can jump past the navigation; nobody else ever sees this. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand, #002F5A);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Honeypot. A person never sees this field, so anything that fills it in is a
   bot and the submission is dropped. It must stay invisible and unfocusable —
   hidden with position rather than display:none, which some bots detect. */
.hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Validation message above the enquiry form. */
.form-error {
  background: #fdecea;
  border: 1px solid #f2c3bf;
  color: #8c1d18;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  margin: 0 0 12px;
}

/* No single token may push a column wider than the screen. The <wbr>s in
   the guide bodies break registration numbers tidily; this catches the rest. */
.prose{overflow-wrap:break-word}
.prose p,.prose li,.prose td{overflow-wrap:break-word}

/* ---------------------------------------------------------------- plot map */
.pmap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start;margin-top:22px}
@media (max-width:900px){.pmap{grid-template-columns:minmax(0,1fr)}}
.pmap-sheet{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pmap-canvas{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.pmap-canvas svg{display:block;width:100%;height:auto;touch-action:manipulation}
@media (max-width:760px){.pmap-canvas svg{min-width:690px}}
.pmap-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding:9px 14px;font-size:12.5px;color:var(--body)}
.pmap-scale{display:flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
.pmap-scale i{display:block;height:7px;border:1px solid var(--body);border-top:none;width:60px;flex:0 0 auto}
.pmap-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pmap-chip{font-family:var(--display);font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--white);
  color:var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1}
.pmap-chip:hover{border-color:var(--brand)}
.pmap-chip[aria-pressed="true"]{background:var(--wash);border-color:var(--brand);color:var(--brand-dark)}
.pmap-chip .sw{width:10px;height:10px;border-radius:2px;display:inline-block}
.pmap-chip .ct{font-size:12px;color:var(--body);font-weight:500}
.pmap-find{margin-left:auto;display:flex;align-items:center;gap:8px}
.pmap-find label{font-family:var(--display);font-size:13px;font-weight:600;color:var(--body)}
.pmap-find input{font-family:var(--text);font-size:15px;width:88px;padding:7px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--white);color:var(--ink)}
.pmap-card{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.pmap-card + .pmap-card{margin-top:14px}
.pmap-card h3{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--body);margin-bottom:12px}
.pmap-no{font-family:var(--display);font-size:38px;font-weight:700;line-height:1;color:var(--ink)}
.pmap-no sup{font-size:17px;color:var(--accent);vertical-align:super}
.pmap-klass{font-family:var(--display);font-size:14px;font-weight:600;margin-top:6px}
.pmap-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0;font-size:14px}
.pmap-dl dt{color:var(--body)}
.pmap-dl dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.pmap-hint{font-size:14px;color:var(--body);margin:0}
.pmap-note{font-size:12.5px;color:var(--body);margin:14px 0 0;line-height:1.55}
.pmap g.plot path{stroke:var(--white);stroke-width:.35;cursor:pointer;transition:fill-opacity .12s}
.pmap g.plot text{font-size:3.1px;fill:var(--ink);text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:var(--white);stroke-width:.5px}
.pmap g.plot.dim path{fill-opacity:.12}
.pmap g.plot.dim text{opacity:.28}
.pmap g.plot.on path{stroke:var(--ink);stroke-width:.8}
.pmap g.plot:hover path{stroke:var(--ink);stroke-width:.7}
.pmap .pl-road{stroke:#C3D0DE;stroke-width:.3;fill:none}
.pmap .pl-bound{stroke:var(--brand);stroke-width:1.1;fill:none}
.pmap .pl-parcel text{font-family:var(--display);font-size:3.1px;font-weight:600;fill:var(--body);text-anchor:middle}
.pmap .pl-parcel tspan.a{font-size:2.4px;font-weight:400}
.pmap-chip{white-space:nowrap}
@media (min-width:761px){
  .pmap-canvas svg{width:auto;max-width:100%;max-height:min(50vh,440px);margin-inline:auto}
}
.pmap aside{display:flex;flex-direction:column;gap:12px}
.pmap aside .pmap-note{margin:0}
.pmap-klass{display:flex;align-items:center;gap:8px}
.pmap-klass .sw{width:10px;height:10px;border-radius:2px;display:inline-block;flex:0 0 auto}

/* The plan is 690px wide at its narrowest legible size, so on a phone it
   scrolls sideways inside its own box. Say so, or half the layout is never
   found. */
.pmap-swipe{display:none}
@media (max-width:760px){
  .pmap-swipe{display:block;font-size:12.5px;color:var(--body);margin:0;
    padding:8px 14px 0;text-align:center}
}

/* ---- availability on the plan -----------------------------------------
   Availability is the thing a buyer is actually scanning for, so it drives
   the plan's contrast: a site still for sale keeps its full colour and gains
   a dark outline, everything gone fades back. The four fills still say what
   type each site is, they just stop competing for attention once sold.

   An SVG `fill` written as an attribute is a presentation attribute, which
   any CSS rule outranks — so the numerals can be recoloured here without
   touching the markup the script writes. */
.pmap g.plot.is-available path{stroke:var(--ink);stroke-width:.8}
.pmap g.plot.is-available text{font-weight:700}

.pmap g.plot.is-sold path{fill-opacity:.2}
.pmap g.plot.is-sold text{fill:#93A3B5;font-weight:400}

.pmap g.plot.is-held path{fill-opacity:.34}
.pmap g.plot.is-held text{fill:#7D8CA0}

/* With the Available filter on, the ones that remain are the only thing
   that should carry an outline. */
.pmap.show-av g.plot.is-available path{stroke-width:1}

.pmap-chip[data-k="av"][aria-pressed="true"]{background:#E7F3EA;border-color:#2E7D4F;color:#1C5E3A}
.pmap-chip[data-k="sold"][aria-pressed="true"]{background:#EEF1F5;border-color:#93A3B5;color:#55657A}
.pmap-status{font-family:var(--display);font-size:13px;font-weight:600;margin:10px 0 0;
  padding:7px 10px;border-radius:8px;background:var(--white);border:1px solid var(--line);color:var(--body)}
.pmap-status.is-av{background:#E7F3EA;border-color:#BBDCC6;color:#1C5E3A}
.pmap-status.is-sold{background:#EEF1F5;border-color:#DCE3EB;color:#55657A}

/* The brochure location map: a wide drawing that needs to be read, so it is
   shown whole on a white mount rather than cropped to a band. */
.locmap{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin:0}
.locmap img{display:block;width:100%;height:auto;border-radius:6px}
.locmap figcaption{margin-top:12px;font-size:13.5px;color:var(--body)}

/* ---- the logo ----------------------------------------------------------
   The header used to set the company name in Poppins because there was no
   artwork. There is: a skyline mark with the wordmark beside it, so the lock-up
   is one image rather than a flex column of two text nodes. Width is capped and
   height follows, so it never pushes the nav around. */
.logo{display:block;line-height:0}
.logo img{display:block;width:auto;height:42px}
@media (max-width:900px){.logo img{height:36px}}
@media (max-width:420px){.logo img{height:31px}}

/* On navy the navy type would vanish, so the footer uses the white knockout. */
.foot-logo{display:block;width:auto;height:40px;margin:0 0 14px}

/* ---- lazy images must still occupy their box ---------------------------
   A lazily-loaded <img> with no CSS width and no width/height attributes has
   zero intrinsic size until it loads. Zero size means it rarely intersects
   the viewport, which is the very condition that would load it — so it can
   sit at 0x0 forever. `img{max-width:100%}` does not help: max-width is a
   cap, not a size. .service img already sets width and height; figure.rounded
   never did, because before these images were lazy the browser fetched them
   immediately and they took their natural size. */
.rounded img{width:100%;height:auto}

/* ---- project gallery ---------------------------------------------------
   The project page had two pictures on it, one of them a brochure render.
   This is the page a buyer spends time on, so it gets the renders of the
   place itself: what is built today, and what it looks like filled in. */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.shots{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.shots{grid-template-columns:1fr}}
.shots figure{margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;position:relative}
.shots img{display:block;width:100%;height:210px;object-fit:cover}
.shots figcaption{padding:12px 14px;font-size:13.5px;color:var(--body);line-height:1.5}
.shots .tag{position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 8px;border-radius:5px;
  background:rgba(11,43,80,.82);color:#fff}
.shots .tag.soon{background:rgba(30,111,184,.9)}

/* ---- text-only signpost cards -----------------------------------------
   The Resources cards point at three other pages. A photograph of a plot
   says nothing about "Power of Attorney", so these carry their words only.
   Without an image the card needs its own top padding and a visible accent,
   or it reads as an empty box. */
.service.plain .body{padding:30px 24px 26px;gap:12px}
.service.plain{border-top:3px solid var(--accent)}
.service.plain:hover{transform:translateY(-3px)}

/* ---- before and after --------------------------------------------------
   Five views, each as a pair. Both shots are shown whole and side by side
   rather than one wiping over the other: the comparison should be a glance,
   not something to operate. The tabs are a real tablist, so arrow keys move
   between views. */
.tn{margin-top:22px}
.tn-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tn-tab{font-family:var(--display);font-size:13.5px;font-weight:600;
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  padding:8px 15px;border-radius:999px;cursor:pointer;transition:border-color .15s,background .15s}
.tn-tab:hover{border-color:var(--brand)}
.tn-tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.cmp-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.cmp-pair{grid-template-columns:1fr}}
.cmp-panel{margin:0}
.cmp-k{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--body);margin:0 0 8px}
.cmp-k.is-after{color:var(--accent)}
.cmp-shot{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--wash)}
.cmp-shot img{display:block;width:100%;height:auto;aspect-ratio:1176/912;object-fit:cover}
.tn-cap{margin:16px 0 0;font-size:15px;color:var(--body)}
.tn-cap b{font-family:var(--display);color:var(--ink);margin-right:8px}
.tn-note{margin:10px 0 0;font-size:12.5px;color:var(--body);line-height:1.55;max-width:80ch}