/* ==========================================================================
   MASSAGE DUBAI MARINA — pages beyond the landing page

   site.css is the original build and is treated as read-only design truth.
   Everything here is for surfaces the static build never had: archives,
   single treatment and therapist pages, the journal, and the shared sub-page
   furniture (compact hero, breadcrumbs, closing CTA band).

   It uses the same tokens, the same type scale and the same hairlines, so a
   new page is indistinguishable from a section of the home page.
   ========================================================================== */

/* ---------- 1. LINKS INSIDE EXISTING CARDS ---------------------------------
   A card heading that became a link must not look like a link — the card is
   already the affordance. Colour is inherited; only hover shifts. */
.trow .body h3 a,
.tcard h3 a,
.jcard h3 a{color:inherit;transition:color .25s var(--ease)}
.trow .body h3 a:hover,
.tcard h3 a:hover,
.jcard h3 a:hover,
.trow .body h3 a:focus-visible,
.tcard h3 a:focus-visible,
.jcard h3 a:focus-visible{color:var(--petrol);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.portrait a{position:absolute;inset:0;z-index:2}

/* Two actions where the design had one. */
.mdm-act{display:flex;flex-wrap:wrap;gap:10px}
@media(min-width:900px){.trow .act.mdm-act{flex-wrap:nowrap}}

.mdm-empty{font-size:15px;color:var(--ink-soft);padding:28px 0}

/* ---------- 1B. THERAPIST CARD ----------
   The original card was a bare column: photo, then text running straight onto
   the page background, with the three facts in a loose two-column list. It
   reads as a fragment rather than a card, and it is the one component that now
   has to carry two actions and a link through to a profile.

   So it becomes a surface — the same paper, hairline and lift the journal card
   already uses — with the portrait as its lid and the facts on ruled rows.
   Everything here overrides site.css, which stays untouched. */
/* Four columns was fine for a bare column of text. A card with padding,
   ruled rows and two buttons needs room, so the track gets wider and the grid
   settles at three across on a desktop. */
.tgrid{grid-template-columns:repeat(auto-fit,minmax(296px,1fr))}

body:not(.home) .tcard{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
body:not(.home) .tcard:hover{
  transform:translateY(-6px);
  border-color:var(--line);
  box-shadow:0 34px 64px -46px rgba(10,31,38,.55);
}

/* The portrait now fills the top of the card, so it loses its own radius and
   its bottom margin — the body below brings its own spacing. */
body:not(.home) .tcard .portrait{margin:0;border-radius:0}

/* Everything that is not the portrait sits inside the card's padding. */
body:not(.home) .tcard > :not(.portrait){padding-inline:clamp(18px,2vw,22px)}
body:not(.home) .tcard > h3{margin-top:20px;font-size:24px;line-height:1.15}
body:not(.home) .tcard .role{margin-top:7px}
body:not(.home) .tcard .bio{margin-top:12px;font-size:14px}

/* Facts on ruled rows: label left, value right, hairline between. */
body:not(.home) .tcard dl{
  grid-template-columns:minmax(74px,auto) 1fr;
  gap:0 16px;margin-top:18px;
  border-top:1px solid var(--line-soft);
}
body:not(.home) .tcard dt, body:not(.home) .tcard dd{padding-block:11px;border-bottom:1px solid var(--line-soft)}
body:not(.home) .tcard dt{align-self:start;padding-top:13px}
body:not(.home) .tcard dd{font-size:13.5px;line-height:1.45}
body:not(.home) .tcard dl > :nth-last-child(-n+2){border-bottom:0}

/* Two stacked, full-width actions pinned to the bottom of the card. */
body:not(.home) .tcard-foot{
  display:flex;flex-direction:column;gap:9px;
  margin-top:auto;padding-top:18px;padding-bottom:clamp(18px,2vw,22px);
}
body:not(.home) .tcard-foot .btn{margin-top:0;width:100%}

/* On a dark band the card keeps its own light surface. */
.areas .tcard,.cta-band .tcard{color:var(--ink)}

/* ---------- 2. PAGE HERO + BREADCRUMBS ---------- */
.page-hero{padding-block:clamp(40px,6vw,76px) clamp(28px,4vw,44px)}
.page-hero .eyebrow{margin-bottom:18px}
.page-title{
  font-size:clamp(38px,6vw,68px);line-height:1.04;max-width:18ch;
  letter-spacing:-.015em;
}
.page-hero .lede{margin-top:22px}

.crumbs{margin-bottom:26px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.crumbs li{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.crumbs li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--copper);opacity:.7}
.crumbs a{border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.crumbs a:hover{border-bottom-color:var(--line)}
.crumbs [aria-current]{color:var(--ink-strong)}

/* ---------- 2B. SECTION SURFACES + BUTTON ROW ----------
   The home page alternates ivory, paper, sand and petrol so no two adjacent
   bands read the same. Sub-pages need the same rhythm without inventing
   colours, so these are the two surfaces site.css already uses, named. */
.section--paper{background:var(--paper);border-block:1px solid var(--line-soft)}
.section--sand{background:var(--sand)}
.section--sand .lede,.section--sand .step p{color:var(--petrol)}

/* Default wrapper for a button row that has no layout class of its own. */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn-row:first-child{margin-top:0}
.cta-band .btn-row{justify-content:center}

/* ---------- 3. CLOSING CTA BAND ---------- */
.cta-band{background:var(--petrol);color:var(--ink-onDark);text-align:center}
.cta-band h2{color:var(--ivory);font-size:clamp(30px,4vw,46px)}
.cta-band p{
  margin:18px auto 0;max-width:56ch;color:var(--ink-onDark-soft);
  font-size:clamp(16px,1.5vw,18px);line-height:1.6;
}
.cta-band .btn{margin-top:30px}

/* ---------- 4. LONG-FORM CONTENT ----------
   site.css styles .prose p / strong / a only, because the static build never
   ran editor content through it. Articles need the rest of the elements. */
.prose h2{font-size:clamp(26px,3vw,36px);margin:44px 0 16px}
.prose h3{font-size:clamp(21px,2.2vw,26px);margin:34px 0 12px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{max-width:66ch;margin:0 0 18px;padding-inline-start:22px;color:var(--ink-soft);font-size:16px;line-height:1.8}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--copper)}
.prose blockquote{
  margin:28px 0;padding:22px 26px;border-inline-start:2px solid var(--copper);
  background:var(--paper);border-radius:var(--radius-sm);
}
.prose blockquote p{font-family:var(--mdm-font-display);font-size:20px;line-height:1.5;color:var(--ink-strong)}
.prose img{border-radius:var(--radius);margin:28px 0}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:40px 0}

/* ---------- 5. TWO-COLUMN DETAIL LAYOUT ----------
   Used by both single templates: story on the left, facts on the right. */
.detail-grid{display:grid;gap:clamp(32px,5vw,64px)}
@media(min-width:940px){.detail-grid{grid-template-columns:1fr 380px;align-items:start}}

.factbox{
  border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--paper);
  padding:clamp(22px,3vw,30px);position:sticky;top:96px;
}
.factbox h3{font-size:12px;font-family:var(--mdm-font-body);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.factbox dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:18px 0 0;font-size:14px}
.factbox dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.factbox dd{margin:0;color:var(--ink)}
.factbox .btn{width:100%;margin-top:24px}
@media(max-width:939px){.factbox{position:static}}

