/* ==========================================================================
   BETH-HARAN GLOBAL GROUPS — page-level modules
   ========================================================================== */

/* ==========================================================================
   Positioning band — replaces the old "Travel Experiences" heading block.
   Offset column widths so it doesn't read as a symmetrical two-up.
   ========================================================================== */

.positioning{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:clamp(36px,7vw,110px);
  align-items:start;
}
.positioning__title{margin-top:26px}
.positioning__aside{
  padding-top:14px;
  border-top:1px solid var(--line);
}
.positioning__aside .prose{margin-top:24px}

.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(56px,6vw,92px);
  border-top:1px solid var(--line);
}
.pillar{
  padding:34px clamp(20px,2.4vw,40px) 10px 0;
  border-right:1px solid var(--line);
}
.pillar:last-child{border-right:0}
.pillar__head{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(1.5rem,2vw,2.05rem);
  line-height:1;
  color:var(--aubergine);
  margin-bottom:15px;
}
.pillar__text{
  font-size:.97rem;
  line-height:1.68;
  color:var(--body);
  max-width:36ch;
}

@media(max-width:1000px){
  .positioning{grid-template-columns:1fr;gap:30px}
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:26px}
  .pillar:last-child{border-bottom:0}
}

/* ==========================================================================
   Tour chapters — alternating editorial rows
   ========================================================================== */

.chapters{display:grid}

.chapter{
  display:grid;
  grid-template-columns:minmax(300px,.9fr) 1.1fr;
  gap:clamp(34px,6vw,100px);
  align-items:center;
  padding-block:clamp(56px,6vw,92px);
  border-bottom:1px solid var(--line);
}
.chapter:last-child{border-bottom:0}
.chapter--flip{grid-template-columns:1.1fr minmax(300px,.9fr)}
.chapter--flip .chapter__media{order:2}

.chapter__media{position:relative}
.chapter__copy{max-width:64ch}

/* Number sits on the image, large and low-contrast — a plate marker, and the
   tours genuinely are an ordered set in the client's own material. */
.chapter__index{
  position:absolute;
  z-index:2;
  left:22px;bottom:10px;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(3.6rem,6vw,6.4rem);
  line-height:1;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 22px rgba(78,4,59,.5);
  pointer-events:none;
}

.chapter__kicker{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.96rem;
  letter-spacing:.2em;
  color:var(--g-text);
}
.chapter__title{margin:18px 0 26px}
.on-dark .chapter{border-bottom-color:var(--line-dark)}

@media(max-width:1000px){
  .chapter,
  .chapter--flip{grid-template-columns:1fr;gap:28px}
  .chapter--flip .chapter__media{order:0}
}

/* ==========================================================================
   Real estate — split panel and land banner
   ========================================================================== */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:640px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:var(--aubergine-deep);
}
.split__media{position:relative;overflow:hidden;min-height:460px}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__copy{
  padding:clamp(34px,4.4vw,76px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.split__copy h3{margin:18px 0 26px;max-width:12ch}

.pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,44px);
  margin-top:clamp(30px,3.4vw,48px);
}
.pair__col{
  border-top:1px solid rgba(255,255,255,.24);
  padding-top:22px;
}
.pair__head{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(1.55rem,2.1vw,2.3rem);
  line-height:.96;
  color:var(--gold);
  background:var(--g-metal);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:16px;
}
.pair__intro{
  font-size:.94rem;
  line-height:1.66;
  color:var(--on-dark-soft);
  margin-bottom:18px;
  max-width:38ch;
}
.pair__list{display:grid;gap:10px}
.pair__list li{
  position:relative;
  padding-left:20px;
  font-size:.95rem;
  line-height:1.5;
  color:#fff;
}
.pair__list li::before{
  content:"";
  position:absolute;
  left:0;top:.66em;
  width:9px;height:1px;
  background:var(--gold);
}

