/* ==========================================================================
   Trends Property Limited — public site
   Design language carried over unchanged: forest green + brass,
   Playfair Display headings, Inter body, 3px radius.
   ========================================================================== */

:root{
  --forest-900:#0E2A22; --forest-800:#12352B; --forest-700:#1B4D3E;
  --brass:#B08D4F; --brass-2:#CDAE73; --brass-soft:#EADFC8;
  --paper:#FFFFFF; --cream:#F8F5EF; --line:#E3DDD0;
  --ink:#16211C; --ink-soft:#5A6560;
  --r:3px; --maxw:1180px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Author display rules (e.g. .person{display:grid}) outrank the UA stylesheet's
   [hidden]{display:none}, so anything marked hidden would still render. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--cream);color:var(--ink);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.16;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
.eyebrow{font-size:.66rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:12px;margin-bottom:var(--s3)}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--brass);flex:none}
.eyebrow.center{justify-content:center}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:15px 30px;
  border-radius:var(--r);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .25s;
  font-family:inherit;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-brass{background:var(--brass);color:#12352B}
.btn-brass:hover{background:var(--brass-2)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:var(--brass-2);color:var(--brass-2)}
.btn-outline{border-color:var(--forest-800);color:var(--forest-800)}
.btn-outline:hover{background:var(--forest-800);color:#fff}
.btn-sm{min-height:40px;padding:10px 20px;font-size:.72rem}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s}
header .bar{display:flex;align-items:center;justify-content:space-between;height:86px;gap:var(--s3)}
header.solid{background:rgba(14,42,34,.97);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(176,141,79,.35)}
/* Interior pages have no dark hero behind the bar, so it starts solid. */
header.always-solid{background:rgba(14,42,34,.97);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(176,141,79,.35)}
.brand{color:#fff;line-height:1.1}
.brand .bt{font-family:'Playfair Display',serif;font-weight:600;font-size:1.22rem;letter-spacing:.01em}
.brand .bt small{display:block;font-family:'Inter',sans-serif;font-size:.5rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--brass-2);margin-top:5px}
nav.main{display:flex;align-items:center;gap:var(--s4)}
nav.main a{font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.84);
  transition:color .2s;display:inline-flex;align-items:center;min-height:44px}
nav.main a:hover,nav.main a.active{color:var(--brass-2)}
.nav-cta{padding:12px 22px;border:1px solid var(--brass);color:var(--brass-2)!important;border-radius:var(--r)}
.nav-cta:hover{background:var(--brass);color:#12352B!important}
/* ---------- services dropdown ---------- */
.navdrop{position:relative;display:inline-flex;align-items:center}
.navdrop>a{display:inline-flex;align-items:center;gap:6px}
.navdrop .caret{transition:transform .2s;opacity:.7}
.navdrop:hover .caret,.navdrop:focus-within .caret{transform:rotate(180deg);opacity:1}
.navdrop-menu{position:absolute;top:100%;left:-18px;min-width:250px;padding:10px;
  background:rgba(14,42,34,.98);backdrop-filter:blur(12px);
  border:1px solid rgba(176,141,79,.35);border-radius:var(--r);
  box-shadow:0 22px 50px rgba(0,0,0,.4);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s}
/* focus-within, not just hover, so the menu is reachable by keyboard. */
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu{
  opacity:1;visibility:visible;transform:translateY(0)}
.navdrop-menu a{min-height:0;padding:11px 14px;border-radius:var(--r);
  font-size:.72rem;letter-spacing:.1em;color:rgba(255,255,255,.82);white-space:nowrap}
.navdrop-menu a:hover{background:rgba(176,141,79,.16);color:var(--brass-2)}
.navdrop-menu .sep{height:1px;background:rgba(255,255,255,.12);margin:6px 8px}

.burger{display:none;background:none;border:0;cursor:pointer;width:46px;height:46px;align-items:center;justify-content:center}
.burger span{display:block;width:24px;height:1.5px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:1.5px;background:inherit}
.burger span::before{top:-8px}.burger span::after{top:8px}

/* ---------- home hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden;
  background:linear-gradient(150deg,#0E2A22 0%,#12352B 55%,#1B4D3E 100%)}
.hero::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:linear-gradient(rgba(176,141,79,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(176,141,79,.5) 1px,transparent 1px);
  background-size:78px 78px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);opacity:.5}
/* Vertical padding only, as LONGHAND. This element is `class="wrap hero-inner"`,
   and .wrap supplies the 24px side gutter via the `padding` shorthand. Writing
   `padding:160px 0 100px` here would reset those sides to 0 — which it did, so
   the hero text sat flush against the screen edge on every phone. Desktop hid
   it, because max-width:900px plus margin:auto leaves slack anyway. */
.hero-inner{position:relative;z-index:2;padding-top:160px;padding-bottom:100px;max-width:900px}
.hero h1{font-size:clamp(2.3rem,5.1vw,4rem);margin-bottom:var(--s4);font-weight:500}
.hero h1 em{font-style:italic;color:var(--brass-2)}
.hero p.lede{font-size:clamp(1.02rem,1.6vw,1.18rem);color:rgba(255,255,255,.8);max-width:620px;margin-bottom:var(--s4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
/* Grid rather than flex-wrap: four facts of uneven width used to spill onto a
   second row at common desktop widths, which read as a layout fault. */
.hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.16)}
.hero-facts div strong{display:block;font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--brass-2);line-height:1}
.hero-facts div span{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:8px;display:block}

