/* J6 design consistency sheet v3. Pixel, desk 10, 29-10-2026. For the build after N45 (hub template N46 included).
   Colours, sizes, spacing and radii are the tokens of assets/css/tokens.css (N44i). No hex and no important flags.
   Load after n43.css and sidebars.css, so equal-specificity rules here win by source order.
   Version 2, 29-10-2026: section 5 revised (decision JV2(b)), section 9 added.
   Version 3, 29-10-2026: sections 11 (profile contact block, KO3), 12 (Directory menu on a dark block, variants A to D),
   13 (title shadow, variants 1 and 2) and 14 (home Latest pages) added. Section 16 of the sheet lists the open points and has no CSS.
   Sections 0 to 14 are independent, except that 4, 5, 6, 7, 9, 11, 12 and 14 read the page accent family declared in section 0. */

/* ===== 0. The page accent family =====
   gpcf_body_accent_attr() already sets --acc and --acc-tint on <body> for a rubrique page (and on a
   tile or card that carries its own rubrique). These three are derived from --acc, so they exist only
   where --acc exists; everywhere else var(--acc-deep, ...) falls back to the dark teal chrome.
   --acc-deep : accent 78 %, chrome ink 22 %. White text on it measures 5.3:1 or more for all twelve accents.
   --acc-wash : accent 7 % in white, for zebra rows and chip fills.
   --acc-line : accent 24 % in the hairline colour, for accented dividers. */
@supports (background:color-mix(in srgb,red 50%,blue)){
  body,
  [style*="--acc:"]{
    --acc-deep:color-mix(in srgb,var(--acc) 78%,var(--os-heading));
    --acc-wash:color-mix(in srgb,var(--acc) 7%,var(--os-card));
    --acc-line:color-mix(in srgb,var(--acc) 24%,var(--os-line));
  }
}

/* ===== 1. Spacing scale =====
   Rule: a block that follows a text block starts 24 px below it (--space-10); a title is 8 px above its
   lead (eyebrow) or 10 px (title to lead); cards and tiles sit 18 px apart (--card-gap); sibling sections
   of one page body are 34 px apart (--section-gap); a full-width band has 66 px of padding above and below
   (--space-16), 44 px on a phone (--space-15). Inside running text the ruled 8 / 16 / 26 / 30 of style.css stay. */

/* 1a. The region chips of the Restaurants and Real estate hubs were glued to the text above them. */
.gpcf-chips{ margin:var(--space-10) 0; }

/* 1b. A section has padding above and below, so no section ends against the next, and a title
   never sits on its grid (the Festivals and events block had none of either). */
.sect{ padding:var(--space-16) 0; }
.sect.intro{ padding-top:var(--space-14); padding-bottom:var(--space-14); }

/* 1c. The heading block: eyebrow 8, title to lead 10, heading block to content 24. */
.eyebrow{ margin:0 0 var(--space-3); }
.sect .lead{ margin:var(--space-4) 0 0; }
.sect .cats,
.sect .spots,
.sect .split,
.sect .pcards,
.hubsec .pcards,
.home-fetes .cards,
.hub-articles .cards{ margin-top:var(--space-10); }
.home-fetes .more,
.home-new .more,
.hubsec .more{ margin:var(--space-10) 0 0; }

@media (max-width:768px){
  .sect{ padding:var(--space-15) 0; }
  .sect.intro{ padding-top:var(--space-10); padding-bottom:var(--space-10); }
}

/* ===== 2. Headings and type classes =====
   Six heading styles, chosen by role, not by tag number: the tag keeps the outline of the page, the class
   sets the look. Class names only; no existing selector is changed except the hub title at the end.
   Faces: Montserrat 800 for every display style, PT Sans 400 and 700 for everything else. */
.ty-h1,
.ty-h1--hero,
.ty-h1--profile,
.ty-h2,
.ty-h3,
.ty-h4,
.ty-h5{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  color:var(--os-heading);
}
.ty-h1{ font-size:var(--size-page-h1); line-height:var(--lh-page-h1); letter-spacing:var(--ls-page-h1); }
.ty-h1--hero{ font-size:var(--size-hero-h1); line-height:var(--lh-hero-h1); letter-spacing:var(--ls-hero-h1); }
.ty-h1--profile{ font-size:var(--size-profile-h1); line-height:var(--lh-profile-h1); letter-spacing:var(--ls-profile-h1); }
.ty-h2{ font-size:var(--size-section-h2); line-height:var(--lh-h2); }
.ty-h3{ font-size:var(--size-h2); line-height:var(--lh-h2); }
.ty-h4{ font-size:var(--size-h3); line-height:var(--lh-h3); color:var(--os-heading-2); }
.ty-h5{ font-size:var(--size-card-title); line-height:var(--lh-card-title); }
.ty-h6{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--acc-deep,var(--os-link));
}
.ty-label{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--os-muted);
}
.ty-standfirst{ font-size:var(--size-standfirst); line-height:var(--lh-standfirst); color:var(--os-text); }
.ty-lead{ font-size:var(--size-lead); line-height:1.5; color:var(--os-muted); }
.ty-body{ font-size:var(--size-body); line-height:var(--lh-body); color:var(--os-text); }
.ty-small{ font-size:var(--size-small); line-height:var(--lh-body); color:var(--os-muted); }
.ty-caption{ font-size:var(--size-caption); line-height:1.4; color:var(--os-muted); }
.on-dark .ty-h1,
.on-dark .ty-h1--hero,
.on-dark .ty-h1--profile,
.on-dark .ty-h2,
.on-dark .ty-h3,
.on-dark .ty-h5{ color:var(--on-dark); }
.on-dark .ty-h6{ color:var(--on-dark-hero-sub); }
.on-dark .ty-lead,
.on-dark .ty-small{ color:var(--on-dark-muted); }