.banner{
  position:relative;
  min-height:clamp(400px,46vw,540px);
  overflow:hidden;
  margin-top:22px;
  display:grid;
  align-items:end;
}
.banner__media{position:absolute;inset:0}
/* Parallax layers need headroom, or the drift reveals the edge of the image */
.banner__media[data-parallax]{top:-8%;height:116%}
.banner__media img{width:100%;height:100%;object-fit:cover}
.banner__media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(78,4,59,.86),rgba(78,4,59,.24) 62%,rgba(78,4,59,.4));
}
.banner__copy{
  position:relative;
  z-index:2;
  padding:clamp(30px,4vw,66px);
  max-width:700px;
  color:#fff;
}
.banner__copy h3{margin:16px 0 18px}

@media(max-width:1000px){
  .split{grid-template-columns:1fr;min-height:0}
  .split__media{min-height:380px}
  .pair{grid-template-columns:1fr}
}

/* ==========================================================================
   Events — photo tiles above written detail
   ========================================================================== */

.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.tiles--three{grid-template-columns:repeat(3,1fr)}
.tiles--three .tile{aspect-ratio:4/5}
.tile{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  color:#fff;
  background:var(--aubergine);
  display:block;
}
.tile img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform 1.5s var(--ease),filter 1s var(--ease);
  filter:saturate(.92) brightness(.86);
}
.tile:hover img{transform:scale(1.09);filter:saturate(1.05) brightness(.96)}
.tile::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(78,4,59,.06) 28%,rgba(78,4,59,.88) 100%);
}
.tile__body{
  position:absolute;
  z-index:2;
  left:0;right:0;bottom:0;
  padding:clamp(20px,1.8vw,30px);
}
.tile__kicker{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.86rem;
  letter-spacing:.2em;
  color:var(--gold-light);
}
.tile__title{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(1.55rem,2.1vw,2.35rem);
  line-height:.94;
  margin-top:10px;
}

.detail-grid--three{grid-template-columns:repeat(3,1fr)!important}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:22px;
}
.detail{
  background:var(--paper);
  padding:clamp(28px,3.4vw,52px);
}
.ground-cream .detail{background:var(--cream)}
.detail h3{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(1.7rem,2.4vw,2.6rem);
  line-height:.96;
  margin-bottom:16px;
  color:var(--ink);
}