/* ==========================================================================
   HOME HERO — rebuilt from the reference design
   --------------------------------------------------------------------------
   Reference image 1672x941, measured at a 1600px build viewport
   (scale 0.9569). Numbers in the comments below are reference build-px, so a
   value that looks arbitrary can be checked against the design rather than
   argued about.

   The design's text is REBUILT, not used as pixels. A screenshot hero would
   put the headline beyond Google's reach, make the copy uneditable from the
   admin panel, and render body text about 3px tall on a 360px phone.
   Only the photograph comes from the image.
   ========================================================================== */
.nhero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(115deg,#0B130E 0%,#0D1611 42%,#122019 100%)}

.nhero-top{position:relative}
/* The photograph sits right, and its left edge is dissolved into the panel so
   the join reads as one continuous scene, the way the reference does.
   It is absolute inside .nhero-top, NOT .nhero: spanning the trust bar as well
   made the box near-square, and cover then scaled the photo up 23% and pushed
   the desk out of frame. */
.nhero-media{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:1}  /* ref: photo region 930/1600 */
.nhero-media img{width:100%;height:100%;object-fit:cover;object-position:42% 50%}
.nhero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0D1611 0%,rgba(13,22,17,.92) 12%,rgba(13,22,17,.55) 30%,rgba(13,22,17,0) 58%)}
/* A faint warm lift along the very bottom, matching the desk in the reference. */
.nhero-media::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:1;
  background:linear-gradient(to top,rgba(11,19,14,.55),transparent)}

.nhero-wrap{max-width:1422px;margin:0 auto;padding:0 var(--s3)}  /* ref: content left edge 113 @1600 */

.nhero-copy{position:relative;z-index:2;max-width:620px;
  padding-top:158px;padding-bottom:104px}     /* ref: eyebrow ink top 159, trust bar starts 789 */

.nhero .eyebrow{color:var(--brass-2);margin-bottom:var(--s3)}

.nhero h1{font-weight:500;letter-spacing:-.015em;
  font-size:clamp(2.35rem,3.974vw,3.98rem);    /* ref: "Property decisions" = 520.6px wide @1600 -> 63.6px */
  line-height:1.091;                           /* ref: line tops 192 / 261 / 331 -> 69.4px */
  margin-bottom:10px}                          /* ref: h1 box bottom 400 -> lede top 419 */
.nhero h1 span{display:block}
.nhero h1 em{display:block;font-style:italic;color:#F5CE94}   /* ref: #F5CE94 */

.nhero-lede{font-size:clamp(.98rem,1.053vw,1.053rem);line-height:1.507;  /* ref: line1 522.5 wide, leading 25.4 */
  color:rgba(255,255,255,.82);max-width:548px;margin-bottom:18px}   /* ref: lede bottom 495 -> buttons 513 */

.nhero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:37px}  /* ref: buttons bottom 564 -> signature 601 */
.nhero-actions .btn{min-height:0;height:51px;padding:0 26px;gap:8px}  /* ref: h 50.7, widths 216.3 / 170.3 */
.nhero-actions .btn svg{flex:none}