/* Hub section titles take the H2 size, as the home sections do (they were 28 px). */
.hubsec h2{ font-size:var(--size-section-h2); }

@media (max-width:768px){
  .ty-h1{ font-size:var(--m-size-page-h1); }
  .ty-h1--hero{ font-size:var(--m-size-hero-h1); letter-spacing:var(--m-ls-hero-h1); }
  .ty-h1--profile{ font-size:var(--m-size-profile-h1); }
  .ty-h2,
  .ty-h3,
  .hubsec h2{ font-size:var(--m-size-h2); }
  .ty-h4{ font-size:var(--m-size-h3); }
}

/* ===== 3. Home bands =====
   Full-width bands, one surface per section, all from the chrome palette. The modifier goes on the
   <section class="sect ...">; the four edits in front-page.php, gpcf_spotlight() and gpcf_home_fetes_html()
   are listed in the sheet. Spacing of a band is section 1 (66 px above and below). */
.sect--plain{ background:var(--os-bg); }
.sect--tint{ background:var(--os-tint); }
.sect--tint .lead{ color:var(--os-text); }
/* Muted grey is 4.4:1 on the tint, so a lead on the tint takes the body ink. */
/* The Festivals and events band is the sea teal (--accent-sante), flat: white title and link on it are 4.67:1,
   the cards stay white. It replaces the cream band (--os-tint-warm), which is no longer used. */
.sect--teal{ background:var(--accent-sante); color:var(--on-dark); }
.sect--teal h2{ color:var(--on-dark); }
.sect.sect--teal .more a,
.sect.sect--teal .more a:visited,
.sect.sect--teal .more a:hover{ color:var(--on-dark); }
.sect.sect--teal .more a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.sect.sect--teal .more a:focus-visible{ outline:3px solid var(--on-dark); outline-offset:3px; }
/* The dark band is the flat dark teal, not the gradient: white text keeps 7.3:1 everywhere on it
   (the cyan end of the gradient gives 3.7:1). */
.sect--dark{
  background:var(--os-dark-teal);
  border-radius:var(--radius-band);
  color:var(--on-dark);
}
.sect--dark .eyebrow{ color:var(--on-dark-hero-sub); }
.sect--dark h2{ color:var(--on-dark); }
.sect--dark .lead{ color:var(--on-dark-muted); }
.sect--dark .more a,
.sect--dark .more a:hover{ color:var(--on-dark); }
.sect--dark .sigad-mark{ color:var(--on-dark-muted); }

/* ===== 4. The page accent: switcher, chips, header button, bands =====
   Rule: accent text and fills go through --acc-deep only (never the raw accent under 18 px bold, ruling DY4);
   a page with no rubrique has no --acc-deep and every rule falls back to the dark teal chrome it has today.
   The golden orange stays the ONE conversion button of a view (contact, quote, rates). */
.lang a[aria-current]{
  background:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
}
.gpcf-chip{ color:var(--acc-deep,var(--os-link)); }
.gpcf-chip:hover{ border-color:var(--acc,var(--os-accent)); }
.gpcf-chip:focus-visible{ outline-color:var(--acc-deep,var(--os-accent)); }
.gpcf-chip[aria-pressed="true"]{
  background:var(--acc-deep,var(--os-link));
  border-color:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
}
.eyebrow{ color:var(--acc-deep,var(--os-link)); }
.sect--dark .eyebrow{ color:var(--on-dark-hero-sub); }

/* Rubrique chip on cards: the markup passes the accent as variables (style="--acc:...;--acc-tint:..."),
   no inline colour, so this rule sets the colour. */
.chip[style*="--acc"],
.spot[style] .chip{
  color:var(--acc-deep,var(--os-link));
  background:var(--acc-wash,var(--os-tint));
}

/* Header button, secondary: a white pill with the deep accent as its text and icon. It sits on the dark
   veil of every page header; the golden .cta of the same header stays the view's one conversion. */
.pagehead .cta--accent{
  background:var(--on-dark);
  color:var(--acc-deep,var(--os-link));
}
.pagehead .cta--accent:hover{
  background:var(--os-tint);
  color:var(--acc-deep,var(--os-link-hover));
}
.pagehead .cta--accent:focus-visible{ outline:3px solid var(--on-dark); outline-offset:3px; }

/* Bands: the deep accent on a rubrique page, the teal gradient everywhere else. */
.ratesband,
.ratesband-sect .ratesband{ background:var(--acc-deep,var(--os-band)); }
.band--accent{
  background:var(--acc-deep,var(--os-band));
  color:var(--on-dark);
  border-radius:var(--radius-card);
  padding:var(--space-10) var(--space-14);
}

/* ===== 5. Tabs and tables, one style for the whole site =====
   Tables: the header row is the deep accent, rows are tinted by the accent, corners are 14 px. On a phone
   a wide table scrolls inside itself with its first column kept in view and a fade on the right edge
   (rule N37b B6); only a two-column key and value table stacks (decision JV2(b)). */