@media(max-width:1000px){
  .tiles{grid-template-columns:1fr 1fr}
  .tiles--three{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr}
  .detail-grid--three{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .tiles,.tiles--three{grid-template-columns:1fr}
  .tile,.tiles--three .tile{aspect-ratio:4/3}
}

/* ==========================================================================
   Experience trio — the "why" block
   ========================================================================== */

.trio{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.trio__item{
  border-top:1px solid rgba(255,255,255,.22);
  padding-top:20px;
}
.trio__media{
  aspect-ratio:4/5;
  margin-bottom:22px;
}
.trio__label{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.92rem;
  letter-spacing:.2em;
  color:var(--gold-light);
}
.trio__text{
  margin-top:18px;
  font-size:clamp(1.2rem,1.7vw,1.62rem);
  line-height:1.3;
  color:#fff;
  max-width:26ch;
}

@media(max-width:1000px){.trio{grid-template-columns:1fr;gap:34px}}

/* ==========================================================================
   Gallery — asymmetric mosaic
   ========================================================================== */

.mosaic{
  display:grid;
  grid-template-columns:1.15fr .9fr .9fr;
  grid-auto-rows:clamp(200px,22vw,330px);
  gap:14px;
}
.mosaic__cell{overflow:hidden;position:relative}
.mosaic__cell--tall{grid-row:span 2}
.mosaic__cell--wide{grid-column:span 2}
.mosaic .media{width:100%;height:100%}

@media(max-width:1000px){
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(170px,32vw,240px)}
  .mosaic__cell--tall{grid-row:span 2}
  .mosaic__cell--wide{grid-column:span 2}
}
@media(max-width:620px){
  .mosaic{grid-template-columns:1fr;grid-auto-rows:230px}
  .mosaic__cell--tall,.mosaic__cell--wide{grid-row:auto;grid-column:auto}
}

/* ==========================================================================
   Numbered process — used where content genuinely is sequential
   ========================================================================== */

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.on-dark .steps{border-top-color:var(--line-dark)}
.step{
  padding:32px clamp(18px,2vw,36px) 12px 0;
  border-right:1px solid var(--line);
}
.on-dark .step{border-right-color:var(--line-dark)}
.step:last-child{border-right:0}
.step__no{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.9rem;
  letter-spacing:.2em;
  color:var(--g-text);
  margin-bottom:14px;
}
.step__head{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(1.35rem,1.8vw,1.85rem);
  line-height:1.02;
  margin-bottom:12px;
  color:var(--aubergine);
}
.on-dark .step__head{color:#fff}
.step__text{font-size:.94rem;line-height:1.66;color:var(--body);max-width:32ch}
.on-dark .step__text{color:var(--on-dark-soft)}

@media(max-width:1000px){
  .steps{grid-template-columns:1fr 1fr}
  .step{border-bottom:1px solid var(--line);padding-bottom:24px}
}
@media(max-width:620px){.steps{grid-template-columns:1fr}.step{border-right:0}}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(38px,6vw,92px);
  align-items:start;
}

.contact-block + .contact-block{
  margin-top:34px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.contact-block__head{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.94rem;
  letter-spacing:.2em;
  color:var(--g-text);
  margin-bottom:14px;
}
.contact-block__value{
  font-size:1.28rem;
  line-height:1.5;
  color:var(--ink);
}
.contact-block__value a:hover{color:var(--aubergine)}
.contact-block__note{
  margin-top:8px;
  font-size:.92rem;
  color:var(--body-soft);
}

.form{display:grid;gap:22px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:grid;gap:9px}
.field__label{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.9rem;
  letter-spacing:.18em;
  color:var(--body-soft);
}
.field__input,
.field__select,
.field__area{
  width:100%;
  padding:15px 2px;
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  transition:border-color var(--med) var(--ease);
  appearance:none;
}
.field__area{min-height:132px;resize:vertical;line-height:1.65}
.field__input:focus,
.field__select:focus,
.field__area:focus{
  outline:none;
  border-bottom-color:var(--g-text);
}
.field__select{
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--body-soft) 50%),
                   linear-gradient(135deg,var(--body-soft) 50%,transparent 50%);
  background-position:calc(100% - 13px) 22px,calc(100% - 8px) 22px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:28px;
}
.form__note{
  font-size:.86rem;
  line-height:1.6;
  color:var(--body-soft);
  max-width:52ch;
}
.form__status{
  font-size:.94rem;
  line-height:1.6;
  padding:14px 18px;
  border-left:2px solid var(--gold);
  background:rgba(216,154,70,.09);
  color:var(--ink);
}
.form__status[hidden]{display:none}

.map{
  margin-top:clamp(48px,5vw,80px);
  aspect-ratio:21/9;
  min-height:300px;
  overflow:hidden;
  background:var(--cream);
  border:1px solid var(--line);
}
.map iframe{width:100%;height:100%;border:0;display:block}

@media(max-width:1000px){
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .form__row{grid-template-columns:1fr}
  .map{aspect-ratio:4/3}
}

/* ==========================================================================
   Facts strip — used on About
   ========================================================================== */

.facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line-dark);
}
.fact{
  background:var(--aubergine);
  padding:clamp(28px,3vw,46px) clamp(20px,2vw,34px);
}
.fact__figure{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(2.6rem,4.4vw,4.4rem);
  line-height:.9;
  color:var(--gold-light);
}
.fact__label{
  margin-top:14px;
  font-size:.88rem;
  letter-spacing:.1em;
  line-height:1.5;
  color:var(--on-dark-soft);
  max-width:22ch;
}