/* Founder's signature — the trust asset the whole page rests on. */
.nhero-sign{position:relative;z-index:2}
.nhero-sign .sig{display:block;font-family:'Allura',cursive;font-size:2.1rem;line-height:1.15;
  color:#EDEBE6;margin-bottom:6px}
.nhero-sign .sig-role,.nhero-sign .sig-firm{display:block;font-size:.66rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.9}

/* ---------- the trust bar ---------- */
.trustbar{position:relative;z-index:3;background:#151D19;   /* ref: #151D19 */
  border-top:1px solid rgba(190,157,107,.20)}
.trustbar ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.trustbar li{display:flex;align-items:center;gap:14px;padding:22px 26px;min-height:111px}
/* Hairline separators between items, but never one hanging off the last item. */
.trustbar li+li{box-shadow:inset 1px 0 0 rgba(255,255,255,.09)}
.trustbar svg{flex:none;width:30px;height:30px;stroke:var(--brass-2);fill:none;stroke-width:1.4}
.trustbar b{display:block;font-weight:400;font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.35}
.trustbar strong{display:block;font-weight:600;font-size:.95rem;color:#fff;line-height:1.35}
.trustbar .tb-sm{font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.45}
/* The last item carries a postal address rather than a two-word claim, so it
   is set smaller and quieter — as in the reference. */
.trustbar li:last-child b{font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.45}

@media(max-width:1180px){
  .nhero-media{width:52%}
  .nhero-copy{max-width:520px;padding-top:132px;padding-bottom:78px}
  .trustbar ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trustbar li{min-height:96px;padding:18px 20px}
  /* With three per row the 4th starts a new row, so the inset separator would
     appear on the wrong edges. Draw them per-column instead. */
  .trustbar li+li{box-shadow:none}
  .trustbar li{box-shadow:inset 1px 0 0 rgba(255,255,255,.09)}
  .trustbar li:nth-child(3n+1){box-shadow:none}
}

/* Below this the photograph can no longer share the row with the words, so it
   moves under them at full width and keeps the founder's face in the frame. */
@media(max-width:900px){
  .nhero-media{position:relative;width:100%;height:clamp(300px,64vw,460px)}
  .nhero-media img{object-position:26% 34%}
  .nhero-media::after{background:linear-gradient(to bottom,rgba(13,22,17,.55) 0%,rgba(13,22,17,0) 34%)}
  .nhero-copy{max-width:none;padding-top:122px;padding-bottom:var(--s4)}
  .nhero-lede{max-width:none}
  .nhero-actions{margin-bottom:var(--s4)}
  .nhero-sign{padding-bottom:var(--s4)}
}

@media(max-width:600px){
  .nhero-copy{padding-top:112px}
  .nhero h1{font-size:clamp(2rem,8.7vw,2.5rem)}
  .nhero-actions{gap:12px}
  .nhero-actions .btn{width:100%}          /* full-width taps beat a cramped row */
  .nhero-sign .sig{font-size:1.85rem}
  .trustbar ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trustbar li{min-height:0;padding:16px 14px;gap:11px}
  .trustbar li:nth-child(3n+1){box-shadow:inset 1px 0 0 rgba(255,255,255,.09)}
  .trustbar li:nth-child(odd){box-shadow:none}
  .trustbar svg{width:24px;height:24px}
  .trustbar strong,.trustbar b{font-size:.83rem}
  .trustbar .tb-sm{font-size:.72rem}
}

@media(max-width:380px){
  .trustbar ul{grid-template-columns:1fr}
  .trustbar li{box-shadow:none!important;border-top:1px solid rgba(255,255,255,.08)}
  .trustbar li:first-child{border-top:0}
}

/* ==========================================================================
   SECTION ICONS
   --------------------------------------------------------------------------
   One treatment for every section icon: a 24px brass line glyph, sitting to
   the left of the heading. Declared once so the router, the paper argument,
   the commitments and the trust bar can never drift apart in size or weight.
   ========================================================================== */
.rcard-ico svg,.arg-ico svg,.vcard .vnum svg,.trustbar svg{
  width:26px;height:26px;flex:none;fill:none;stroke:var(--brass);
  stroke-width:1.5;stroke-linecap:round}
.rcard-ico,.arg-ico{display:inline-flex;margin-bottom:var(--s2);color:var(--brass)}
.arg .arg-ico{margin-bottom:14px}
.vcard .vnum svg{width:28px;height:28px}
.trustbar svg{width:26px;height:26px;stroke:var(--brass-2)}

/* ==========================================================================
   INTENT ROUTER — six cards, one screen
   --------------------------------------------------------------------------
   Replaces the old services grid. That grid listed the firm's own nouns
   (Marketing, Facilitation), and left the visitor to work out which one was
   theirs. These are phrased as the sentence they arrived thinking.
   ========================================================================== */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}

/* Text only, by decision. Six thumbnails of the same man at the same desk
   repeated rather than distinguished the six choices, which is the one job
   this block has. The headline now carries the card. */
.rcard{position:relative;display:flex;flex-direction:column;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  transition:transform .28s,box-shadow .28s,border-color .28s,background .28s}
/* A brass hairline that fills across on hover — the same rule the eyebrows
   use, so the motif is already the site's own. */
.rcard::before{content:"";position:absolute;top:-1px;left:-1px;height:2px;width:38px;
  background:var(--brass);border-radius:var(--r) 0 0 0;transition:width .34s ease}
.rcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(14,42,34,.13);
  border-color:var(--brass-2);background:var(--paper)}
