/* CARIBASOL V2-mix — content pages of giro 14 (D-135…D-137): Sell, About, Areas (index + zone pages), Journal (index + article).
   Tokens, type, page gradient: css/base.css · header / footer / the one page container (--gx): css/shell.css · forms, channels, buttons, chips: css/contact.css ·
   property cards + grid: css/results.css (only on pages that show property cards) · the card face / stretched link: css/shared.css.
   Reading measure: ONE token, --measure (≈ 70 characters), for every block of prose of these pages. Grids and cards run the full width of the container. */

:root { --measure: 58ch; }   /* giro 27 (point 10): 70ch of Inter = ≈ 99 characters a line at 1440 (measured); 58ch ≈ 80 */

.pg { padding: calc(18px * var(--ui)) var(--gx) calc(72px * var(--ui) * var(--sp)); }
@media (min-width: 1024px) { .pg { padding-top: calc(var(--shell-h) + calc(36px * var(--ui))); } }

/* ---- intro ---- */
.pg-intro h1 { margin: calc(8px * var(--ui)) 0 0; font-size: clamp(calc(29px * var(--ui)), calc(3.8vw * var(--ui)), calc(44px * var(--ui))); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.pg-intro .lede { margin: calc(14px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; color: var(--muted); max-width: var(--measure); text-wrap: pretty; }
.pg-intro .lede + .lede { margin-top: calc(9px * var(--ui)); }
.pg-actions { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-top: calc(20px * var(--ui)); }
.ct-btn--pri { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (hover: hover) and (pointer: fine) { .ct-btn--pri:hover { background: var(--blue-h); border-color: var(--blue-h); color: #fff; } }
.pg-intro--split { display: grid; gap: calc(21px * var(--ui)); }
@media (min-width: 768px) { .pg-intro--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: calc(42px * var(--ui)); } }

/* ---- sections ---- */
.pg-sec { margin-top: calc(48px * var(--ui) * var(--sp)); }
@media (min-width: 1024px) { .pg-sec { margin-top: calc(66px * var(--ui) * var(--sp)); } }
.pg-h2 { margin: 0 0 calc(15px * var(--ui)); font-size: clamp(calc(18px * var(--ui)), calc(2.25vw * var(--ui)), calc(24px * var(--ui))); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.pg-sub { margin: calc(21px * var(--ui)) 0 calc(11px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-family: var(--font); }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1em; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.65; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.src { margin: calc(11px * var(--ui)) 0 0; font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); max-width: var(--measure); }
.src a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* missing text / data: always visible, never styled as content */
.ph-txt { display: block; font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; line-height: 1.5; color: var(--muted); padding: calc(9px * var(--ui)) calc(11px * var(--ui)); border: 1px dashed var(--line-2); border-radius: calc(9px * var(--ui)); background: rgba(255, 255, 255, .5); }
.ph-box { position: relative; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--r-photo); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(12px * var(--ui));
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 12px), linear-gradient(160deg, #dfe6ee, #cfd8e3);
  box-shadow: 1px 2px 3px rgba(14, 34, 64, .12), 3px 8px 14px -4px rgba(14, 34, 64, .16); color: #3e4b5c; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; letter-spacing: .02em; }
.ph-box .chip-rv { position: absolute; top: calc(9px * var(--ui)); left: calc(9px * var(--ui)); background: rgba(247, 250, 253, .92); }
.ph-box--wide { --ar: 3 / 2; }
@media (min-width: 768px) { .ph-box--wide { --ar: 21 / 8; } }

/* ---- card grids (services, steps, team): full container width ---- */
.tiles { display: grid; gap: calc(12px * var(--ui)); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { border-radius: calc(15px * var(--ui)); padding: calc(17px * var(--ui)) calc(17px * var(--ui)) calc(18px * var(--ui)); background: var(--surf-tl); border: 1px solid rgba(14, 34, 64, .06); box-shadow: var(--rest-sh); min-width: 0; }
.tile h3 { margin: 0; font-family: var(--font); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
.tile p { margin: calc(6px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.tile .src-l { display: block; margin-top: calc(8px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); }
.tile__n { display: inline-flex; align-items: center; justify-content: center; width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); margin-bottom: calc(9px * var(--ui)); border-radius: 50%; background: var(--blue-t); color: var(--blue); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .ph-txt { margin-top: calc(8px * var(--ui)); }
.tile--ph { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--line); }
/* giro 15b (D-151): the cards of a row are cut from ONE metallic slab: a radial gradient as wide as the row, its light at the middle of the row (50 %), nudged by --gt (-1…1, phone tilt, D-152; the variable is read here, where the gradient is built). js/slab.js writes --sw (width of the row) and --sl (this card's offset in it); without JS every card keeps its own gradient (--surf-tl) */
.tiles[data-slab] > .tile:not(.tile--ph) { background-color: var(--sb-0, #EEF4FB); background-image: radial-gradient(75% 130% at calc(50% + var(--gt, 0) * 16%) 0%, var(--pn-1, #FFFFFF) 0%, var(--pn-2, #F6F9FD) 52%, var(--cr-3, #E9F1FA) 100%); background-repeat: no-repeat; background-origin: border-box; background-size: var(--sw, 100%) 100%; background-position: calc(var(--sl, 0px) * -1) 0; }

/* ---- closing band ---- */
.band { display: grid; gap: calc(15px * var(--ui)); padding: calc(21px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(18px * var(--ui)); background: var(--surf-panel); border: 1px solid rgba(14, 34, 64, .06); box-shadow: var(--rest-sh); }
@media (min-width: 768px) { .band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(30px * var(--ui)); padding: calc(27px * var(--ui)) calc(30px * var(--ui)); } }
.band h2 { margin: 0; font-size: clamp(calc(17px * var(--ui)), calc(1.95vw * var(--ui)), calc(21px * var(--ui))); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
#ar-end-h, #ab-end-h, #gd-jr-h, #jr-gd-h, #zn-ask-h { font-size: clamp(calc(18px * var(--ui)), calc(2.25vw * var(--ui)), calc(24px * var(--ui))); }   /* giro 22 (D-205, D-209): every closing banner (Areas + zone pages, About, Guides, Journal) on the .pg-h2 scale (24 / 18 px) */
.band p { margin: calc(6px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; color: var(--muted); max-width: var(--measure); }
.band .pg-actions { margin-top: 0; }

/* ======================= SELL ======================= */
.sl-form { display: grid; gap: calc(30px * var(--ui)); }
@media (min-width: 1024px) { .sl-form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(42px * var(--ui)); align-items: start; } }
.sl-side { display: grid; gap: calc(30px * var(--ui)); }
.sl-side .ct-h2 { margin-bottom: calc(11px * var(--ui)); }
.sl-photos { margin: 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.5; color: var(--muted); }
.sl-links { display: grid; gap: calc(8px * var(--ui)); }
.sl-links a { display: flex; align-items: center; justify-content: space-between; gap: calc(9px * var(--ui)); min-height: calc(42px * var(--ui)); padding: calc(8px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(12px * var(--ui)); color: var(--ink); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; text-decoration: none;
  background: rgba(255, 255, 255, .72); box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 1px 4px 10px -2px rgba(14, 34, 64, .07); transition: background-color .18s ease, box-shadow .18s ease; }
@media (hover: hover) and (pointer: fine) { .sl-links a:hover { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 2px 10px 24px -6px rgba(14, 34, 64, .16); } }
.sl-links small { display: block; margin-top: 2px; font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; color: var(--muted); }
.sl-links .go { color: var(--blue); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: calc(30px * var(--ui)); cursor: pointer;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c1a17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.fld select:focus-visible { background-color: #fff; }

/* ======================= ABOUT ======================= */
.ab-since { display: block; width: calc(96px * var(--ui)); height: auto; }
.ab-since-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6px * var(--ui)); }
@media (min-width: 768px) { .ab-since-wrap { align-items: flex-end; } }
.ab-office { display: grid; gap: calc(24px * var(--ui)); }
@media (min-width: 1024px) { .ab-office { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(42px * var(--ui)); align-items: start; } }
.tm-slot { display: grid; gap: calc(11px * var(--ui)); }
.tm-slot .ph-box { --ar: 4 / 5; max-width: calc(195px * var(--ui)); }
.tm-slot h3 { margin: 0; font-family: var(--font); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; }

/* ======================= AREAS ======================= */
.ar-note { margin: 0 0 calc(18px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); max-width: var(--measure); }
.card__ph--temp { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 12px), linear-gradient(160deg, #dfe6ee, #cfd8e3); display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(12px * var(--ui));
  color: #3e4b5c; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; letter-spacing: .02em; }
.card__ph--temp .chip-rv { position: absolute; top: calc(9px * var(--ui)); right: calc(9px * var(--ui)); background: rgba(247, 250, 253, .92); }
[data-card] .card__title--zone { margin-top: 2px; font-size: clamp(calc(18px * var(--ui)), calc(2.25vw * var(--ui)), calc(24px * var(--ui))); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }   /* giro 24 (D-229): the .pg-h2 scale 24 / 18 px, same weight as every section title (was 17) */
[data-card] .card__title--zone + .card__loc { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-variant-numeric: tabular-nums; }
.zn-facts { display: grid; gap: calc(21px * var(--ui)); }
@media (min-width: 1024px) { .zn-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12px * var(--ui)); } }
.zn-office { display: grid; gap: calc(21px * var(--ui)); }
@media (min-width: 1024px) { .zn-office { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(42px * var(--ui)); align-items: start; } }
.zn-more { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-top: calc(21px * var(--ui)); }
.zn-others { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); list-style: none; margin: 0; padding: 0; }
.zn-others a { display: inline-flex; align-items: center; min-height: calc(33px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: calc(749px * var(--ui)); border: 1px solid #A9B8CB; background: #FFFFFF; color: var(--ink); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .zn-others a:hover { border-color: var(--ink); background: #fff; color: var(--ink); } }

/* ======================= JOURNAL ======================= */
.jr-list { display: grid; gap: calc(24px * var(--ui)) calc(18px * var(--ui)); grid-template-columns: 1fr; }
@media (min-width: 768px) { .jr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .jr-list .jr-card--lead { grid-column: 1 / -1; } }
.jr-card { display: block; color: var(--ink); position: relative; }
.jr-card__in { position: relative; display: flex; flex-direction: column; gap: calc(11px * var(--ui)); height: 100%; box-sizing: border-box; border-radius: calc(18px * var(--ui)); padding: calc(9px * var(--ui)) calc(9px * var(--ui)) calc(17px * var(--ui)); }
.jr-card__cat, .jr-card h2, .jr-card p, .jr-card__more { padding: 0 calc(6px * var(--ui)); }
.jr-card__media { position: relative; aspect-ratio: 3 / 2; border-radius: calc(15px * var(--ui)); display: flex; align-items: center; justify-content: center; font-size: max(12px, calc(12px * var(--ui))); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.jr-card__ph { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 10px), var(--tone, #BFD1E6); box-shadow: 1px 2px 3px rgba(14, 34, 64, .18), 3px 8px 14px -4px rgba(14, 34, 64, .22); }
.jr-card__media > span { position: relative; opacity: .72; }
.jr-card p { margin: 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.jr-card__cat { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jr-card h2 { margin: 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.jr-card__meta { padding: 0 calc(6px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); }
.jr-card__more { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; color: var(--blue); margin-top: auto; }
.jr-card__flag { padding: 0 calc(6px * var(--ui)); }
/* the wide "lead" card (also .jr-card--lone, a list with ONE visible story): css/shared.css §6 */
.jr-ph-note { margin: calc(21px * var(--ui)) 0 0; }

/* article */
.art-head { max-width: calc(var(--measure) + calc(90px * var(--ui))); }
.art-head h1 { margin: calc(8px * var(--ui)) 0 0; font-size: clamp(calc(23px * var(--ui)), calc(3.45vw * var(--ui)), calc(36px * var(--ui))); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.art-meta { margin: calc(12px * var(--ui)) 0 0; font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); display: flex; flex-wrap: wrap; gap: calc(3px * var(--ui)) calc(11px * var(--ui)); }
.art-meta span + span::before { content: '·'; margin-right: calc(11px * var(--ui)); }
.art-status { display: grid; gap: calc(5px * var(--ui)); margin-top: calc(15px * var(--ui)); padding: calc(11px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(11px * var(--ui)); background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--line); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.5; color: var(--ink); max-width: var(--measure); }
.art-status a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.art-fig { margin: calc(24px * var(--ui)) 0 0; }
.art-fig img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--r-photo); box-shadow: 1px 2px 3px rgba(14, 34, 64, .12), 3px 8px 14px -4px rgba(14, 34, 64, .16); }
.art-fig .ph-box { --ar: 3 / 2; }
@media (min-width: 768px) { .art-fig { max-width: 880px; } .art-fig .ph-box { --ar: 16 / 9; } }
.art-grid { display: grid; gap: calc(30px * var(--ui)); margin-top: calc(30px * var(--ui)); }
@media (min-width: 1024px) { .art-grid { grid-template-columns: minmax(0, var(--measure)) minmax(calc(180px * var(--ui)), calc(240px * var(--ui))); gap: calc(60px * var(--ui)); align-items: start; } .art-aside { position: sticky; top: calc(var(--sticky-top) + calc(6px * var(--ui))); } }
.art-body h2 { margin: 1.8em 0 .6em; font-size: clamp(calc(16px * var(--ui)), calc(1.65vw * var(--ui)), calc(18px * var(--ui))); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.art-body h2:first-child { margin-top: 0; }
.art-body h3 { margin: 1.5em 0 .4em; font-family: var(--font); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; }
.art-body p { margin: 0 0 1em; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.7; text-wrap: pretty; }
.art-body ul, .art-body ol { margin: 0 0 1em; padding-left: 1.3em; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.7; }
.art-body li { margin-bottom: .4em; }
.art-aside { display: grid; gap: calc(21px * var(--ui)); }
.art-share { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); }
.art-share .ct-btn { min-height: calc(33px * var(--ui)); padding: 0 calc(11px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); }
.art-share .ct-btn svg { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); }
.art-aside p { margin: 0 0 calc(9px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; color: var(--muted); }
.rel-note { margin: 0 0 calc(15px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); max-width: var(--measure); }

@media (prefers-reduced-motion: reduce) { .sl-links a, .zn-others a { transition: none; } }

/* ======================= ZONE PAGES, giro 16 (blocks of tools/build-zones.py) ======================= */
.zn-count { margin: calc(9px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.5; color: var(--muted); }
.zn-count strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.zn-gal { display: grid; gap: calc(12px * var(--ui)); grid-template-columns: 1fr; }
@media (min-width: 640px) { .zn-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zn-gal .ph-box { --ar: 3 / 2; }
.zn-fig { margin: 0; }
.zn-fig picture, .t3d__ph picture { display: contents; }   /* giro 24 (D-233): AVIF <picture> wrapper adds no box */
.zn-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-photo); box-shadow: 1px 2px 3px rgba(14, 34, 64, .12), 3px 8px 14px -4px rgba(14, 34, 64, .16); }
.zn-fig figcaption { margin-top: calc(6px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); }
.zn-map { margin: 0; }
.zn-map.ph-box { --ar: 16 / 9; }
.zn-map img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-photo); box-shadow: 1px 2px 3px rgba(14, 34, 64, .12), 3px 8px 14px -4px rgba(14, 34, 64, .16); }
.zn-map + .pg-actions { margin-top: calc(14px * var(--ui)); }
.pg-h2 + .pg-actions { margin-top: 0; }
/* four homes in one row on wide screens (the zone pages show exactly four); below 1280 the grid keeps its 2 / 3 columns */
@media (min-width: 1280px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1279px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* 2 × 2, never 3 + 1 */

/* ======================= giro 18 (D-178): place photographs (Temp, Unsplash) ======================= */
.card__ph { position: relative; }
.card__ph img { width: 100%; height: auto; display: block; }
.card__ph--type { aspect-ratio: 3 / 2; display: flex; flex-direction: column; justify-content: space-between; padding: calc(14px * var(--ui)) calc(16px * var(--ui)); box-sizing: border-box;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 10px), #C6D6E8; color: var(--ink, #0E2240); }
.card__ph-k { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(14, 34, 64, .78); }
.card__ph-z { font-family: var(--f-title); font-size: calc(27px * var(--ui)); line-height: 1.05; font-weight: 600; letter-spacing: -.01em; }
.ph-credit { position: absolute; left: calc(8px * var(--ui)); bottom: calc(8px * var(--ui)); max-width: calc(100% - calc(16px * var(--ui))); font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; line-height: 1.2; color: #fff; background: rgba(14, 34, 64, .6); padding: calc(3px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(749px * var(--ui)); pointer-events: none; }
.chip-rv--ph { position: absolute; top: calc(9px * var(--ui)); right: calc(9px * var(--ui)); background: rgba(247, 250, 253, .94); }
.zn-fig img { aspect-ratio: 3 / 2; object-fit: cover; }
.zn-fig figcaption { font-size: max(12px, calc(14px * var(--ui))); line-height: 1.45; }
.ar-credit { font-size: max(12px, calc(12px * var(--ui))); }
.ar-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* giro 27 (point 9): the office photograph of the client (img/photos/office-drone, rights confirmed) instead of the placeholder box */
.ab-photo { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r-photo, calc(15px * var(--ui))); overflow: hidden; background: var(--c-blue-t, #E8F1FB); }
.ab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }

/* ======================= About, redesigned (27.10.2026) — intro + photo · figures · services with icons · rentals · the office card ======================= */
.ab2 .kicker { margin: 0 0 calc(6px * var(--ui)); }
.ab2-i { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); flex: none; fill: none; stroke: var(--c-blue, #0D53A1); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* intro */
.ab2-hero { display: grid; gap: calc(28px * var(--ui)); align-items: center; }
@media (min-width: 900px) { .ab2-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: calc(56px * var(--ui)); } }
.ab2-hero h1 { margin: calc(6px * var(--ui)) 0 0; font-size: clamp(calc(34px * var(--ui)), calc(4.4vw * var(--ui)), calc(52px * var(--ui))); line-height: 1.04; }
.ab2-lead { margin: calc(18px * var(--ui)) 0 0; font-family: var(--f-brand); font-size: calc(22px * var(--ui)); line-height: 1.35; color: #0E2240; }
.ab2-hero .lede { margin-top: calc(12px * var(--ui)); }
.ab2-hero__ph { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: calc(20px * var(--ui)); overflow: visible; }
.ab2-hero__ph picture, .ab2-hero__ph > picture img { display: block; width: 100%; height: 100%; }
.ab2-hero__ph img { object-fit: cover; object-position: 50% 65%; border-radius: calc(20px * var(--ui)); box-shadow: 0 2px 6px rgba(14, 34, 64, .12), 0 24px 48px -12px rgba(14, 34, 64, .35); }
.ab2-since { position: absolute; left: calc(-18px * var(--ui)); bottom: calc(-22px * var(--ui)); display: grid; place-items: center; width: calc(118px * var(--ui)); height: calc(118px * var(--ui)); border-radius: 50%; background: #fff; box-shadow: 0 10px 28px rgba(14, 34, 64, .22); }
.ab2-since img { width: 74%; height: auto; box-shadow: none !important; border-radius: 0 !important; }
/* figures */
.ab2-facts { list-style: none; margin: calc(52px * var(--ui)) 0 0; padding: calc(22px * var(--ui)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(18px * var(--ui)); border-radius: calc(18px * var(--ui)); background: #fff; box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 0 14px 36px -10px rgba(14, 34, 64, .18); }
@media (min-width: 900px) { .ab2-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: calc(26px * var(--ui)) calc(30px * var(--ui)); } .ab2-facts li + li { border-left: 1px solid #E3EAF3; padding-left: calc(24px * var(--ui)); } }
.ab2-facts li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: calc(12px * var(--ui)); align-items: center; }
.ab2-facts .ab2-i { grid-row: 1 / span 2; width: calc(42px * var(--ui)); height: calc(42px * var(--ui)); padding: calc(9px * var(--ui)); box-sizing: border-box; border-radius: 50%; background: #EEF3F9; }
.ab2-facts b { font-family: var(--f-brand); font-size: calc(30px * var(--ui)); line-height: 1; color: #0E2240; }
.ab2-facts span { font-size: max(13px, calc(14px * var(--ui))); line-height: 1.3; color: #4A5B73; }
/* services */
.ab2-svc { list-style: none; margin: calc(18px * var(--ui)) 0 0; padding: 0; display: grid; gap: calc(14px * var(--ui)); grid-template-columns: 1fr; }
@media (min-width: 640px) { .ab2-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ab2-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18px * var(--ui)); } }
.ab2-svc li { padding: calc(22px * var(--ui)); border-radius: calc(16px * var(--ui)); background: #fff; box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 0 10px 28px -12px rgba(14, 34, 64, .2); transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) { .ab2-svc li:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(14, 34, 64, .08), 0 18px 40px -12px rgba(14, 34, 64, .28); } }
.ab2-svc .ab2-i { width: calc(46px * var(--ui)); height: calc(46px * var(--ui)); padding: calc(10px * var(--ui)); box-sizing: border-box; border-radius: calc(12px * var(--ui)); background: #EEF3F9; }
.ab2-svc h3 { margin: calc(14px * var(--ui)) 0 0; font-family: var(--f-brand); font-size: calc(19px * var(--ui)); line-height: 1.25; color: #0E2240; }
.ab2-svc p { margin: calc(6px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; color: #4A5B73; }
/* rentals: a blue panel, the intro on the left, three points on the right */
.ab2-rent { display: grid; gap: calc(24px * var(--ui)); padding: calc(28px * var(--ui)) calc(24px * var(--ui)); border-radius: calc(20px * var(--ui)); background: linear-gradient(160deg, #0D53A1 0%, #083A73 100%); color: #fff; }
@media (min-width: 900px) { .ab2-rent { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: calc(48px * var(--ui)); padding: calc(40px * var(--ui)); } }
.ab2-rent .kicker { color: #CFE0F5; }
.ab2-rent .pg-h2 { color: #fff; }
.ab2-rent__head > p:not(.kicker) { margin: calc(10px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(17px * var(--ui))); line-height: 1.55; color: #E3EEFA; }
.ab2-rent .ct-btn--pri { background: #fff !important; color: #0D53A1 !important; border-color: #fff !important; }
.ab2-rent__list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(18px * var(--ui)); }
.ab2-rent__list li { display: flex; gap: calc(14px * var(--ui)); align-items: flex-start; padding-bottom: calc(18px * var(--ui)); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.ab2-rent__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.ab2-rent__list .ab2-i { width: calc(44px * var(--ui)); height: calc(44px * var(--ui)); padding: calc(10px * var(--ui)); box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .12); stroke: #fff; }
.ab2-rent__list h3 { margin: 0; font-family: var(--f-brand); font-size: calc(19px * var(--ui)); color: #fff; }
.ab2-rent__list p { margin: calc(4px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; color: #D6E4F5; }
/* the office: photo + card */
.ab2-office { margin-top: calc(18px * var(--ui)); display: grid; gap: calc(18px * var(--ui)); }
@media (min-width: 900px) { .ab2-office { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; gap: calc(24px * var(--ui)); } }
.ab2-office__ph { margin: 0; min-height: calc(260px * var(--ui)); border-radius: calc(18px * var(--ui)); overflow: hidden; }
.ab2-office__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab2-office__card { padding: calc(24px * var(--ui)); border-radius: calc(18px * var(--ui)); background: #fff; box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 0 14px 36px -12px rgba(14, 34, 64, .2); }
.ab2-office__intro { margin: 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; color: #4A5B73; }
.ab2-rows { list-style: none; margin: calc(18px * var(--ui)) 0 0; padding: 0; display: grid; gap: calc(14px * var(--ui)); }
.ab2-rows li { display: flex; gap: calc(12px * var(--ui)); align-items: flex-start; padding-top: calc(14px * var(--ui)); border-top: 1px solid #E8EEF5; }
.ab2-rows .ab2-i { margin-top: 2px; }
.ab2-rows__k { display: block; font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #6B7A90; margin-bottom: 2px; }
.ab2-rows address { font-style: normal; line-height: 1.5; }
.ab2-office__card .pg-actions { margin-top: calc(18px * var(--ui)); }
@media (prefers-reduced-motion: reduce) { .ab2-svc li { transition: none; } }
.ab2 .pg-h2 { font-family: var(--f-brand); font-size: clamp(calc(24px * var(--ui)), calc(2.6vw * var(--ui)), calc(32px * var(--ui))); line-height: 1.15; margin-top: 0; }
.ab2 .pg-sec { margin-top: calc(72px * var(--ui) * var(--sp)); }
.ab2 .kicker { font-size: max(12px, calc(12px * var(--ui))); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-blue, #0D53A1); }