/* Concrete Space — core stylesheet
   Palette sampled from the logo (brushed silver / brass on graphite)
   and from the real project photos (warm stamped-concrete clay + paver bone). */

:root{
  --slab:      #1A1C1F;   /* graphite base — formwork dark */
  --slab-2:    #23262A;   /* raised panel */
  --slab-3:    #2E3237;   /* hairline / border */
  --silver:    #C7CCD1;   /* brushed metal — primary text on dark */
  --silver-dim:#8E969E;
  --brass:     #C89A45;   /* the logo gold — single accent */
  --brass-lo:  #A87F33;
  --clay:      #6E5140;   /* warm brown from the stamped concrete + wall block */
  --clay-lo:   #4A3629;
  --bone:      #EDE9E3;   /* light section — cured concrete cream */
  --bone-2:    #DFD9D0;
  --bone-3:    #C8C0B4;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 56px);
  --r: 2px;               /* concrete does not have rounded corners */

  --t-fast: 140ms cubic-bezier(.2,.6,.3,1);
  --t: 260ms cubic-bezier(.2,.6,.3,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--slab);
  color:var(--silver);
  font-family:"Archivo","Archivo Variable",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(16px,.55vw + 15px,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit}

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brass);color:#171310;padding:12px 18px;font-weight:700
}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,h4{
  margin:0;
  font-variation-settings:"wdth" 118,"wght" 780;
  letter-spacing:-.005em;
  line-height:1.03;
  text-transform:none;
  color:#E6E9EC;
}
h1{ font-size:clamp(2.5rem,6.4vw,4.55rem) }
h2{ font-size:clamp(1.95rem,4vw,3rem); line-height:1.06 }
h3{ font-size:clamp(1.2rem,1.7vw,1.45rem); font-variation-settings:"wdth" 112,"wght" 720; line-height:1.18 }
h4{ font-size:1.02rem; font-variation-settings:"wdth" 108,"wght" 700 }
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.lede{ font-size:clamp(1.06rem,1.35vw,1.22rem); color:#B4BBC2; max-width:60ch }
.measure{ max-width:66ch }

/* Brass rule device — echoes the "—SPACE—" rules in the logo */
.rule{
  display:flex;align-items:center;gap:14px;
  font-size:.775rem;font-variation-settings:"wdth" 106,"wght" 620;
  letter-spacing:.13em;color:var(--brass);
  margin:0 0 20px;
}
.rule::after{ content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--brass-lo),transparent) }
.rule--c{justify-content:center}
.rule--c::before{content:"";flex:1;height:1px;background:linear-gradient(270deg,var(--brass-lo),transparent)}
.on-bone .rule{color:#8A6A22}
.on-bone .rule::after{background:linear-gradient(90deg,#B99B5E,transparent)}
.on-bone .rule--c::before{background:linear-gradient(270deg,#B99B5E,transparent)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border:1px solid transparent;border-radius:var(--r);
  font-variation-settings:"wdth" 106,"wght" 700;
  font-size:.945rem;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.btn svg{width:17px;height:17px;flex:none}
.btn--brass{ background:var(--brass);color:#191510;box-shadow:inset 0 -2px 0 rgba(0,0,0,.22) }
.btn--brass:hover{background:#D6A950}
.btn--brass:active{transform:translateY(1px)}
.btn--ghost{ background:transparent;color:#DDE1E5;border-color:#454A50 }
.btn--ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn--dark{ background:var(--slab);color:#E6E9EC }
.btn--dark:hover{background:#2A2E33}
.btn--wide{width:100%}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(20,22,25,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--slab-3);
}
.hdr__in{ display:flex;align-items:center;gap:20px;height:74px }
.brand{ display:flex;align-items:center;gap:12px;text-decoration:none;flex:none }
.brand img{width:44px;height:44px}
.brand b{
  display:block;font-size:1.03rem;font-variation-settings:"wdth" 118,"wght" 780;
  letter-spacing:.005em;color:#E6E9EC;line-height:1.05;
}
.brand span{ display:block;font-size:.63rem;letter-spacing:.24em;color:var(--brass);font-variation-settings:"wght" 600 }
.nav{ margin-left:auto;display:flex;align-items:center;gap:30px }
.nav a{
  text-decoration:none;font-size:.9rem;color:#AEB6BD;
  font-variation-settings:"wght" 550;
  padding:6px 0;border-bottom:1.5px solid transparent;transition:color var(--t-fast),border-color var(--t-fast);
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-color:var(--brass)}
.hdr .btn{padding:12px 20px;font-size:.9rem}
.burger{
  display:none;margin-left:auto;background:none;border:1px solid #3C4147;border-radius:var(--r);
  width:46px;height:44px;color:#DDE1E5;cursor:pointer;align-items:center;justify-content:center;
}
.burger svg{width:22px;height:22px}
@media (max-width:960px){
  .nav,.hdr .btn--brass{display:none}
  .burger{display:flex}
  .hdr__in{height:66px}
  .nav.open{
    display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#15171A;border-bottom:1px solid var(--slab-3);padding:8px var(--gut) 20px;
  }
  .nav.open a{padding:14px 0;border-bottom:1px solid #262A2E;font-size:1.02rem}
  .nav.open .btn{display:inline-flex;margin-top:16px}
}

/* ---------- hero ---------- */
.hero{ position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 12% 0%,#24282D 0%,#1A1C1F 62%) }
.hero__in{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,64px);
  align-items:center;padding-block:clamp(48px,7vw,96px) clamp(52px,7vw,100px);
}
.hero h1 .ext{                  /* the one extrusion moment — mirrors the logo's chamfer */
  color:#EDF0F3;
  text-shadow:
    .009em .009em 0 var(--clay-lo), .018em .018em 0 var(--clay-lo),
    .027em .027em 0 var(--clay-lo), .036em .036em 0 var(--clay-lo),
    .045em .045em 0 var(--clay-lo), .054em .054em 0 #3E2E22;
}
@media (max-width:520px){ .hero h1 .ext{ text-shadow:.012em .012em 0 var(--clay-lo), .024em .024em 0 var(--clay-lo), .036em .036em 0 #3E2E22 } }
.hero h1{ margin-bottom:22px }
.hero .lede{margin-bottom:30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.845rem;color:#98A0A8;
}
.hero__meta i{ font-style:normal;display:inline-flex;align-items:center;gap:8px }
.hero__meta svg{width:15px;height:15px;color:var(--brass);flex:none}

.shot{ position:relative }
.shot img{
  width:100%;border-radius:var(--r);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85), 0 0 0 1px #34383D;
}
.shot__tag{
  position:absolute;left:0;bottom:0;
  background:rgba(16,18,20,.9);backdrop-filter:blur(6px);
  border-top:2px solid var(--brass);
  padding:12px 18px;font-size:.8rem;color:#CCD2D8;max-width:82%;
}
.shot__tag b{display:block;color:#fff;font-variation-settings:"wdth" 110,"wght" 700;font-size:.94rem;margin-bottom:1px}
@media (max-width:880px){
  .hero__in{grid-template-columns:1fr;gap:34px}
  .shot{order:-1}
}

/* ---------- trust band ---------- */
.band{ background:var(--slab-2);border-block:1px solid var(--slab-3) }
.band ul{
  list-style:none;margin:0;padding:22px 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px 26px;
}
.band li{ display:flex;align-items:center;gap:12px;font-size:.87rem;color:#B6BDC4;line-height:1.28 }
.band svg{width:22px;height:22px;color:var(--brass);flex:none}
.band b{display:block;color:#E4E8EB;font-variation-settings:"wdth" 106,"wght" 680}
@media (max-width:760px){ .band ul{grid-template-columns:repeat(2,1fr)} }

/* ---------- sections ---------- */
.sec{ padding-block:clamp(58px,8vw,110px) }
.sec--bone{ background:var(--bone);color:#33383D }
.sec--bone h1,.sec--bone h2,.sec--bone h3,.sec--bone h4{color:#181A1D}
.sec--bone .lede{color:#4E555C}
.sec--clay{ background:linear-gradient(180deg,#2A2119,#241C15);border-block:1px solid #3A2E23 }
.sec__head{ max-width:74ch;margin-bottom:clamp(30px,4vw,48px) }

/* ---------- services ---------- */
.svc{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bone-3) }
.svc a{
  background:var(--bone);text-decoration:none;color:inherit;
  padding:30px 28px 26px;display:flex;flex-direction:column;
  transition:background var(--t-fast);
}
.svc a:hover{ background:#F5F2ED }
.svc__ic{
  width:42px;height:42px;margin-bottom:18px;color:var(--clay);
}
.svc h3{margin-bottom:9px}
.svc p{ font-size:.925rem;color:#565D64;margin-bottom:18px }
.svc em{
  font-style:normal;margin-top:auto;font-size:.83rem;letter-spacing:.06em;
  color:#8A6A22;font-variation-settings:"wght" 680;
}
@media (max-width:900px){ .svc{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .svc{grid-template-columns:1fr} }

/* ---------- gallery ---------- */
.gal{ display:grid;grid-template-columns:repeat(6,1fr);gap:10px }
.gal button{
  position:relative;padding:0;border:0;background:#101215;cursor:zoom-in;
  overflow:hidden;border-radius:var(--r);display:block;
}
.gal img{ width:100%;height:100%;object-fit:cover;transition:transform 420ms cubic-bezier(.2,.6,.3,1) }
.gal button:hover img{ transform:scale(1.035) }
.gal button::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(10,11,13,.72) 0%,rgba(10,11,13,0) 42%);
}
.gal figcaption{
  position:absolute;left:16px;right:16px;bottom:13px;z-index:2;
  font-size:.83rem;color:#E2E6EA;text-align:left;
  font-variation-settings:"wght" 600;
}
.gal .g-lg{ grid-column:span 3;aspect-ratio:16/13 }
.gal .g-sm{ grid-column:span 2;aspect-ratio:4/5 }
@media (max-width:820px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .g-lg,.gal .g-sm{grid-column:span 1;aspect-ratio:4/5}
}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(8,9,11,.94);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:22px;
}
.lb[open],.lb.show{display:flex}
.lb img{ max-width:min(1100px,94vw);max-height:82vh;object-fit:contain;border-radius:var(--r) }
.lb__cap{ position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#C3CAD0;font-size:.88rem;padding-inline:20px }
.lb__x,.lb__p,.lb__n{
  position:absolute;background:rgba(255,255,255,.07);border:1px solid #3E434A;color:#E6E9EC;
  width:48px;height:48px;border-radius:var(--r);cursor:pointer;display:grid;place-items:center;
}
.lb__x{top:20px;right:20px}
.lb__p{left:20px;top:50%;transform:translateY(-50%)}
.lb__n{right:20px;top:50%;transform:translateY(-50%)}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:rgba(255,255,255,.14);border-color:var(--brass)}
.lb svg{width:20px;height:20px}
@media (max-width:620px){ .lb__p{left:8px} .lb__n{right:8px} }

/* ---------- process (a real sequence, so it is numbered) ---------- */
.steps{ display:grid;grid-template-columns:repeat(5,1fr);gap:0 }
.steps li{ list-style:none;position:relative;padding:0 22px 0 0 }
.steps li::before{
  content:"";position:absolute;left:0;top:15px;right:0;height:1px;background:#3B4046;
}
.steps li:last-child::before{right:22px}
.steps b{
  position:relative;display:grid;place-items:center;width:31px;height:31px;
  background:var(--slab);border:1px solid var(--brass);color:var(--brass);
  font-size:.82rem;font-variation-settings:"wght" 700;margin-bottom:18px;border-radius:50%;
}
.steps h4{margin-bottom:7px;color:#E4E8EB}
.steps p{font-size:.885rem;color:#98A0A8;padding-right:6px}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:26px}
  .steps li{padding:0 0 0 46px}
  .steps li::before{left:15px;top:31px;bottom:-26px;right:auto;width:1px;height:auto}
  .steps li:last-child::before{display:none}
  .steps b{position:absolute;left:0;top:0;margin:0}
}

/* ---------- split content ---------- */
.split{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,68px);align-items:center }
.split--narrow{grid-template-columns:1.15fr .85fr}
@media (max-width:860px){ .split,.split--narrow{grid-template-columns:1fr;gap:32px} }

.facts{ list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px }
.facts li{ display:flex;gap:13px;font-size:.945rem;line-height:1.5 }
.facts svg{width:19px;height:19px;color:var(--brass);flex:none;margin-top:3px}
.sec--bone .facts svg{color:#8A6A22}

/* ---------- quote form ---------- */
.quote{
  background:var(--slab-2);border:1px solid var(--slab-3);border-radius:var(--r);
  padding:clamp(24px,3.4vw,40px);
}
.q-prog{ display:flex;gap:6px;margin-bottom:26px }
.q-prog span{ flex:1;height:3px;background:#3A3F45;border-radius:2px;transition:background var(--t) }
.q-prog span.on{ background:var(--brass) }
.q-step{display:none}
.q-step.on{display:block;animation:qin 300ms cubic-bezier(.2,.6,.3,1)}
@keyframes qin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.q-step > p.q-q{
  font-size:1.16rem;color:#E6E9EC;margin-bottom:6px;
  font-variation-settings:"wdth" 110,"wght" 700;line-height:1.24;
}
.q-hint{font-size:.85rem;color:#8E969E;margin-bottom:20px}
.q-opts{ display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:24px }
.q-opts.one{grid-template-columns:1fr}
.q-opt{ position:relative }
.q-opt input{ position:absolute;opacity:0;width:0;height:0 }
.q-opt span{
  display:flex;align-items:center;gap:11px;
  padding:14px 16px;border:1px solid #3E434A;border-radius:var(--r);
  background:#1D2023;color:#C4CAD0;font-size:.92rem;cursor:pointer;line-height:1.3;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.q-opt span::before{
  content:"";width:16px;height:16px;border:1.5px solid #565C63;flex:none;
  border-radius:3px;transition:all var(--t-fast);
}
.q-opts.radio .q-opt span::before{border-radius:50%}
.q-opt span:hover{border-color:#5C636A;color:#DDE2E6}
.q-opt input:checked + span{ border-color:var(--brass);background:#2A2519;color:#F0E6D2 }
.q-opt input:checked + span::before{ background:var(--brass);border-color:var(--brass);box-shadow:inset 0 0 0 3px #2A2519 }
.q-opt input:focus-visible + span{outline:2px solid var(--brass);outline-offset:2px}
@media (max-width:560px){ .q-opts{grid-template-columns:1fr} }

.q-field{margin-bottom:15px}
.q-field label{ display:block;font-size:.82rem;color:#9BA3AA;margin-bottom:6px;font-variation-settings:"wght" 600 }
.q-field input,.q-field textarea{
  width:100%;padding:13px 15px;background:#1D2023;color:#E6E9EC;
  border:1px solid #3E434A;border-radius:var(--r);font:inherit;font-size:.95rem;
  transition:border-color var(--t-fast);
}
.q-field input:focus,.q-field textarea:focus{ outline:none;border-color:var(--brass) }
.q-field textarea{resize:vertical;min-height:88px}
.q-field input:invalid:not(:placeholder-shown){border-color:#B4553F}
.q-err{ color:#E08E7A;font-size:.85rem;margin:0 0 14px;display:none }
.q-err.on{display:block}
.q-nav{ display:flex;gap:10px;margin-top:22px }
.q-nav .btn{flex:1}
.q-back{ flex:0 0 auto!important;padding-inline:20px }
.q-send{ display:grid;gap:10px;margin-top:20px }
.q-or{ text-align:center;font-size:.8rem;color:#7D858C;margin:4px 0 }
.q-sum{
  background:#1D2023;border:1px solid #3A3F45;border-left:2px solid var(--brass);
  padding:16px 18px;margin-bottom:20px;font-size:.9rem;color:#B4BBC2;line-height:1.65;
}
.q-sum b{color:#E6E9EC;font-variation-settings:"wght" 650}

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--bone-3) }
.faq details{ border-bottom:1px solid var(--bone-3) }
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-variation-settings:"wdth" 108,"wght" 680;font-size:1.03rem;color:#1D2024;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:31px;width:11px;height:11px;
  border-right:2px solid #8A6A22;border-bottom:2px solid #8A6A22;
  transform:rotate(45deg);transition:transform var(--t);
}
.faq details[open] summary::after{ transform:rotate(-135deg);top:34px }
.faq .a{ padding:0 44px 24px 0;color:#4E555C;font-size:.965rem;max-width:76ch }
.sec--bone .faq{border-color:var(--bone-3)}

/* ---------- footer ---------- */
.ftr{ background:#141619;border-top:1px solid var(--slab-3);padding-block:52px 0 }
.ftr__grid{ display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:40px }
.ftr h4{ color:#E4E8EB;margin-bottom:16px;font-size:.88rem;letter-spacing:.02em }
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr a{ color:#98A0A8;text-decoration:none;font-size:.91rem }
.ftr a:hover{color:var(--brass)}
.ftr .brand{margin-bottom:16px}
.ftr__note{ font-size:.88rem;color:#7D858C;max-width:44ch }
.ftr__bar{
  border-top:1px solid #24272B;padding-block:20px 26px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:.82rem;color:#6F777E;
}
@media (max-width:800px){ .ftr__grid{grid-template-columns:1fr 1fr;gap:32px} .ftr__grid > div:first-child{grid-column:1/-1} }

/* ---------- sticky mobile call bar ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:repeat(3,1fr);gap:1px;background:#33383D;
  border-top:1px solid #33383D;
  padding-bottom:env(safe-area-inset-bottom);
}
.dock a{
  background:#1B1E21;color:#DDE2E6;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:11px 4px;font-size:.72rem;font-variation-settings:"wght" 620;letter-spacing:.03em;
}
.dock a svg{width:19px;height:19px;color:var(--brass)}
.dock a.pri{background:var(--brass);color:#191510}
.dock a.pri svg{color:#191510}
@media (max-width:760px){
  .dock{display:grid}
  body{padding-bottom:66px}
}

/* ---------- service page bits ---------- */
.crumb{ font-size:.83rem;color:#7D858C;padding-top:22px }
.crumb a{color:#9BA3AA;text-decoration:none}
.crumb a:hover{color:var(--brass)}
.phead{ padding-block:clamp(30px,4vw,52px) clamp(40px,5vw,68px) }
.phead h1{ font-size:clamp(2.1rem,4.9vw,3.5rem);margin-bottom:20px }
.spec{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--slab-3);
  border:1px solid var(--slab-3);
}
.spec li{ background:var(--slab);padding:20px 22px }
.spec b{ display:block;font-size:.76rem;letter-spacing:.1em;color:var(--brass);margin-bottom:7px;font-variation-settings:"wght" 640 }
.spec span{ display:block;font-size:.93rem;color:#C0C7CD;line-height:1.45 }

/* single-column page head, used where no representative photo exists yet */
.split-none{ max-width:70ch }

/* related-services cards sitting on a dark section */
.svc--dark{ background:var(--slab-3) }
.svc--dark a{ background:var(--slab-2);color:#C7CCD1 }
.svc--dark a:hover{ background:#2A2E33 }
.svc--dark h3{ color:#E6E9EC;margin-bottom:14px }
.svc--dark em{ color:var(--brass) }
.prose h2{margin:2.1em 0 .55em;font-size:clamp(1.5rem,2.5vw,2rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.7em 0 .45em}
.prose ul{ padding-left:0;list-style:none;display:grid;gap:11px;margin:0 0 1.3em }
.prose ul li{ position:relative;padding-left:24px;font-size:.965rem }
.prose ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;
  background:var(--brass);
}
.sec--bone .prose ul li::before{background:#8A6A22}

.cta-strip{
  background:linear-gradient(115deg,#2C2218 0%,#241C15 55%,#1F1913 100%);
  border-block:1px solid #3E3125;
}
.cta-strip .wrap{
  padding-block:clamp(44px,6vw,72px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;
}
.cta-strip h2{max-width:18ch}
.cta-strip .btns{display:flex;flex-wrap:wrap;gap:11px}

.tiles{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px }
.tiles img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
@media (max-width:700px){ .tiles{grid-template-columns:repeat(2,1fr)} }

.note{
  font-size:.85rem;color:#7D858C;border-left:2px solid var(--slab-3);
  padding-left:16px;margin-top:26px;max-width:60ch;
}