/* Price rows on a treatment page. */
.price-rows{margin-top:20px;border-top:1px solid var(--line-soft)}
.price-rows div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.price-rows span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.price-rows b{font-family:var(--mdm-font-display);font-size:21px;font-weight:400;color:var(--ink-strong)}

/* Ticked list of inclusions. */
.tick-list{display:grid;gap:12px;margin-top:22px}
.tick-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-soft);line-height:1.55}
.tick-list svg{flex:none;width:18px;height:18px;color:var(--copper);margin-top:2px}

/* ---------- 6. THERAPIST PROFILE ----------
   The portrait starts level with the name instead of below a full-width hero,
   so the top of the page is not half empty, and the facts live in the text
   column where they are read rather than under the photo where they were
   crowding the two buttons. */
.pro-hero{padding-block:clamp(28px,4vw,52px) clamp(40px,5vw,68px)}

/* Three blocks, two different orders.
   Desktop: the name and the body stack in the left column while the portrait
   spans both rows on the right, so it starts level with the name.
   Mobile: one column, and the name has to come before the photo — landing on
   a face with no name above it is disorienting. */
.pro-grid{display:grid;gap:clamp(28px,4vw,40px)}
@media(min-width:940px){
  .pro-grid{
    grid-template-columns:1fr 380px;
    column-gap:clamp(40px,5vw,64px);row-gap:0;
    align-items:start;
  }
  .pro-head { grid-column:1;grid-row:1 }
  .pro-body { grid-column:1;grid-row:2 }
  .pro-aside{ grid-column:2;grid-row:1 / span 2 }
}
@media(max-width:939px){
  .pro-head { order:1 }
  .pro-aside{ order:2 }
  .pro-body { order:3 }
}
.pro-hero .page-title{max-width:14ch}
.pro-hero .crumbs{margin-bottom:24px}
.pro-hero .eyebrow{margin-bottom:16px}
.pro-hero .lede{margin-top:14px;font-size:clamp(16px,1.4vw,18px)}
.pro-body .prose{margin-top:clamp(28px,3vw,38px)}
.pro-h2{margin-top:clamp(34px,4vw,46px);font-size:clamp(24px,3vw,32px)}