@media(max-width:1000px){.facts{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.facts{grid-template-columns:1fr}}


/* Quote line under each of the three points */
.pillar__quote{
  font-style:italic;
  font-size:1.04rem;
  line-height:1.5;
  color:var(--aubergine);
  max-width:32ch;
  margin:0 0 14px;
}
/* Two paragraphs in the lede position */
.lede--stack{font-size:clamp(1rem,1.2vw,1.16rem)}
.lede--stack p + p{margin-top:1.1em}


/* "Who we are": with the old heading gone, the first sentence leads the section */
.positioning__statement{
  margin-top:26px;
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-weight:600;
  font-size:clamp(1.75rem,3.1vw,3.1rem);
  line-height:1.16;
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:24ch;
}


/* "Enquiring about" list on the Contact page (light background, so it needs dark text) */
.contact-list{display:grid;gap:10px}
.contact-list a{font-size:1.04rem;line-height:1.5;color:var(--aubergine)}
.contact-list a:hover,.contact-list a:focus-visible{color:var(--ink)}


/* ==========================================================================
   Testimonials — "Postcards from our clients"
   Cream ground, because the real-estate section above and the destinations
   ticker below are both purple and the run needs breaking.
   Each testimonial is the back of a postcard: airmail band along the top
   edge, the message on the left, and on the right the postage stamp (their
   photo), a round postmark carrying the city, and ruled address lines.
   The cards overlap on a scroll-snap rail like a hand of cards.
   ========================================================================== */

.pc-stage{
  position:relative;
  margin-top:clamp(46px,5vw,76px);
}

/* The rail scrolls; the track is the row inside it. The rail bleeds out to
   the section padding so cards can run off the edge instead of stopping
   short of it. */
.pc-rail{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  /* overflow-x clips vertically too, so the tilt and the hover lift need
     room here or their corners get cut off */
  padding-block:30px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.pc-rail::-webkit-scrollbar{display:none}

/* The site-wide gold focus ring sits at about 1.9:1 on cream, and the rail is
   the one thing here a keyboard lands on. Drawn inside, because the rail runs
   out to the section edges and an outer ring would be clipped. */
.pc-rail:focus-visible{
  outline:2px solid var(--aubergine);
  outline-offset:-2px;
}

.pc-track{
  display:flex;
  align-items:stretch;
  width:max-content;
}

.pc-slot{
  position:relative;              /* so a hovered card can come to the front */
  flex:none;
  width:clamp(380px,38vw,540px);
  scroll-snap-align:center;
}
/* The cards shingle, but only ever across the wide right-hand margin below —
   never far enough to cover the stamp or the address lines */
.pc-slot + .pc-slot{margin-left:clamp(-44px,-3vw,-26px)}

/* --- the postcard ------------------------------------------------------- */

.pc{
  position:relative;
  height:100%;
  min-height:clamp(220px,16vw,250px);
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(18px,1.8vw,30px);
  /* the wide right margin is the strip the next card shingles over */
  padding:30px 46px 26px 28px;
  background:var(--aubergine);
  color:#fff;
  box-shadow:0 10px 26px rgba(78,4,59,.20);
  /* the postal furniture is drawn in hairlines this faint, so the quote
     stays the loudest thing on the card */
  --pc-rule:rgba(212,166,78,.22);
  transform:rotate(-1deg);
  transition:transform var(--med) var(--ease),box-shadow var(--med) var(--ease);
  /* a dark surface: switch the gold tokens the way base.css does */
  --g-text:var(--gold-light);
  --g-metal:var(--gold-metal);
  --g-line:var(--gold-line);
  --g-edge:none;
}
/* Hairline drawn over the airmail band, so the card keeps a crisp edge
   against the cream ground */
.pc::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--gold-dim);
  pointer-events:none;
}

.pc-slot:nth-child(even) .pc{transform:rotate(1deg)}