.rcard:hover::before{width:calc(100% + 2px)}
.rcard-body{display:flex;flex-direction:column;gap:10px;flex:1}
.rcard-body strong{font-family:'Playfair Display',Georgia,serif;font-size:1.32rem;font-weight:600;
  line-height:1.25;color:var(--forest-900);letter-spacing:-.01em}
.rcard-body>span{font-size:.93rem;color:var(--ink-soft);line-height:1.62}
.rcard-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding-top:var(--s2);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.rcard:hover .rcard-go{color:var(--forest-800)}
.rcard-go svg{transition:transform .28s}
.rcard:hover .rcard-go svg{transform:translateX(4px)}

@media(max-width:900px){ .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .rgrid{grid-template-columns:1fr} }

/* ==========================================================================
   FEATURE BANDS — the two services that earn most
   --------------------------------------------------------------------------
   Image beside copy, alternating sides. These photographs earn their place
   because of what is legible in them (an itemised cost sheet, site plans),
   which is why they work here at full width and did not work as small
   repeated thumbnails in the router.
   ========================================================================== */
.fband{background:var(--cream)}
.fband-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
/* Two services shown SIDE BY SIDE rather than stacked full-width — the
   reference puts them in one row, which reads as a comparison rather than
   as two separate pitches. Each half keeps a small picture on its outer edge. */
.fband.is-pair .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.fband.is-pair .fband-row{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--s3);align-items:start}
/* The flipped row must reverse the TRACK WIDTHS too, not just the order.
   Re-ordering alone left the picture in the 1fr column and squeezed the
   words into the 200px one. */
.fband.is-pair .fband-row.is-flipped{grid-template-columns:minmax(0,1fr) minmax(0,200px)}
.fband.is-pair .fband-row+.fband-row{margin-top:0}
.fband.is-pair .fband-row.is-flipped .fband-media{order:2}
.fband.is-pair .fband-media img{aspect-ratio:4/3}
.fband.is-pair .fband-copy h2{font-size:clamp(1.3rem,1.8vw,1.6rem)}
.fband.is-pair .fband-copy>p{font-size:.93rem}
.tlink{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  padding-bottom:4px;border-bottom:1px solid rgba(176,141,79,.45);transition:color .22s,border-color .22s}
.tlink:hover{color:var(--forest-800);border-color:var(--forest-800)}
.tlink svg{transition:transform .24s}
.tlink:hover svg{transform:translateX(4px)}

/* Ticks rather than dashes in the paired layout, matching the reference. */
.fband.is-pair .fband-pts li{padding-left:23px;font-size:.88rem}
.fband.is-pair .fband-pts li::before{width:13px;height:7px;top:.42em;background:none;
  border-left:1.6px solid var(--brass);border-bottom:1.6px solid var(--brass);
  transform:rotate(-45deg)}
@media(max-width:1000px){
  .fband.is-pair .wrap{grid-template-columns:1fr;gap:var(--s5)}
}
@media(max-width:560px){
  .fband.is-pair .fband-row,.fband.is-pair .fband-row.is-flipped{grid-template-columns:1fr}
  .fband.is-pair .fband-row.is-flipped .fband-media{order:0}
  .fband.is-pair .fband-media img{aspect-ratio:16/9}
}
.fband-row+.fband-row{margin-top:var(--s6)}
/* Flip which column the picture sits in, without moving it in the DOM — the
   reading order stays image-then-words for a screen reader either way. */
.fband-row.is-flipped .fband-media{order:2}
.fband-media{border-radius:var(--r);overflow:hidden;background:var(--forest-900)}
.fband-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.fband-copy h2{font-size:clamp(1.7rem,2.6vw,2.4rem);margin-bottom:var(--s3);color:var(--forest-900)}
.fband-copy>p{color:var(--ink-soft);font-size:1.02rem;margin-bottom:var(--s3)}
.fband-pts{list-style:none;margin-bottom:var(--s4);display:grid;gap:11px}
.fband-pts li{position:relative;padding-left:26px;font-size:.94rem;color:var(--ink)}
.fband-pts li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--brass)}

@media(max-width:900px){
  .fband-row{grid-template-columns:1fr;gap:var(--s4)}
  .fband-row+.fband-row{margin-top:var(--s5)}
  /* Stacked, the picture always leads — flipping it below the words would put
     one band's image above its heading and the next band's below. */
  .fband-row.is-flipped .fband-media{order:0}
}

/* ==========================================================================
   SERVICE PAGES — numbered steps, founder block, hub cards
   ========================================================================== */