/* Facts as a ruled band under the name. */
.pro-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:20px 30px;margin:clamp(24px,3vw,32px) 0 0;padding-top:22px;
  border-top:1px solid var(--line-soft);
}
.pro-facts > div{display:flex;flex-direction:column;gap:5px}
.pro-facts dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.pro-facts dd{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}

/* The aside is now only the photo and the two things a visitor came to press. */
.pro-aside{
  border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--paper);
  overflow:hidden;position:sticky;top:88px;
}
.pro-aside-body{padding:clamp(18px,2vw,22px)}
.pro-aside .btn{width:100%}
.pro-aside .btn + .btn{margin-top:10px}
.pro-aside .pro-meta{margin:0 0 18px}
@media(max-width:939px){
  .pro-aside{position:static;max-width:460px}
}

.pro-portrait{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(150deg,var(--sand-soft),var(--sand) 60%,var(--copper));
}
.pro-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pro-portrait .mono{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mdm-font-display);font-size:96px;color:rgba(255,255,255,.55);
}
/* Same rating chip the therapist card uses, so the two read as one component. */
.pro-portrait .rating{
  position:absolute;z-index:3;bottom:12px;inset-inline-end:12px;
  background:rgba(10,31,38,.82);color:var(--ink-onDark);border-radius:999px;padding:6px 12px;
  font-size:11.5px;letter-spacing:.08em;display:flex;align-items:center;gap:6px;
}
.pro-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pro-meta span{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
}
.pro-meta a{color:inherit}

/* ---------- 6B. TREATMENTS ARCHIVE ---------- */
.svc-hero{padding-block:clamp(28px,4vw,52px) clamp(44px,6vw,72px)}
.svc-hero-grid{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
@media(min-width:940px){.svc-hero-grid{grid-template-columns:1.08fr .92fr}}
.svc-hero .crumbs{margin-bottom:24px}
.svc-hero .eyebrow{margin-bottom:18px}
.svc-hero .page-title{max-width:16ch}
.svc-hero .page-title em{font-style:italic;color:var(--petrol)}
.svc-hero .lede{margin-top:22px}
.svc-hero .hero-meta{margin-top:34px}
.svc-hero .btn-row{margin-top:30px}

.svc-hero-figure{
  position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;
  border-radius:220px 220px var(--radius) var(--radius);
  background:linear-gradient(150deg,var(--sand-soft),var(--sand) 55%,var(--copper));
  box-shadow:0 40px 90px -60px rgba(10,31,38,.7);
}
.svc-hero-figure img{width:100%;height:100%;object-fit:cover}
.svc-hero-figure figcaption{
  position:absolute;inset-inline:16px;bottom:16px;z-index:2;
  background:rgba(255,255,255,.93);border-radius:var(--radius-sm);padding:12px 16px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);
}
@media(max-width:939px){.svc-hero-figure{aspect-ratio:16/11;border-radius:var(--radius)}}

/* The treatment tile — same surface language as the therapist card. */
.svc-grid{display:grid;gap:clamp(22px,3vw,30px);grid-template-columns:repeat(auto-fit,minmax(316px,1fr))}
.svc-card{
  display:flex;flex-direction:column;background:var(--ivory);
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.svc-card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 34px 64px -46px rgba(10,31,38,.55)}