:is(.entry-content,.abody,.desc) table{
  width:100%;
  margin:var(--space-10) 0;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  background:var(--os-card);
  font-size:var(--size-body-sm);
  line-height:1.45;
}
:is(.entry-content,.abody,.desc) table caption{
  caption-side:top;
  padding:0 0 var(--space-3);
  text-align:left;
  font-weight:var(--weight-bold);
  color:var(--os-heading);
}
:is(.entry-content,.abody,.desc) table :is(th,td){
  padding:var(--space-5) var(--space-7);
  border:0;
  border-top:1px solid var(--os-line);
  text-align:left;
  vertical-align:top;
  overflow-wrap:break-word;
  background:var(--os-card);
}
:is(.entry-content,.abody,.desc) table :is(thead th,thead td,.table-head > *){
  border-top:0;
  background:var(--acc-deep,var(--os-link));
  color:var(--on-dark);
  font-size:var(--size-small);
  font-weight:var(--weight-bold);
}
:is(.entry-content,.abody,.desc) table thead tr:first-child > :first-child{ border-top-left-radius:calc(var(--radius-card) - 1px); }
:is(.entry-content,.abody,.desc) table thead tr:first-child > :last-child{ border-top-right-radius:calc(var(--radius-card) - 1px); }
:is(.entry-content,.abody,.desc) table tbody tr:last-child > :first-child{ border-bottom-left-radius:calc(var(--radius-card) - 1px); }
:is(.entry-content,.abody,.desc) table tbody tr:last-child > :last-child{ border-bottom-right-radius:calc(var(--radius-card) - 1px); }
:is(.entry-content,.abody,.desc) table tbody tr:nth-child(even) > *{ background:var(--acc-wash,var(--os-tint)); }
:is(.entry-content,.abody,.desc) table tbody th{
  color:var(--os-heading);
  font-weight:var(--weight-bold);
}
/* Phone (decision JV2(b), Brain 29-10-2026; rule B6 stands). Three kinds of table:
   - two columns, key and value: stacked, each row a small card, the key above its value;
   - three columns: they fit a phone, so they keep the table layout and the full width;
   - four columns or more: they scroll sideways inside themselves (B6), the first column stays in view
     and the right edge fades while there is more to see (the hint). */
@property --gpcf-fade-r{ syntax:"<length>"; inherits:false; initial-value:0px; }
@media (max-width:768px){
  :is(.entry-content,.abody,.desc) table:not(:has(tr > :nth-child(4))){ display:table; }
  :is(.entry-content,.abody,.desc) table :is(th,td):first-child{
    position:sticky;
    left:0;
    z-index:1;
    box-shadow:1px 0 0 var(--os-line);
  }
  :is(.entry-content,.abody,.desc) table thead th:first-child{ z-index:2; }

  /* The hint: a 24 px fade on the right edge of a scrolling table. Browsers with scroll-driven animation
     show it only while the table can still scroll to the right; the others keep it on, with room left
     in the last column so that no text sits under it. */
  :is(.entry-content,.abody,.desc) table:has(tr > :nth-child(4)){
    -webkit-mask-image:linear-gradient(to right,var(--os-ink-black) calc(100% - var(--gpcf-fade-r)),transparent);
    mask-image:linear-gradient(to right,var(--os-ink-black) calc(100% - var(--gpcf-fade-r)),transparent);
  }
  @supports (animation-timeline:scroll()){
    :is(.entry-content,.abody,.desc) table:has(tr > :nth-child(4)){
      animation:gpcf-scroll-hint linear both;
      animation-timeline:scroll(self inline);
    }
  }
  @supports not (animation-timeline:scroll()){
    :is(.entry-content,.abody,.desc) table:has(tr > :nth-child(4)){ --gpcf-fade-r:var(--space-10); }
    :is(.entry-content,.abody,.desc) table:has(tr > :nth-child(4)) tr > :last-child{ padding-right:var(--space-10); }
  }

  /* Two columns: stacked. The header row, if any, stays for screen readers only. */
  :is(.entry-content,.abody,.desc) table:not(:has(tr > :nth-child(3))){
    display:block;
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
  }
  :is(.entry-content,.abody,.desc) table:not(:has(tr > :nth-child(3))) thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
  }
  :is(.entry-content,.abody,.desc) table:not(:has(tr > :nth-child(3))) :is(caption,tbody,tr,th,td){ display:block; }
  :is(.entry-content,.abody,.desc) table:not(:has(tr > :nth-child(3))) tbody tr{
    margin-top:var(--space-5);
    border:1px solid var(--os-line);
    border-radius:var(--radius-card);
    overflow:hidden;
    background:var(--os-card);
  }
  :is(.entry-content,.abody,.desc) table:not(:has(tr > :nth-child(3))) tbody tr:first-child{ margin-top:0; }
  :is(.entry-content,.abody,.desc) table:not(:has(tr > :nth-child(3))) tbody tr > :is(th,td):is(:first-child,:last-child){
    position:static;
    border-radius:0;
    box-shadow:none;
  }
  :is(.entry-content,.abody,.desc) table:not(:has(tr > :nth-child(3))) tbody tr > :is(th,td):first-child{
    border-top:0;
    background:var(--acc-wash,var(--os-tint));
    color:var(--acc-deep,var(--os-link));
    font-size:var(--size-small);
    font-weight:var(--weight-bold);
  }
  :is(.entry-content,.abody,.desc) table:not(:has(tr > :nth-child(3))) tbody tr > :is(th,td):last-child{ background:var(--os-card); }
}
@keyframes gpcf-scroll-hint{
  0%,96%{ --gpcf-fade-r:var(--space-10); }
  100%{ --gpcf-fade-r:0px; }
}

/* Tabs: our own component, and the WPBakery tab block mapped onto it. Active tab: deep accent text and a
   3 px underline; the golden underline of the old rule is retired. Tabs scroll sideways, never wrap. */