.steps-sec{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);counter-reset:s}
.step{position:relative;padding:var(--s3) 0 0;border-top:2px solid var(--line);transition:border-color .3s}
.step:hover{border-color:var(--brass)}
.step-n{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;color:var(--brass);
  letter-spacing:.12em;margin-bottom:12px}
.step h3{font-size:1.14rem;margin-bottom:9px;color:var(--forest-900);line-height:1.3}
.step p{font-size:.92rem;color:var(--ink-soft);line-height:1.62}

.fblock{background:var(--forest-900);color:#fff}
.fblock-in{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--s5);align-items:center}
.fblock-img{border-radius:var(--r);overflow:hidden}
.fblock-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.fblock-copy h2{font-size:clamp(1.6rem,2.4vw,2.1rem);color:#fff;margin-bottom:6px}
.fblock-copy .fblock-role{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass-2);margin-bottom:var(--s3)}
.fblock-copy p{color:rgba(255,255,255,.78);font-size:1rem;margin-bottom:var(--s3)}
.fblock-copy .btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.fblock-copy .btn-outline:hover{background:#fff;color:var(--forest-900);border-color:#fff}

/* Hub cards: same text-led card as the homepage router, plus a short list of
   what the service actually covers, because this page is where someone
   compares the five rather than picks a mood. */
.hubcard ul{list-style:none;display:grid;gap:7px;margin:2px 0 var(--s2)}
.hubcard ul li{position:relative;padding-left:14px;font-size:.86rem;color:var(--ink-soft);line-height:1.55}
.hubcard ul li::before{content:"";position:absolute;left:0;top:.66em;width:4px;height:4px;
  border-radius:50%;background:var(--brass)}

@media(max-width:1000px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)} }
@media(max-width:900px){
  .fblock-in{grid-template-columns:1fr;gap:var(--s4)}
  .fblock-img{max-width:420px}
}
@media(max-width:560px){ .steps{grid-template-columns:1fr} }

/* ==========================================================================
   WHERE TO NEXT — onward links at the foot of every page
   --------------------------------------------------------------------------
   Each page used to end at its own enquiry form, so a visitor who was not
   ready to fill one in had nowhere to go but the back button. These are the
   two or three pages a person on THIS page most plausibly wants next.
   ========================================================================== */
.nextup{background:var(--paper);border-top:1px solid var(--line)}
.nextup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.nxt{display:flex;flex-direction:column;gap:8px;padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r);background:var(--cream);
  transition:transform .26s,border-color .26s,box-shadow .26s,background .26s}
.nxt:hover{transform:translateY(-3px);border-color:var(--brass-2);background:var(--paper);
  box-shadow:0 14px 34px rgba(14,42,34,.10)}
.nxt-k{font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.nxt strong{font-family:'Playfair Display',Georgia,serif;font-size:1.1rem;font-weight:600;
  line-height:1.3;color:var(--forest-900)}
.nxt span.nxt-b{font-size:.88rem;color:var(--ink-soft);line-height:1.55}
.nxt-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:7px;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-800)}
.nxt-go svg{transition:transform .26s}
.nxt:hover .nxt-go svg{transform:translateX(4px)}

@media(max-width:900px){ .nextup-grid{grid-template-columns:1fr} }

/* ==========================================================================
   Featured properties: swipe on phones, grid on desktop
   --------------------------------------------------------------------------
   The ask was a carousel. This gets the same one-handed feel without one:
   real finger-swiping with scroll-snap, no arrows to mis-tap, no JavaScript,
   and every card still in the DOM for Google. On desktop it stays a plain row.
   ========================================================================== */
@media(max-width:900px){
  #featured .pgrid{
    display:flex;gap:var(--s3);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* Bleed to both edges so a card can sit flush while scrolling, then pad
       the ends back so the first and last still line up with the text above. */
    margin-inline:calc(var(--s3) * -1);
    padding-inline:var(--s3);
    padding-bottom:var(--s2);
    scroll-padding-left:var(--s3);
    scrollbar-width:none;
  }
  #featured .pgrid::-webkit-scrollbar{display:none}
  #featured .pgrid>*{flex:0 0 82%;scroll-snap-align:start}
}
@media(max-width:600px){
  #featured .pgrid>*{flex:0 0 86%}
}

/* ---------- interior page hero ---------- */
.page-hero{position:relative;color:#fff;overflow:hidden;padding:150px 0 var(--s5);
  background:linear-gradient(150deg,#0E2A22 0%,#12352B 60%,#1B4D3E 100%)}
.page-hero::before{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  background-image:linear-gradient(rgba(176,141,79,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(176,141,79,.5) 1px,transparent 1px);
  background-size:78px 78px}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);opacity:.5}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:500;max-width:900px}