.svc-media{
  position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(150deg,var(--sand-soft),var(--sand) 55%,var(--copper-light));
}
/* No photograph? The treatment number becomes the monogram, the same way a
   therapist without a portrait falls back to their initial. */
.svc-media::before{
  content:attr(data-num);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mdm-font-display);font-size:74px;color:rgba(255,255,255,.6);
}
.svc-media img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc-card:hover .svc-media img{transform:scale(1.04)}

.svc-body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.4vw,26px);position:relative}
.svc-num{
  position:absolute;top:-17px;inset-inline-start:clamp(20px,2.4vw,26px);z-index:3;
  display:grid;place-items:center;min-width:34px;height:34px;padding-inline:9px;
  border-radius:999px;background:var(--petrol);color:var(--ivory);
  font-family:var(--mdm-font-display);font-size:14px;
}
.svc-body h3{font-size:24px;line-height:1.16;margin-top:6px}
.svc-body > p{margin-top:10px;font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.svc-body .tags{margin-top:14px}

.svc-foot{
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px;
  margin-top:auto;padding-top:20px;
}
.svc-foot .price{display:flex;flex-direction:column;gap:2px}
.svc-foot .price b{font-family:var(--mdm-font-display);font-size:23px;font-weight:400;line-height:1}
.svc-foot .price span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.svc-actions{display:flex;flex-wrap:wrap;gap:8px}

/* What every session includes. */
.incl-grid{display:grid;gap:clamp(22px,3vw,32px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.incl-grid article{display:flex;flex-direction:column;gap:10px}
.incl-grid .ic{color:var(--copper)}
.incl-grid h3{font-size:20px}
.incl-grid p{font-size:14.5px;color:var(--ink-soft);line-height:1.62}

/* The add-ons list sits directly under the price table. */
.addons-wrap{margin-top:clamp(34px,4vw,48px);padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--line-soft)}
.addons-wrap .eyebrow{margin-bottom:20px}

/* A price-table row title that links through to the treatment. */
.ptable th[scope="row"] a{color:inherit;transition:color .25s var(--ease)}
.ptable th[scope="row"] a:hover{color:var(--petrol);text-decoration:underline;text-underline-offset:4px}

/* ---------- 6C. SINGLE TREATMENT LANDING PAGE ---------- */
/* The hero figure doubles as the treatment's cover; without a photograph it
   falls back to the number, the same as the tile. */
.svc-hero-figure[data-num]:not(:has(img))::before{
  content:attr(data-num);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mdm-font-display);font-size:120px;color:rgba(255,255,255,.6);
}

/* Copy on one side, a photograph on the other. */
.incl-split{display:grid;gap:clamp(32px,5vw,60px);align-items:center}
@media(min-width:940px){.incl-split{grid-template-columns:1.05fr .95fr}}
.incl-figure{
  margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);
  background:var(--sand-soft);box-shadow:0 34px 70px -52px rgba(10,31,38,.6);
}
.incl-figure img{width:100%;height:100%;object-fit:cover}
.incl-split .s-head{margin-bottom:clamp(26px,3vw,34px)}

/* Technique / oil / clothing / positions. */
.spec-grid{display:grid;gap:0;margin:0;border-top:1px solid rgba(34,83,101,.22)}
@media(min-width:760px){.spec-grid{grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,5vw,64px)}}
.spec-grid > div{padding-block:20px;border-bottom:1px solid rgba(34,83,101,.22)}
.spec-grid dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.spec-grid dd{margin:0;font-size:16px;line-height:1.55;color:var(--petrol)}

/* Book this / choose another. */
.fit-grid{display:grid;gap:clamp(22px,3vw,30px)}
@media(min-width:820px){.fit-grid{grid-template-columns:repeat(2,1fr)}}
.fit-card{
  border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--ivory);
  padding:clamp(24px,3vw,34px);
}
.fit-card h3{font-size:22px;margin-bottom:18px}
.fit-card--yes{border-color:var(--line)}
.fit-card .tick-list{margin-top:0}
.fit-card .x{
  flex:none;width:18px;height:18px;display:grid;place-items:center;margin-top:1px;
  color:var(--ink-soft);font-size:17px;line-height:1;
}
.fit-card .tlink{margin-top:22px}