.tabs [role="tablist"],
:is(.entry-content,.abody,.desc) .vc_tta.vc_tta-tabs .vc_tta-tabs-list{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--space-1);
  margin:0;
  padding:0;
  list-style:none;
  border-bottom:1px solid var(--os-line);
  overflow-x:auto;
}
.tabs [role="tab"],
:is(.entry-content,.abody,.desc) .vc_tta.vc_tta-tabs .vc_tta-tab > a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap-comfortable);
  margin:0 0 -1px;
  padding:0 var(--space-9);
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  line-height:1.2;
  color:var(--os-muted);
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.tabs [role="tab"]:hover,
:is(.entry-content,.abody,.desc) .vc_tta.vc_tta-tabs .vc_tta-tab:hover > a{
  background:none;
  color:var(--os-link-hover);
}
.tabs [role="tab"]:focus-visible,
:is(.entry-content,.abody,.desc) .vc_tta.vc_tta-tabs .vc_tta-tab > a:focus-visible{
  outline:3px solid var(--os-accent);
  outline-offset:-3px;
}
.tabs [role="tab"][aria-selected="true"],
:is(.entry-content,.abody,.desc) .vc_tta.vc_tta-tabs .vc_tta-tab.vc_active > a{
  background:none;
  color:var(--acc-deep,var(--os-link));
  border-bottom-color:var(--acc-deep,var(--os-link));
}
.tabs [role="tabpanel"],
:is(.entry-content,.abody,.desc) .vc_tta.vc_tta-tabs .vc_tta-panel-body{
  padding:var(--space-10) 0 0;
  border:0;
  background:none;
}

/* ===== 6. Footer visitor card, rounded corners, category header photos ===== */

/* 6a. The footer visitor card is one quiet line: a dot, the figure and its label, no box, no caption row.
   Selectors are the class names of the plugin snippet used in n42.css; check them against the live markup. */
.gpcf-vcards-foot{ margin-top:var(--space-7); }
.gpcf-vcards-foot .gpcf-vcard .fm-online-widget{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2) var(--space-3);
  width:auto;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-size:var(--size-chrome);
  color:var(--on-dark-muted);
}
.gpcf-vcards-foot .fm-online-widget .fm-ow-top{ display:inline-flex; align-items:center; margin:0; padding:0; }
.gpcf-vcards-foot .fm-online-widget .fm-ow-top span,
.gpcf-vcards-foot .fm-online-widget .fm-ow-foot{ display:none; }
.gpcf-vcards-foot .fm-online-widget .fm-ow-main{ display:inline-flex; align-items:baseline; gap:var(--space-2); margin:0; padding:0; }
.gpcf-vcards-foot .fm-online-widget .fm-ow-num{
  font-size:var(--size-chrome);
  color:var(--on-dark);
}
.gpcf-vcards-foot .fm-online-widget .fm-ow-lbl{
  font-size:var(--size-chrome);
  color:var(--on-dark-muted);
}

/* 6b. Rounded banner corners everywhere: 14 px, on the image itself. Photos in running text take the
   same radius (they were 12 px); a WPBakery circle frame keeps its circle. */
.sigad.widget_media_image img,
.slot img,
.band--banner img,
.abody img,
.desc img,
.entry-content img{ border-radius:var(--radius-card); }
.abody .vc_box_circle img,
.desc .vc_box_circle img,
.entry-content .vc_box_circle img{ border-radius:50%; }

/* 6c. Category header photo: the photo is the featured image of the hub page and fills .pagehead-photo
   (page-header.css). Nothing to add in CSS; a rubrique with no photo yet gets the flat accent header
   (.pagehead-hub.pagehead-flat), which already reads --acc. */

/* ===== 7. Logos =====
   Our logo: the top bar of every page, unchanged (262 px wide, 162 px on a phone, header-footer.css).
   The client's logo goes in the header of the client's own pages, on a white card so that any logo, light
   or dark, stays readable: in the hero card of a profile page (.phero), at the right of the title block;
   in the page header of an article or page (.pagehead), top right on a desktop, above the breadcrumb below
   1025 px. No logo supplied: print nothing (no box, no initials, never our own logo). */
.clogo{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  max-width:220px;
  height:80px;
  padding:var(--space-5) var(--space-7);
  background:var(--os-card);
  border-radius:var(--radius-card);
}
.clogo img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:56px;
  object-fit:contain;
  border-radius:0;
}
.phero .meta .clogo{
  flex:0 0 auto;
  align-self:flex-start;
  border:1px solid var(--os-line);
}
.pagehead .clogo{
  position:relative;
  z-index:2;
  margin:0 0 var(--space-7);
  box-shadow:var(--shadow-floating);
}
@media (min-width:1025px){
  .pagehead .clogo{
    position:absolute;
    top:var(--space-14);
    right:var(--page-gutter);
    margin:0;
  }
}
@media (max-width:768px){
  .clogo{ height:64px; max-width:180px; padding:var(--space-4) var(--space-5); }
  .clogo img{ max-height:44px; }
  .phero .meta .clogo{ order:-1; align-self:flex-start; }
}

/* ===== 8. Real estate hub and property pages (ruling KP2, template change N46) =====
   The hub is two blocks, For rent and For sale. In each block, four parts in this order:
   Our clients (paying), the Banyan Living private deal, Gregory's pages, the other listings.
   The hub page carries the Immobilier accent through the body (--acc). */
.rehub-block{ margin-top:var(--space-16); }
.rehub-block:first-of-type{ margin-top:var(--section-gap); }
.rehub-block__head{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  padding-bottom:var(--space-5);
  border-bottom:3px solid var(--acc-deep,var(--os-link));
}
.rehub-block__head h2{ margin:0; }
.rehub-block__count{
  margin-left:auto;
  font-size:var(--size-small);
  color:var(--os-muted);
}
.rehub-sub{ margin-top:var(--section-gap); }
.rehub-sub__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  color:var(--os-heading-2);
}
.rehub-sub__lead{ margin:var(--space-2) 0 0; font-size:var(--size-small); color:var(--os-muted); }
.rehub-sub .pcards{ margin-top:var(--space-7); }

/* Our clients: the same card, with a deep accent edge. */
.pcard--client{ border-top:4px solid var(--acc-deep,var(--os-link)); }