/* Straighten and lift. Must follow the nth-child rule — same specificity. */
.pc-slot:hover,
.pc-slot:focus-within{z-index:5}
@media(hover:hover){
  .pc-slot:hover .pc{
    transform:rotate(0deg) translateY(-10px);
    box-shadow:0 22px 44px rgba(78,4,59,.32);
  }
}
.pc-slot:focus-within .pc{
  transform:rotate(0deg) translateY(-10px);
  box-shadow:0 22px 44px rgba(78,4,59,.32);
}

/* Airmail edge — gold and purple dashes on cream, as on real airmail paper.
   Kept narrow and finely pitched; at the earlier weight it read as bunting. */
.pc__air{
  position:absolute;
  top:0;left:0;right:0;
  height:5px;
  opacity:.82;
  background:repeating-linear-gradient(45deg,
    var(--gold)      0    6px,
    var(--cream)     6px  12px,
    var(--aubergine) 12px 18px,
    var(--cream)     18px 24px);
}

/* --- message side ------------------------------------------------------- */

.pc__msg{margin:0}
.pc__msg p{
  font-size:clamp(1rem,1.12vw,1.1rem);
  line-height:1.62;
  color:rgba(255,255,255,.93);
  max-width:38ch;
}

/* --- address side ------------------------------------------------------- */

.pc__addr{
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--pc-rule);
  padding-left:clamp(16px,1.6vw,24px);
}

.pc__marks{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  margin-bottom:auto;              /* pins the ruled lines to the bottom */
}

/* Postmark sits left of the stamp and overlaps it, the way an inked one does */
.pc__postmark{
  position:relative;
  z-index:2;
  flex:none;
  width:54px;
  height:54px;
  margin-right:-13px;
  display:grid;
  place-items:center;
  padding:7px;
  border:1px solid var(--gold-dim);
  border-radius:50%;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.56rem;
  letter-spacing:.1em;
  line-height:1.05;
  text-align:center;
  color:var(--gold-light);
  opacity:.62;
  transform:rotate(-9deg);
  overflow:hidden;
}
/* Second ring, as on a real cancellation — solid and fainter; the dashed one
   read as fussy at this size */
.pc__postmark::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid var(--pc-rule);
  border-radius:50%;
}

/* Stamp — a paper mat with perforated edges. The mask is a tiled grid of
   circles (the teeth) unioned with a rectangle inset by one tooth, which
   restores the middle and leaves only the edges scalloped. */