.page-hero p{color:rgba(255,255,255,.78);max-width:620px;margin-top:var(--s3);font-size:1.04rem}
.crumbs{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:var(--s3)}
.crumbs a:hover{color:var(--brass-2)}
.crumbs span{margin:0 8px;opacity:.5}

section{padding:var(--s6) 0}
.sec-head{max-width:720px;margin-bottom:var(--s5)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
/* Heading on the left, a link on the right. flex-wrap matters: the link is
   flex:none, so on a narrow screen it cannot shrink and would push past the
   edge instead of dropping onto its own line. */
.sec-head.row{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-end;gap:var(--s3);max-width:none}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:var(--s3)}
.sec-head p{color:var(--ink-soft);font-size:1.05rem}

/* ---------- the paper argument ---------- */
.paper-arg{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pull{font-family:'Playfair Display',serif;font-size:clamp(1.4rem,2.7vw,2.05rem);line-height:1.4;color:var(--forest-800);
  max-width:900px;margin:0 auto;text-align:center}
.pull em{font-style:italic;color:var(--brass)}
.arg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.arg{border-top:1px solid var(--line);padding-top:var(--s3)}
.arg h3{margin-top:0}
.arg h3{font-family:'Inter',sans-serif;font-weight:700;font-size:.92rem;margin-bottom:8px;letter-spacing:.01em}
.arg p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- services ---------- */
/* minmax(0,1fr) rather than 1fr throughout the grids below.
   A bare `1fr` is minmax(auto,1fr), and that `auto` floor is min-content — so a
   single long word plus the card's 40px padding forces the track wider than its
   share and the whole row overflows the screen. The services page did exactly
   this: 507px of cards inside a 360px phone. Zero is a floor a track can honour. */
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
/* The services page shows the five in two columns rather than four. Declared
   here as a class so the media queries below can still collapse it; it used to
   be an inline style, which nothing could override.
   ONE class, deliberately: `.sgrid.sgrid-2` would score 0-2-0 and outrank the
   single-column rule in the 600px media query, keeping two columns on phones. */
.sgrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.scard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);
  transition:transform .28s,box-shadow .28s}
.scard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(14,42,34,.11)}
.snum{font-family:'Playfair Display',serif;font-size:.9rem;color:var(--brass);letter-spacing:.1em;display:block;margin-bottom:var(--s2)}
.scard h3{font-size:1.28rem;margin-bottom:10px}
.scard p{color:var(--ink-soft);font-size:.92rem}
.scard.lead-svc{background:var(--forest-800);border-color:var(--forest-800);color:#fff}
.scard.lead-svc h3{color:#fff}
.scard.lead-svc p{color:rgba(255,255,255,.75)}
.scard.lead-svc .snum{color:var(--brass-2)}

/* ---------- house rule ---------- */
.rule{background:var(--forest-900);color:#fff;text-align:center}
.rule blockquote{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.38;
  max-width:900px;margin:0 auto;font-style:italic;color:#fff}
.rule .attrib{margin-top:var(--s4);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-2)}

/* ---------- values ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.vcard{border-left:2px solid var(--brass);padding-left:var(--s3)}
.vnum{display:block;margin-bottom:12px;line-height:0;color:var(--brass)}
.vcard h3{font-size:1.24rem;margin-bottom:10px}
.vcard p{font-size:.93rem;color:var(--ink-soft)}

/* ==========================================================================
   PROPERTY LISTINGS
   ========================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(14,42,34,.13)}
.pcard-media{position:relative;aspect-ratio:4/3;background:var(--forest-800);overflow:hidden}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.pcard:hover .pcard-media img{transform:scale(1.05)}
.pcard-media .noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.35);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(150deg,#12352B,#1B4D3E)}
.pcard-body{padding:var(--s3);display:flex;flex-direction:column;gap:10px;flex:1}
.pcard h3{font-size:1.15rem;line-height:1.3}
.pcard .loc{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600}
.pcard .price{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--forest-800);margin-top:auto;padding-top:10px}
.pcard .price small{font-family:'Inter',sans-serif;font-size:.72rem;color:var(--ink-soft);letter-spacing:.06em;font-weight:500}
.pcard .specs{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:.82rem;color:var(--ink-soft);
  border-top:1px solid var(--line);padding-top:12px}
.pcard .specs span{display:inline-flex;align-items:center;gap:6px}

/* status + title badges */
.badges{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:8px;z-index:2}
.badge{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 11px;
  border-radius:var(--r);background:rgba(14,42,34,.88);color:#fff;backdrop-filter:blur(4px)}
.badge.brass{background:var(--brass);color:#12352B}
.badge.sold{background:#8C2F2F;color:#fff}
.badge.offer{background:#8A6A2C;color:#fff}
.badge.verified{background:rgba(255,255,255,.94);color:#1B4D3E;display:inline-flex;align-items:center;gap:5px}

/* filter bar */
.filters{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:var(--s2);align-items:end;margin-bottom:var(--s4)}
.filters .fgroup{display:flex;flex-direction:column;gap:7px}
.filters label{font-size:.63rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.filters select,.filters input{min-height:46px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--cream);color:var(--ink);font-family:inherit;font-size:.9rem;width:100%}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--brass)}
.result-count{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s3)}

/* empty / loading states */
.state{text-align:center;padding:var(--s6) var(--s3);color:var(--ink-soft)}
.state strong{display:block;font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--forest-800);margin-bottom:10px}
.skeleton{background:linear-gradient(90deg,#EFEAE0 25%,#F6F2EA 50%,#EFEAE0 75%);background-size:200% 100%;
  animation:shimmer 1.4s infinite;border-radius:var(--r)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-card{height:340px}

/* ==========================================================================
   PROPERTY DETAIL
   ========================================================================== */
.pd-gallery{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:var(--s5)}
.pd-main{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--forest-800);cursor:zoom-in}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px}
.pd-thumb{border-radius:var(--r);overflow:hidden;background:var(--forest-800);cursor:pointer;position:relative}
.pd-thumb img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.pd-thumb:hover img{opacity:.82}
.pd-thumb.more::after{content:attr(data-more);position:absolute;inset:0;background:rgba(14,42,34,.72);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:600;letter-spacing:.06em}

.pd-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s5);align-items:start}
.pd-title{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:12px}
.pd-loc{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:var(--s3)}
.pd-price{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--forest-800)}
.pd-price small{font-family:'Inter',sans-serif;font-size:.78rem;color:var(--ink-soft);letter-spacing:.08em;font-weight:500}

.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s3) 0;margin:var(--s4) 0}
.spec-grid div strong{display:block;font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--forest-800);line-height:1}
.spec-grid div span{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:7px;display:block}