/* The Banyan Living private deal: one band across the block, text left, golden button right. */
.rehub-deal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-10);
  margin-top:var(--section-gap);
  padding:var(--space-10) var(--space-14);
  background:var(--acc-deep,var(--os-band));
  border-radius:var(--radius-card);
  color:var(--on-dark);
}
.rehub-deal h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h2);
  line-height:var(--lh-h2);
  color:var(--on-dark);
}
.rehub-deal p{ margin:var(--space-3) 0 0; max-width:56ch; color:var(--on-dark-hero-sub); }
.rehub-deal .btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  box-sizing:border-box;
  background:var(--os-cta);
  color:var(--os-cta-ink);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-button);
  line-height:1.2;
  padding:var(--space-5) var(--space-12);
  border-radius:var(--radius-sm);
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--duration-base) var(--ease);
}
.rehub-deal .btn:hover{ background:var(--os-cta-hover); }
.rehub-deal .btn svg{ stroke:currentColor; display:block; }
.rehub-deal .btn:focus-visible{ outline:3px solid var(--on-dark); outline-offset:3px; }

/* The property card: a .pcard with a facts line and a price line. */
.pcard--prop .facts{ margin:0; font-size:var(--size-small); line-height:1.4; color:var(--os-muted); }
.pcard--prop .price{
  margin:var(--space-2) 0 0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
.pcard--prop .price small{ font-family:var(--font-body); font-weight:var(--weight-regular); font-size:var(--size-small); color:var(--os-muted); }

/* The other listings: rows, not photo cards, so they rank below the three parts above. */
.prows{ display:grid; gap:var(--space-3); margin-top:var(--space-7); }
.prow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-7);
  padding:var(--space-5) var(--space-7);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  color:inherit;
  text-decoration:none;
}
.prow:hover{ border-color:var(--acc,var(--os-accent)); }
.prow b{ display:block; color:var(--os-heading); }
.prow span{ font-size:var(--size-small); color:var(--os-muted); }
.prow .price{ font-family:var(--font-display); font-weight:var(--weight-display); color:var(--os-heading); white-space:nowrap; }

/* Property page: facts strip under the header, gallery, at-a-glance table (section 5), description. */
.pfacts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin:var(--space-10) 0 0;
  padding:0;
  list-style:none;
}
.pfacts li{
  padding:var(--space-3) var(--space-7);
  background:var(--acc-wash,var(--os-tint));
  border:1px solid var(--acc-line,var(--os-line));
  border-radius:var(--radius-pill);
  font-size:var(--size-small);
  font-weight:var(--weight-bold);
  color:var(--os-heading);
}
.pgal{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  margin:var(--space-10) 0 0;
  aspect-ratio:16 / 7;
}
.pgal img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--radius-card); }
.pgal img:first-child{ grid-row:1 / 3; }
.pdesc h3{ margin:var(--space-11) 0 0; font-size:var(--size-h3); line-height:var(--lh-h3); color:var(--os-heading-2); }
.pdesc h3 + p{ margin-top:var(--space-3); }

@media (max-width:768px){
  .rehub-block{ margin-top:var(--space-15); }
  .rehub-deal{ flex-direction:column; align-items:flex-start; padding:var(--space-10) var(--space-9); }
  .pgal{ grid-template-columns:1fr 1fr; grid-template-rows:auto; aspect-ratio:auto; }
  .pgal img{ aspect-ratio:4 / 3; }
  .pgal img:first-child{ grid-column:1 / 3; grid-row:auto; aspect-ratio:16 / 10; }
}

/* ===== 9. Content pages: the guides of the content repository (history, health, culture, regions, practical) =====
   Marker: the class "guide" on the content container (article.abody on a post, div.entry-content on a page).
   A draft preview also carries the class gpcf-draft on <body>; a published page never does.
   The header (photo band, veil of the accent, breadcrumb, rubrique chip, H1) is the existing .pagehead of
   section 6; nothing is added to it here. Colours come from section 0 and fall back to the teal chrome. */

/* 9a. One reading scale for a post and a page: the article scale (20 px, 1.7; 16.5 px on a phone). */
.entry-content.guide{
  font-size:var(--size-article-body);
  line-height:var(--lh-article-body);
}
.guide p{ margin:var(--space-7) 0 0; }
.guide :is(h2,h3) + :is(p,ul,ol){ margin-top:var(--space-3); }

/* 9b. The intro: the first paragraph, one step larger, with a short bar in the page accent under it. */
.guide > .intro,
.guide > p:first-child{
  margin:0;
  font-size:calc(var(--size-article-body) * 1.15);
  line-height:1.5;
  color:var(--os-heading-2);
}
.guide > .intro::after,
.guide > p:first-child::after{
  content:"";
  display:block;
  width:56px;
  height:4px;
  margin-top:var(--space-10);
  border-radius:var(--radius-pill);
  background:var(--acc,var(--os-highlight));
}

/* 9c. Headings: H2 for a section (34 px above, the section gap), H3 for a part of it (24 px above),
   8 px to the text under them (ruling BG). Only H2 and H3 in the body: the H1 is in the header. */
.guide h2{ margin:var(--space-13) 0 0; }
.guide h3{ margin:var(--space-10) 0 0; }
.guide > :is(h2,h3):first-child{ margin-top:0; }

/* 9d. Photos: at most one per H2, directly under it, full column width, 16:9, 14 px corners, then a caption. */
.guide figure{ margin:var(--space-10) 0 0; }
.guide h2 + figure{ margin-top:var(--space-5); }
.guide figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  margin:0;
  object-fit:cover;
  border-radius:var(--radius-card);
}
.guide figcaption{
  margin-top:var(--space-3);
  padding-left:var(--space-5);
  border-left:3px solid var(--acc-deep,var(--os-link));
  font-size:var(--size-caption);
  line-height:1.4;
  color:var(--os-muted);
}
.guide figure + :is(p,ul,ol,table,.callout){ margin-top:var(--space-10); }