.pc__stamp{
  --tooth:8px;
  position:relative;
  z-index:1;
  flex:none;
  width:66px;
  height:66px;
  padding:5px;
  background:var(--cream);
  transform:rotate(1.5deg);
  -webkit-mask:
    radial-gradient(circle 3.4px,#000 98%,transparent) 0 0/var(--tooth) var(--tooth) repeat,
    linear-gradient(#000 0 0) 50% 50%/calc(100% - var(--tooth)) calc(100% - var(--tooth)) no-repeat;
          mask:
    radial-gradient(circle 3.4px,#000 98%,transparent) 0 0/var(--tooth) var(--tooth) repeat,
    linear-gradient(#000 0 0) 50% 50%/calc(100% - var(--tooth)) calc(100% - var(--tooth)) no-repeat;
  -webkit-mask-composite:source-over;
          mask-composite:add;
}
/* Shown until the client sends a photo. Engraved rather than gilded — a
   polished gold coin here outshouted the testimonial next to it. */
.pc__disc{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  background:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(78,4,59,.25);
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:1.04rem;
  letter-spacing:.08em;
  line-height:1;
  color:var(--aubergine);
}
.pc__disc::before{content:attr(data-initials)}
/* Their photo, once it arrives — it fills the stamp, as a real one does */
.pc__stamp img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Ruled address lines */
.pc__line{
  display:block;
  padding-bottom:7px;
  border-bottom:1px solid var(--pc-rule);
  line-height:1.3;
}
.pc__line + .pc__line{margin-top:11px}
.pc__name{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:1.26rem;
  letter-spacing:.05em;
  color:#fff;
}
.pc__svc{
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:.75rem;
  letter-spacing:.18em;
  color:var(--gold-light);
  opacity:.88;
}

/* --- controls ----------------------------------------------------------- */

.pc-controls{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:24px;
}
/* Nothing to scroll: the buttons and the line have no job to do */
.pc-stage--static .pc-controls{display:none}

.pc-btn{
  flex:none;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--aubergine);
  color:var(--aubergine);
  transition:background var(--fast) var(--ease),
             color var(--fast) var(--ease),
             opacity var(--fast) var(--ease);
}
.pc-btn:hover:not(:disabled),
.pc-btn:focus-visible:not(:disabled){
  background:var(--aubergine);
  color:var(--cream);
}
.pc-btn:disabled{opacity:.32;cursor:default}
.pc-btn:focus-visible{outline-color:var(--aubergine)}

.pc-btn__chev{
  width:9px;
  height:9px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.pc-btn--prev .pc-btn__chev{transform:rotate(-135deg)}

.pc-progress{
  position:relative;
  flex:1;
  height:1px;
  background:var(--line);
  overflow:hidden;
}
.pc-progress__fill{
  position:absolute;
  inset:0;
  background:var(--gold-line-deep);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--med) var(--ease);
}

/* --- entrance -----------------------------------------------------------
   js/testimonials.js adds .is-armed, so with JS off the cards are simply
   visible rather than stuck at zero opacity.                              */

.pc-stage.is-armed .pc-slot{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .72s var(--ease),transform .72s var(--ease);
}
.pc-stage.is-armed.is-shown .pc-slot{opacity:1;transform:none}
.pc-stage.is-armed.is-shown .pc-slot:nth-child(2){transition-delay:70ms}
.pc-stage.is-armed.is-shown .pc-slot:nth-child(3){transition-delay:140ms}
.pc-stage.is-armed.is-shown .pc-slot:nth-child(4){transition-delay:210ms}
.pc-stage.is-armed.is-shown .pc-slot:nth-child(5){transition-delay:280ms}
.pc-stage.is-armed.is-shown .pc-slot:nth-child(6){transition-delay:350ms}
.pc-stage.is-armed.is-shown .pc-slot:nth-child(7){transition-delay:420ms}
.pc-stage.is-armed.is-shown .pc-slot:nth-child(8){transition-delay:490ms}
.pc-stage.is-armed.is-shown .pc-slot:nth-child(9){transition-delay:560ms}
.pc-stage.is-armed.is-shown .pc-slot:nth-child(10){transition-delay:630ms}

/* --- narrower screens --------------------------------------------------- */

@media(max-width:1000px){
  /* No shingling below this, so the card no longer needs the wide right margin */
  .pc-slot{width:clamp(300px,62vw,430px)}
  .pc-slot + .pc-slot{margin-left:16px}
  .pc{padding-right:24px}
}

@media(max-width:620px){
  /* One card at a time, with the next peeking in on either side */
  .pc-slot{width:min(82vw,330px)}
  .pc-slot + .pc-slot{margin-left:14px}
  .pc{
    grid-template-columns:1fr;
    min-height:0;
    padding:26px 20px 20px;
    gap:0;
  }
  .pc__msg p{max-width:none}
  .pc__addr{
    border-left:0;
    border-top:1px solid var(--gold-dim);
    padding-left:0;
    padding-top:18px;
    margin-top:20px;
  }
  .pc__marks{
    justify-content:flex-start;
    margin-bottom:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  /* Leave the cards where they lie — no straighten, no lift */
  .pc-slot:hover .pc,
  .pc-slot:focus-within .pc{transform:rotate(-1deg)}
  .pc-slot:nth-child(even):hover .pc,
  .pc-slot:nth-child(even):focus-within .pc{transform:rotate(1deg)}
}