.pd-body h2{font-size:1.5rem;margin:var(--s4) 0 var(--s2)}
.pd-body p{color:var(--ink-soft);margin-bottom:var(--s2);white-space:pre-line}
.feature-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:var(--s2)}
.feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--ink-soft)}
.feature-list li::before{content:"";width:5px;height:5px;background:var(--brass);border-radius:50%;margin-top:9px;flex:none}

/* the title / documentation panel — the brand's whole argument, made visible */
.title-panel{background:var(--forest-800);color:#fff;border-radius:var(--r);padding:var(--s4);margin:var(--s4) 0}
.title-panel h3{font-size:1.25rem;color:#fff;margin-bottom:var(--s2)}
.title-panel .doc{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--brass-2);margin-bottom:10px}
.title-panel p{color:rgba(255,255,255,.76);font-size:.92rem}
.title-panel .checked{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s3);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass-2);font-weight:600}

/* sticky enquiry card */
.pd-aside{position:sticky;top:110px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.pd-aside h3{font-size:1.28rem;margin-bottom:10px}
.pd-aside p.small{font-size:.88rem;color:var(--ink-soft);margin-bottom:var(--s3)}
.pd-aside .btn{width:100%;margin-bottom:10px}
.pd-aside .ref{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  border-top:1px solid var(--line);padding-top:var(--s2);margin-top:var(--s2)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,32,26,.96);display:none;align-items:center;justify-content:center;padding:var(--s4)}
.lb.open{display:flex}
.lb img{max-width:min(1100px,92vw);max-height:86vh;object-fit:contain;border-radius:var(--r)}
.lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:1.5rem;line-height:1;display:flex;
  align-items:center;justify-content:center;transition:background .2s}
.lb button:hover{background:var(--brass);border-color:var(--brass);color:#12352B}
.lb .lb-close{top:22px;right:22px}
.lb .lb-prev{left:22px}
.lb .lb-next{right:22px}
.lb .lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);
  font-size:.75rem;letter-spacing:.2em}

/* ---------- leadership profiles ---------- */
.person{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s6);align-items:center}
.person + .person{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}
/* Alternating sides give the page an editorial rhythm rather than a stacked list. */
.person-flip .person-portrait{order:2}
.person-portrait .slot{margin:0}
.person-role{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
  font-weight:600;margin-bottom:var(--s3)}
@media(max-width:900px){
  .person,.person-flip{grid-template-columns:1fr;gap:var(--s4)}
  .person-flip .person-portrait{order:0}
  .person-portrait{max-width:380px}
}