/* 9e. Data tables (holidays, fees, numbers) are the tables of section 5. One line under a table says what
   it is as of. */
.guide .tnote{
  margin:var(--space-3) 0 0;
  font-size:var(--size-small);
  line-height:1.4;
  color:var(--os-muted);
}

/* 9f. The highlighted box, as ruled by Fabrice: a soft wash, no border, a round icon in a left column.
   .callout informs (page accent, an "i"); .callout--warn warns, always in the same red-brown whatever the rubrique
   (a "!"). The icon is drawn by ::before, so the markup stays aside.callout > p.callout-t + text. At most one warning
   box per H2. White on the icon: 5.3:1 or more (deep accent), 7:1 (red-brown). */
.guide .callout{
  --ck:var(--acc-deep,var(--os-link));
  --ckw:var(--acc-wash,var(--os-tint));
  display:grid;
  grid-template-columns:var(--space-13) minmax(0,1fr);
  column-gap:var(--space-8);
  align-items:start;
  margin:var(--space-10) 0 0;
  padding:var(--space-9) var(--space-11) var(--space-10) var(--space-9);
  border:0;
  border-radius:var(--radius-card);
  background:var(--ckw);
  color:var(--os-text);
}
.guide .callout::before{
  content:"i";
  content:"i" / "";
  grid-column:1;
  grid-row:1 / span 8;
  display:grid;
  place-items:center;
  width:var(--space-13);
  height:var(--space-13);
  border-radius:var(--radius-pill);
  background:var(--ck);
  color:var(--on-dark);
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-lead);
  line-height:1;
}
.guide .callout > *{ grid-column:2; }
.guide .callout-t{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
.guide .callout :is(p,ul,ol){
  margin:var(--space-3) 0 0;
  padding-top:0;
  font-size:var(--size-lead);
  line-height:1.55;
  color:var(--os-text);
}
.guide .callout .callout-t + :is(p,ul,ol){ margin-top:var(--space-3); }
.guide .callout :is(ul,ol){ padding-left:var(--space-10); }
.guide .callout li{ margin-top:var(--space-2); }
.guide .callout--warn{
  --ck:var(--os-oxidized-iron);
  --ckw:var(--os-tint-warm);
}
@supports (background:color-mix(in srgb,red 50%,blue)){
  .guide .callout--warn{ --ckw:color-mix(in srgb,var(--os-oxidized-iron) 6%,var(--os-card)); }
}
.guide .callout--warn::before{
  content:"!";
  content:"!" / "";
}

body:has(.guide) :is(.post-navigation,.paging-navigation,.nav-links,.nav-previous,.nav-next){ display:none; }

@media (max-width:768px){
  .entry-content.guide{ font-size:var(--m-size-article-body); }
  .guide > .intro,
  .guide > p:first-child{ font-size:calc(var(--m-size-article-body) * 1.15); }
  .guide .callout{
    grid-template-columns:var(--space-11) minmax(0,1fr);
    column-gap:var(--space-6);
    padding:var(--space-7) var(--space-7) var(--space-8) var(--space-7);
  }
  .guide .callout::before{ width:var(--space-11); height:var(--space-11); }
  .guide .sources summary{ padding:0 var(--space-7); }
  .guide .sources ol{ padding-right:var(--space-7); padding-bottom:var(--space-7); }
}

/* ===== 11. Client profile page: the contact block (ruling KO3) =====
   Desktop: the sidebar contact card stays and the form becomes compact: name, email and phone on one row,
   the message, send, under one heading, "Contact". Phone: a full width "Contact" button at the top of the
   content opens an accordion holding the same card, then the form; closed, it takes the height of the button and
   nothing else. The Easy Contact Pro markup is not touched.
   Plugin limits, read on the live Chic Furniture form: Easy Contact Pro forces font, colour, width and float with
   its own important flags on .ecf-form, its header, its footer, .label and .ecfbutton, and the icon colour inside
   the field. So this block never sets those properties: the plugin header is hidden with display, the footer keeps
   its plugin width (capped to the column), the label keeps the plugin size, and the button text is styled on its
   .ladda-label. #contact is the scoping root, so every rule wins without a flag.
   Delete first, in shared-components.css (comment "TASK-N27 (DH2)"): the .form .ecfbutton rule and its :hover rule,
   which carry important flags and colour the button dark teal.
   The page accent: a client profile page needs --acc on its body (see the PHP list in section 11). Without it every
   var(--acc-deep, ...) falls back to today's teal. */

/* 11a. One heading, "Contact": the eyebrow and the plugin's own title are hidden, the h2 text becomes "Contact". */
.contact{ border-top-color:var(--acc-deep,var(--os-link)); }
.contact .hd .eyebrow{ display:none; }
.contact .hd h2{ margin:0; }
#contact .ecf-form > header{ display:none; }

/* 11b. The form, desktop: three fields on one row, then everything else at full width. */
#contact .ecf-form fieldset{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(max(200px,calc((100% - 2 * var(--space-7)) / 3)),1fr));
  gap:var(--space-7);
  margin:0;
  padding:0;
  border:0;
}
#contact .ecf-form fieldset > section{
  grid-column:1 / -1;
  order:2;
  margin:0;
  min-width:0;
}
#contact .ecf-form fieldset > section:is(:has(input[name^="name"]),:has(input[name^="email"]),:has(input[name^="phone"])){
  grid-column:auto;
  order:1;
}
#contact .ecf-form .input input,
#contact .ecf-form .textarea textarea{
  height:var(--tap-min);
}
#contact .ecf-form .textarea textarea{ height:auto; min-height:112px; }
#contact .ecf-form .input input:focus,
#contact .ecf-form .textarea textarea:focus{
  outline:2px solid var(--acc-deep,var(--os-link));
  outline-offset:1px;
}
#contact .ecf-form section.recaptcha_mode .input{ max-width:420px; }