/* One card per length. */
.price-cards{display:grid;gap:clamp(18px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.price-card{
  position:relative;border:1px solid var(--line-soft);border-radius:var(--radius);
  background:var(--paper);padding:clamp(24px,3vw,32px);text-align:center;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.price-card:hover{transform:translateY(-4px);border-color:var(--line)}
.price-card.is-pick{border-color:var(--petrol);box-shadow:0 30px 60px -48px rgba(10,31,38,.6)}
.price-card .pick{
  position:absolute;top:-11px;inset-inline:0;margin-inline:auto;width:max-content;
  background:var(--petrol);color:var(--ivory);border-radius:999px;padding:5px 14px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.price-card h3{font-size:15px;font-family:var(--mdm-font-body);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.price-card h3 small{font-size:inherit}
.price-card .amount{font-family:var(--mdm-font-display);font-size:clamp(30px,3.4vw,40px);line-height:1.1;color:var(--ink-strong)}
.price-card .btn{margin-top:14px;width:100%}

/* ---------- 6D. CLIENT STORIES — case notes ----------
   Explicitly not a testimonial. No rating, no avatar, no quotation marks and
   no card: those are the visual grammar of a review, and a review is read as
   an opinion. This is a numbered case index — situation, what happened, and
   the booking facts on the side — so it reads as a record of the work.

   The rule that shapes it: the copper number and hairlines carry the
   structure, and petrol carries every word. */
.cases{list-style:none;margin:0;padding:0;border-top:1px solid rgba(34,83,101,.24)}
.case{
  display:grid;gap:14px 0;
  padding-block:clamp(28px,3.4vw,40px);
  border-bottom:1px solid rgba(34,83,101,.24);
}
@media(min-width:900px){
  .case{grid-template-columns:78px minmax(0,1fr) 244px;column-gap:clamp(28px,4vw,52px);align-items:start}
}
.case-n{
  font-family:var(--mdm-font-display);font-size:30px;line-height:1;color:var(--copper);
  padding-top:4px;
}
.case-body h3{font-size:clamp(21px,2.2vw,26px);line-height:1.22;margin-bottom:12px}
.case-body p{font-size:15px;line-height:1.72;color:var(--petrol);max-width:60ch}

/* Facts, not praise — set like a caption block. */
.case-meta{display:grid;gap:12px;margin:0}
@media(max-width:899px){
  .case-meta{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    padding-top:16px;border-top:1px solid rgba(34,83,101,.18);
  }
}
.case-meta dt{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:3px;
}
.case-meta dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--petrol)}
.case-meta .case-result{
  font-family:var(--mdm-font-display);font-size:16px;line-height:1.35;color:var(--ink-strong);
}
/* On the sand band the hairlines need a touch more weight to stay visible. */
.section--sand .cases,
.section--sand .case{border-color:rgba(34,83,101,.26)}

/* ---------- 7. ARCHIVE / PAGINATION ---------- */
.mdm-loop--rows{border-top:1px solid var(--line-soft)}
.mdm-loop--rows .trow:first-of-type{border-top:0}

.mdm-pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(36px,5vw,56px);justify-content:center}
.mdm-pagination .page-numbers{
  display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 14px;
  border:1px solid var(--line-soft);border-radius:999px;font-size:14px;color:var(--ink-soft);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.mdm-pagination .page-numbers:hover{border-color:var(--petrol);color:var(--petrol)}
.mdm-pagination .current{background:var(--petrol);border-color:var(--petrol);color:var(--ivory)}

/* ---------- 8. ABOUT / VALUE GRID ---------- */
.value-grid{display:grid;gap:clamp(20px,3vw,28px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.value-card{
  border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--paper);
  padding:clamp(22px,3vw,30px);
}
.value-card svg{width:22px;height:22px;color:var(--copper);margin-bottom:16px}
.value-card h3{font-size:21px;margin-bottom:10px}
.value-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.62}

/* ---------- 9. SINGLE POST HEADER ---------- */
.post-hero .page-title{max-width:24ch}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.post-cover{margin:clamp(28px,4vw,44px) 0 0;border-radius:var(--radius);overflow:hidden}
.post-cover img{width:100%;height:auto}