/* ---------- photo slots (placeholder frames) ---------- */
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.slot{aspect-ratio:3/2;border-radius:var(--r);border:1px dashed rgba(176,141,79,.6);background:rgba(176,141,79,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--s3);
  color:var(--ink-soft);font-size:.86rem;gap:8px;overflow:hidden}
.slot strong{color:var(--forest-800);font-family:'Playfair Display',serif;font-size:1.1rem}
.slot.portrait{aspect-ratio:4/5}
.slot.filled{border-style:solid;border-color:var(--line);padding:0;background:none}
.slot.filled img{width:100%;height:100%;object-fit:cover}

/* ---------- contact ---------- */
.contact{background:var(--forest-800);color:#fff}
.cgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s6);align-items:start}
.contact h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:var(--s3)}
.contact .lede{color:rgba(255,255,255,.78);margin-bottom:var(--s4)}
.cinfo{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s4)}
.cinfo li{display:flex;gap:14px;align-items:flex-start}
.cinfo strong{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-2);margin-bottom:4px}
.cinfo span{color:rgba(255,255,255,.9);font-size:.96rem}
form.enquiry{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:var(--s4)}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:13px 15px;border-radius:var(--r);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;font-family:inherit;font-size:.95rem;
  transition:border-color .2s,background .2s}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.36)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);background:rgba(255,255,255,.09)}
.field select option{background:var(--forest-800);color:#fff}
form.enquiry .btn{width:100%}
.form-note{font-size:.76rem;color:rgba(255,255,255,.55);margin-top:var(--s2);text-align:center}
.form-note.ok{color:var(--brass-2)}

/* ---------- footer ---------- */
footer{background:#08201A;color:rgba(255,255,255,.55);padding:var(--s5) 0 var(--s4);font-size:.87rem}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid rgba(255,255,255,.09)}
.fgrid h4{color:#fff;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-family:'Inter',sans-serif;font-weight:600;margin-bottom:var(--s2)}
.fgrid ul{list-style:none;display:grid;gap:9px}
.fgrid a:hover{color:var(--brass-2)}
.fbrand{font-family:'Playfair Display',serif;font-size:1.16rem;color:#fff;margin-bottom:var(--s2)}
.fbot{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;padding-top:var(--s3);font-size:.78rem}

/* ---------- reveal + fab ---------- */
.reveal{opacity:1;transform:none}
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
.fab{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,.3);transition:transform .2s}
.fab:hover{transform:scale(1.08)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .sgrid,.arg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters .btn{grid-column:1/-1}
  .pd-layout{grid-template-columns:1fr;gap:var(--s4)}
  .pd-aside{position:static}
}
@media(max-width:960px){
  :root{--s5:44px;--s6:66px}
  .cgrid,.vgrid{grid-template-columns:1fr;gap:var(--s4)}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr 1fr}
  nav.main{display:none}
  .burger{display:flex}
  /* In the burger menu the submenu is simply always open and indented. A
     tap-to-reveal sub-level hides the five services behind a second tap and
     makes "Services" ambiguous — does tapping it open the list or go to the
     page? Showing them costs one screen of scroll and removes the question. */
  .navdrop{display:block;width:100%}
  .navdrop .caret{display:none}
  .navdrop-menu{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:6px 0 2px 14px;margin-top:8px;background:none;border:0;
    box-shadow:none;backdrop-filter:none;border-left:1px solid rgba(176,141,79,.35);
    border-radius:0;gap:0}
  .navdrop-menu a{padding:10px 0 10px 14px;white-space:normal}
  .navdrop-menu a:hover{background:none}
  .navdrop-menu .sep{display:none}
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .page-hero{padding:126px 0 var(--s4)}
  .pd-gallery{grid-template-columns:1fr}
  .pd-thumbs{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pd-thumb{aspect-ratio:4/3}
}
@media(max-width:600px){
  .sgrid,.arg-grid,.slots,.fgrid,.pgrid{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
  .hero-inner{padding-top:130px;padding-bottom:70px}   /* longhand — see .hero-inner above */
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .feature-list{grid-template-columns:1fr}
  .lb .lb-prev{left:10px}.lb .lb-next{right:10px}

  /* 40px of side padding inside a card on a 360px screen leaves barely 230px
     for the words. */
  .scard,.vcard,.arg{padding:var(--s3)}

  /* The eyebrow is a flex row of a 30px rule and the label. Once the label
     wraps to three lines, centring leaves the rule stranded beside the middle
     one; align it to the first line instead. */
  .eyebrow{align-items:flex-start}
  .eyebrow::before{margin-top:.66em}
  .eyebrow.center{align-items:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}