/* 11c. Send: the one golden conversion button of the view. */
#contact .ecf-form footer{
  margin:var(--space-9) 0 0;
  padding:0;
  max-width:100%;
}
#contact .ecf-form .ecfbutton{
  float:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  height:var(--tap-comfortable);
  padding:0 var(--space-12);
  border:0;
  border-radius:var(--radius-sm);
  background-color:var(--os-cta);
  background-image:none;
  color:var(--os-cta-ink);
  cursor:pointer;
  transition:background-color var(--duration-base) var(--ease);
}
#contact .ecf-form .ecfbutton:hover{ background-color:var(--os-cta-hover); }
#contact .ecf-form .ecfbutton:focus-visible{ outline:3px solid var(--os-heading); outline-offset:3px; }
#contact .ecf-form .ecfbutton .ladda-label{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-button);
  line-height:1.2;
  color:var(--os-cta-ink);
}

/* 11d. The sidebar card and its rows take the page accent. Its button only scrolls to the form, so it is the deep
   accent and the golden orange stays with Send (one golden button per view). */
.ccard .chip{ color:var(--acc-deep,var(--os-link)); }
.ccrow{ border-color:var(--acc-deep,var(--os-dark-teal)); }
.ccrow.ccrow-static{ border-color:var(--os-line); }
.ccrow .ico{ background:var(--acc-wash,var(--os-tint)); color:var(--acc-deep,var(--os-dark-teal)); }
.ccrow .val{ color:var(--acc-deep,var(--os-dark-teal)); }
a.ccrow:hover{ background:var(--acc-wash,var(--os-tint)); }
.ccard .cta{ background:var(--acc-deep,var(--os-dark-teal)); color:var(--on-dark); }
.ccard .cta:hover{ background:var(--os-heading); }
.ccard .foot{ background:var(--acc-wash,color-mix(in srgb,var(--os-pearl-aqua) 18%,var(--os-card))); }
.ccard .frow .ico,
.ccard .frow a{ color:var(--acc-deep,var(--os-dark-teal)); }
.ccard .frow a:hover{ color:var(--os-heading); }

/* 11e. Phone: the accordion. The button is printed before the .contact section; the panel is the .contact section
   itself (heading hidden, card first, form under it). The card is printed twice by PHP (the sidebar one is hidden on
   a phone when the accordion exists), so the form is never duplicated. */
.contact-btn,
.ccard--m{ display:none; }

@media (max-width:768px){
  .contact-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-5);
    width:100%;
    min-height:var(--tap-comfortable);
    padding:0 var(--space-8);
    border:0;
    border-radius:var(--radius-sm);
    background:var(--os-cta);
    color:var(--os-cta-ink);
    font-family:var(--font-body);
    font-weight:var(--weight-bold);
    font-size:var(--size-button);
    text-align:left;
    cursor:pointer;
    transition:background var(--duration-base) var(--ease);
  }
  .contact-btn:hover{ background:var(--os-cta-hover); }
  .contact-btn:focus-visible{ outline:3px solid var(--os-heading); outline-offset:3px; }
  .contact-btn svg{ width:20px; height:20px; stroke:currentColor; display:block; transition:transform var(--duration-base) var(--ease); }
  .contact-btn[aria-expanded="true"]{ background:var(--acc-deep,var(--os-dark-teal)); color:var(--on-dark); }
  .contact-btn[aria-expanded="true"]:hover{ background:var(--os-heading); }
  .contact-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .contact-btn[aria-expanded="false"] + .contact{ display:none; }

  .contact .hd{ display:none; }
  .contact{ margin-top:calc(var(--space-5) * -1); }
  .contact .ccard--m{
    display:flex;
    margin:0;
    border:0;
    border-bottom:1px solid var(--os-line);
    border-radius:0;
    box-shadow:none;
  }
  body:has(.contact-btn) .rail .ccard:not(.ccard--m){ display:none; }

  #contact .ecf-form .input input{ font-size:var(--size-body); }
  #contact .ecf-form .ecfbutton{ display:flex; width:100%; }
}

/* ===== 12. The top bar and the Directory menu in one near-black =====
   Ruled by Fabrice (KO3, KZ2): the top bar and the Directory menu stand in the same near-black (191919). It is not
   in tokens.css yet: Brain adds --os-chrome-dark, value 191919, there. Until it exists, every rule below falls back
   to --os-ink-black, so nothing breaks. The wordmark on the bar is the white file
   (siam-info-guide_horizontal_dark.svg, printed by header.php in place of the _light one).
   The desktop panel under the top bar (.gpcf-launcher-panel) and the tile block of the phone menu
   (.gpcf-mobile-nav .cats) hold the twelve tiles; header.php prints the class dir-dark on both. Each tile already
   carries --acc and --acc-tint (gpcf_launcher_tile()).
   Selected state: the tile of the rubrique of the page you are on gets aria-current="page" (PHP, see the list). */

/* 12a. The top bar: near-black, white wordmark, white links (pearl aqua on hover and focus), the language switch
   and the search and menu buttons on the white-on-dark family already in the theme (.lang.ondark). White on the bar
   is 17.7:1. The golden underline of the current door stays. */
.topbar{
  background:var(--os-chrome-dark,var(--os-ink-black));
  border-bottom:1px solid var(--on-dark-border);
}
.topbar a.nav,
.topbar button.nav{ color:var(--on-dark); }
.topbar a.nav:hover,
.topbar button.nav:hover,
.topbar a.nav:focus-visible,
.topbar button.nav:focus-visible{ color:var(--os-pearl-aqua); }
.topbar .lang{ background:var(--on-dark-fill); }
.topbar .lang a{ color:var(--on-dark); }
.topbar .lang a[aria-current]{ background:var(--on-dark); color:var(--os-heading); }
.topbar .searchbtn,
.topbar .menu{ background:none; border-color:var(--on-dark-border); color:var(--on-dark); }

/* 12b. The block under the bar: the same near-black, so the bar and the panel read as one piece. */
.dir-dark{ --dir-bg:var(--os-chrome-dark,var(--os-ink-black)); }
.gpcf-launcher-panel.dir-dark{
  background:var(--dir-bg);
  border-bottom:0;
}
.gpcf-mobile-nav.dir-dark .cats{
  background:var(--dir-bg);
  padding:var(--space-7);
  border-radius:var(--radius-card);
}
.dir-dark .cat{
  position:relative;
  border-color:transparent;
  transition:background-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.dir-dark .cat:hover,
.dir-dark .cat:focus-visible{ transform:translateY(-2px); }
.dir-dark .cat:focus-visible{ outline:3px solid var(--on-dark); outline-offset:3px; }
.gpcf-launcher-panel.dir-dark .cats-more__rub{ color:var(--on-dark); border-left-color:var(--on-dark); }
.gpcf-launcher-panel.dir-dark .cats-more a{ color:var(--on-dark); text-decoration:underline; text-underline-offset:3px; }
.gpcf-launcher-panel.dir-dark .cats-more a:hover{ color:var(--on-dark); text-decoration-thickness:2px; }
.gpcf-launcher-panel.dir-dark .cats-more a:focus-visible{ outline:3px solid var(--on-dark); }

/* 12c. The tile (ruling KZ2). --tint is the light tint of the tile's rubrique: 14 % of the accent on white.
   At rest: the tint as the tile, the plain accent on the icon square, light icon lines, no frame.
   On hover, keyboard focus and tap, and for the page you are on: inverted. The tile takes the deep accent (the raw
   accent fails for a white label on two rubriques: Home and construction 3.85, Expat services 3.70), the icon square
   the tint, the icon lines the deep accent, the label white. The current page also carries a short white bar under
   its label. Keyboard focus adds a 3 px white ring (12a). */
.dir-dark .cat{ --tint:var(--acc-tint); }
@supports (background:color-mix(in srgb,red 50%,blue)){
  .dir-dark .cat{ --tint:color-mix(in srgb,var(--acc) 14%,var(--os-card)); }
}
.dir-dark .cat{ background:var(--tint); }
.dir-dark .cat b{ color:var(--os-heading); }
.dir-dark .cat .badge{ background:var(--acc); color:var(--on-dark); }
.dir-dark .cat .badge .ico{ color:var(--on-dark); }
.dir-dark .cat:hover,
.dir-dark .cat:focus-visible,
.dir-dark .cat:active,
.dir-dark .cat[aria-current="page"]{ background:var(--acc-deep,var(--acc)); }
.dir-dark .cat:hover b,
.dir-dark .cat:focus-visible b,
.dir-dark .cat:active b,
.dir-dark .cat:visited:hover b,
.dir-dark .cat[aria-current="page"] b{ color:var(--on-dark); }
.dir-dark .cat:hover .badge,
.dir-dark .cat:focus-visible .badge,
.dir-dark .cat:active .badge,
.dir-dark .cat[aria-current="page"] .badge{ background:var(--tint); color:var(--acc-deep,var(--acc)); }
.dir-dark .cat:hover .badge .ico,
.dir-dark .cat:focus-visible .badge .ico,
.dir-dark .cat:active .badge .ico,
.dir-dark .cat[aria-current="page"] .badge .ico{ color:var(--acc-deep,var(--acc)); }
.dir-dark .cat[aria-current="page"] b::after{
  content:"";
  display:block;
  width:var(--space-10);
  height:3px;
  margin:var(--space-2) auto 0;
  border-radius:var(--radius-pill);
  background:var(--on-dark);
}

@media (max-width:768px){
  .dir-dark .cat:hover,
  .dir-dark .cat:focus-visible{ transform:none; }
}

/* ===== 13. Page header: the title shadow =====
   Today the h1 of a photo header carries three stacked shadows: a teal glow (the chrome teal, not the page
   accent), a wide dark one and a hard one (page-header.css, .pagehead-photo h1). Ruled by Fabrice: one soft shadow
   in the colour of the header ground, no glow of another colour. White text on the veil is kept as it is (4.5:1 or
   more in the worst case, N28). Nick writes this rule in page-header.css in place of the three shadows.
   --veil-tone is the colour of the header ground (the accent mixed with the ink), declared on .pagehead-photo. */
.pagehead-photo h1{
  text-shadow:0 0 28px var(--veil-tone),0 0 56px var(--veil-tone),0 2px 3px var(--veil-tone);
}

/* ===== 14. Home: the "Latest pages" block =====
   A band under "Latest articles", on the mint ground, with the latest pages that are not client pages (the guides:
   useful numbers, vocabulary, driving licence). Same card (.card, chip, title, excerpt, date) as the articles and as
   Festivals and events; four across, two on a tablet, one on a phone. Section class: sect sect--tint home-pages, its own band after the dark Latest articles band (ruled by Fabrice). */
.home-pages .cards{ grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:var(--space-10); }
@media (max-width:1024px){
  .home-pages .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .home-pages .cards{ grid-template-columns:1fr; gap:var(--space-6); }
}