/* ============================================================
   UNCOVER JORDAN — design tokens
   Palette drawn from Byzantine mosaic tesserae (Madaba, 6th c.)
   ============================================================ */
:root{
  --basalt:#141F1D;
  --basalt-soft:#22312E;
  --limestone:#E9E5DA;
  --limestone-2:#F3F0E8;
  --paper:#FCFBF7;
  --lapis:#1B5E63;
  --lapis-deep:#0E383C;
  --lapis-tint:#D9E7E5;
  --tessera:#C08A2E;
  --tessera-soft:#F7EFDF;
  --olive:#6E7B4B;
  --madder:#8C3B2E;
  --line:#CFCABA;
  --line-soft:#E1DDD0;
  --muted:#5A665F;

  --disp:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Karla",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --gut:clamp(20px,5vw,64px);
  --maxw:1360px;
  --rad:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--basalt);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;margin:0;line-height:1.1;letter-spacing:-.015em}
p{margin:0 0 1em}
a{color:var(--lapis);text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--tessera);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
#quote > .wrap{max-width:1500px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- shared type --- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lapis);margin:0 0 12px;
}
.eyebrow.on-dark{color:var(--tessera)}
h2.big{font-size:clamp(28px,5.2vw,46px);margin-bottom:16px;max-width:20ch}
.lede{font-size:clamp(16px,2.1vw,19px);color:var(--muted);max-width:60ch;margin-bottom:0}

/* --- SIGNATURE: tessera strip --- */
.tess{display:flex;gap:3px;flex-wrap:wrap;margin:0 0 26px}
.tess i{width:10px;height:10px;border-radius:1px;background:var(--line)}
.tess i.a{background:var(--lapis)}
.tess i.b{background:var(--tessera)}
.tess i.c{background:var(--olive)}
.tess i.d{background:var(--madder)}
.tess.light i{background:rgba(255,255,255,.2)}
.tess.light i.a{background:#5FA9A2}
.tess.light i.b{background:var(--tessera)}
.tess.light i.c{background:#9BAA72}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15px;font-weight:600;padding:14px 26px;border-radius:var(--rad);
  border:1.5px solid var(--lapis);background:var(--lapis);color:#fff;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
  text-align:center;
}
.btn:hover{background:var(--lapis-deep);border-color:var(--lapis-deep)}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--tessera);border-color:var(--tessera);color:#2B1D06}
.btn.gold:hover{background:#A9761F;border-color:#A9761F}
.btn.ghost{background:transparent;color:var(--lapis)}
.btn.ghost:hover{background:var(--lapis-tint);border-color:var(--lapis)}
.btn.on-dark{border-color:rgba(255,255,255,.5);background:transparent;color:#fff}
.btn.on-dark:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn.wide{width:100%}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(252,251,247,.94);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line-soft);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:11px;color:var(--basalt)}
.logo-mark{display:grid;grid-template-columns:repeat(3,6px);gap:2.5px;flex:0 0 auto}
.logo-mark i{width:6px;height:6px;border-radius:1px;background:var(--line)}
.logo-mark i:nth-child(1),.logo-mark i:nth-child(5),.logo-mark i:nth-child(9){background:var(--lapis)}
.logo-mark i:nth-child(3),.logo-mark i:nth-child(7){background:var(--tessera)}
.logo-txt{font-family:var(--disp);font-size:19px;line-height:1;letter-spacing:-.02em}
.logo-txt em{font-style:normal;color:var(--lapis)}
.logo-sub{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:3px}

.nav{display:none;align-items:center;gap:26px}
.nav a{font-size:14.5px;color:var(--basalt);font-weight:500;padding:4px 0;border-bottom:1.5px solid transparent}
.nav a:hover{border-bottom-color:var(--tessera)}
.hdr-cta{display:none}
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:40px;padding:0 10px;background:none;border:1px solid var(--line);border-radius:var(--rad);
}
.burger span{display:block;height:1.5px;background:var(--basalt);transition:transform .22s ease,opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mnav{display:none;border-top:1px solid var(--line-soft);background:var(--paper)}
.mnav.open{display:block}
.mnav a{
  display:block;padding:15px var(--gut);font-size:16px;font-weight:500;
  color:var(--basalt);border-bottom:1px solid var(--line-soft);
}
.mnav .m-cta{padding:16px var(--gut) 22px}

@media(min-width:940px){
  .nav{display:flex}
  .hdr-cta{display:inline-flex}
  .burger{display:none}
  .mnav{display:none!important}
}

/* ============ HERO ============ */
.hero{
  position:relative;background:var(--lapis-deep);color:#fff;overflow:hidden;
  padding-top:clamp(56px,10vw,104px);padding-bottom:clamp(48px,8vw,88px);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(47,122,110,.55),transparent 62%),
    radial-gradient(90% 70% at 8% 100%,rgba(192,138,46,.20),transparent 60%);
}
/* mosaic field, decorative */
.hero-mosaic{position:absolute;inset:0;opacity:.13;pointer-events:none}
.hero-in{position:relative;z-index:2}
.hero h1{
  font-size:clamp(34px,7.4vw,68px);font-weight:400;color:#fff;
  max-width:15ch;margin-bottom:20px;letter-spacing:-.025em;
}
.hero h1 em{font-style:normal;color:var(--tessera)}
.hero .sub{font-size:clamp(16px,2.3vw,20px);color:#C6DEDB;max-width:54ch;margin-bottom:30px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}
.hero-btns .btn{flex:1 1 220px}
@media(min-width:600px){.hero-btns .btn{flex:0 0 auto}}

.hero-facts{
  display:grid;gap:1px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--rad);overflow:hidden;
}
.hero-facts div{background:rgba(14,56,60,.72);padding:18px 20px}
.hero-facts .n{font-family:var(--disp);font-size:clamp(19px,3vw,25px);color:#fff;display:block;margin-bottom:5px;letter-spacing:-.02em}
.hero-facts .t{font-size:13.5px;color:#A9C8C5;line-height:1.45}
@media(min-width:720px){.hero-facts{grid-template-columns:repeat(4,1fr)}}

/* ============ SECTIONS ============ */
section{padding-top:clamp(52px,8vw,96px);padding-bottom:clamp(52px,8vw,96px)}
.band-stone{background:var(--limestone)}
.band-dark{background:var(--basalt);color:var(--limestone)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .lede{color:#A4B2AC}

.head{margin-bottom:clamp(30px,4.5vw,48px)}

/* --- why now --- */
.why{display:grid;gap:clamp(26px,4vw,52px)}
@media(min-width:960px){.why{grid-template-columns:1.05fr .95fr;align-items:start}}
.why-list{display:grid;gap:14px}
.why-item{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--rad);
  padding:20px 22px;
}
.why-item h4{font-size:18px;margin-bottom:6px}
.why-item p{font-size:14.5px;color:var(--muted);margin:0}
.why-item.accent{border-left:3px solid var(--tessera)}

.callout{
  border:1px solid var(--line);border-left:3px solid var(--lapis);
  background:var(--limestone-2);padding:20px 22px;border-radius:0 var(--rad) var(--rad) 0;
}
.callout strong{display:block;font-family:var(--disp);font-size:18px;font-weight:500;margin-bottom:7px}
.callout p{font-size:14.5px;color:var(--muted);margin:0}
.callout.warn{border-left-color:var(--tessera);background:var(--tessera-soft)}

/* --- itinerary --- */
.days{display:grid;gap:0;border-top:1px solid var(--line)}
.day{
  display:grid;grid-template-columns:1fr;gap:4px;
  padding:20px 0 20px 20px;border-bottom:1px solid var(--line-soft);position:relative;
}
.day::before{
  content:"";position:absolute;left:0;top:26px;width:8px;height:8px;
  background:var(--tessera);border-radius:1px;
}
.day .dn{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.day h4{font-size:19px;margin-bottom:3px}
.day p{font-size:14.5px;color:var(--muted);margin:0}
.day .ref{font-family:var(--mono);font-size:11.5px;color:var(--lapis);margin-top:5px;display:block}
@media(min-width:760px){
  .day{grid-template-columns:96px 1fr;gap:20px;align-items:start;padding-left:26px}
  .day .dn{padding-top:6px}
}

/* --- sites grid --- */
.sites{display:grid;gap:16px}
@media(min-width:640px){.sites{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.sites{grid-template-columns:repeat(3,1fr)}}
.site{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--rad);
  padding:22px;display:flex;flex-direction:column;
}
.site .flag{
  display:inline-flex;align-self:flex-start;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:20px;
  border:1px solid var(--lapis-tint);background:#EAF3F1;color:var(--lapis);margin-bottom:12px;
}
.site .flag.gold{border-color:#E4CE9C;background:var(--tessera-soft);color:#8A6412}
.site h4{font-size:20px;margin-bottom:8px}
.site p{font-size:14.5px;color:var(--muted);margin:0 0 12px}
.site .verse{
  font-family:var(--disp);font-size:14px;font-style:italic;color:var(--basalt);
  border-top:1px solid var(--line-soft);padding-top:12px;margin-top:auto;
}
.site .verse span{display:block;font-family:var(--mono);font-style:normal;font-size:11px;color:var(--lapis);margin-top:6px;letter-spacing:.06em}

/* --- tiers --- */
.tiers{display:grid;gap:16px}
@media(min-width:880px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
  padding:26px 24px;display:flex;flex-direction:column;
}
.tier.feature{border:2px solid var(--lapis);background:#F4F9F8}
.tier .stars{display:flex;gap:3px;margin-bottom:14px}
.tier .stars i{width:12px;height:12px;border-radius:1px;background:var(--line)}
.tier .stars i.on{background:var(--tessera)}
.tier h3{font-size:23px;margin-bottom:4px}
.tier .cls{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.tier p{font-size:14.5px;color:var(--muted);margin:0 0 16px}
.tier ul{list-style:none;padding:0;margin:0 0 18px;font-size:14px}
.tier li{padding:7px 0 7px 20px;position:relative;border-top:1px solid var(--line-soft);color:var(--muted)}
.tier li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;background:var(--lapis);border-radius:1px}
.tier .foot{margin-top:auto}
.tier .badge{
  display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--lapis);color:#fff;padding:4px 10px;border-radius:20px;margin-bottom:12px;
}

/* --- churches --- */
.church{display:grid;gap:clamp(26px,4vw,48px)}
@media(min-width:960px){.church{grid-template-columns:1fr 1fr;align-items:center}}
.leader-card{
  background:var(--basalt-soft);border:1px solid #33443F;border-radius:var(--rad);padding:26px 24px;
}
.leader-card .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--tessera);margin-bottom:10px}
.leader-card h3{font-size:22px;margin-bottom:14px}
.seatbar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.seatbar i{width:17px;height:17px;border-radius:2px;background:#2E3E3A;border:1px solid #3D4E49}
.seatbar i.on{background:var(--lapis);border-color:#2A7A7F}
.seatbar i.free{background:var(--tessera);border-color:var(--tessera)}
.leader-card p{font-size:14px;color:#A4B2AC;margin:0}

.handles{display:grid;gap:12px}
@media(min-width:560px){.handles{grid-template-columns:1fr 1fr}}
.handle{border-top:1px solid #33443F;padding-top:13px}
.handle strong{display:block;font-family:var(--disp);font-size:16.5px;font-weight:500;color:#fff;margin-bottom:3px}
.handle span{font-size:13.5px;color:#94A39D}

/* --- quote form --- */
.form-shell{display:grid;gap:clamp(24px,4vw,44px)}
@media(min-width:960px){.form-shell{grid-template-columns:1.15fr .85fr;align-items:start}}
.formcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
  padding:clamp(22px,3.5vw,34px);
}
.frow{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:620px){.frow.two{grid-template-columns:1fr 1fr}}
.f label{display:block;font-family:var(--body);font-size:14px;letter-spacing:normal;text-transform:none;color:var(--basalt);margin-bottom:8px}
.f label .opt{color:var(--muted);letter-spacing:0;text-transform:none;font-size:13px}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:15.5px;color:var(--basalt);
  background:var(--limestone-2);border:1px solid var(--line);border-radius:var(--rad);
  padding:13px 14px;transition:border-color .16s ease,background .16s ease;
}
.f textarea{min-height:104px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{background:var(--paper);border-color:var(--lapis);outline:none}
.f input::placeholder,.f textarea::placeholder{color:#9CA7A1}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  border:1.5px solid var(--line);background:var(--limestone-2);border-radius:20px;
  padding:9px 17px;font-size:14px;font-weight:500;color:var(--basalt);
  transition:all .16s ease;
}
.chip:hover{border-color:var(--lapis);background:var(--paper)}
.chip[aria-pressed="true"]{background:var(--lapis);border-color:var(--lapis);color:#fff}

.step2{display:none;border-top:1px dashed var(--line);margin-top:22px;padding-top:22px}
.step2.open{display:block}
.reveal{
  background:none;border:0;padding:0;color:var(--lapis);font-size:14px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}
.form-note{font-size:13px;color:var(--muted);margin:14px 0 0}

.aside-card{background:var(--limestone-2);border:1px solid var(--line-soft);border-radius:var(--rad);padding:22px}
.aside-card + .aside-card{margin-top:14px}
.aside-card h4{font-size:17.5px;margin-bottom:8px}
.aside-card p{font-size:14px;color:var(--muted);margin:0}
.aside-card ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted)}
.aside-card li{margin-bottom:6px}

/* --- faq --- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line-soft)}
summary{
  list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-family:var(--disp);font-size:clamp(17px,2.2vw,20px);font-weight:500;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:20px;color:var(--lapis);font-weight:400;
}
details[open] summary::after{content:"–"}
details .ans{padding:0 0 20px;font-size:15px;color:var(--muted);max-width:72ch}
details .ans p:last-child{margin-bottom:0}

/* --- footer --- */
.ftr{background:var(--basalt);color:#93A29C;padding-top:clamp(44px,6vw,72px);padding-bottom:34px;font-size:14px}
.ftr-top{display:grid;gap:30px;margin-bottom:36px}
@media(min-width:800px){.ftr-top{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ftr h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tessera);margin:0 0 14px;font-weight:500}
.ftr a{display:block;color:#B6C3BD;padding:5px 0}
.ftr a:hover{color:#fff}
.ftr .logo-txt{color:#fff}
.ftr .logo-txt em{color:var(--tessera)}
.ftr-legal{border-top:1px solid #2A3936;padding-top:22px;display:grid;gap:14px;font-size:12.5px;line-height:1.6;color:#7E8D87}
@media(min-width:800px){.ftr-legal{grid-template-columns:1.6fr 1fr}}
.ftr-legal .mono{font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.todo{color:var(--tessera);font-family:var(--mono);font-size:10.5px}

/* sticky mobile CTA */
.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:rgba(252,251,247,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:11px var(--gut);
  transform:translateY(110%);transition:transform .28s ease;
}
.stickycta.show{transform:none}
@media(min-width:940px){.stickycta{display:none}}


/* ===================================================================
   Two journeys
   Cards lead with the difference between the programmes rather than
   what they share, because that is the only thing a reader has to
   decide. Both are eight days, so the choice is a desert night
   against four sites the other does not reach.
   =================================================================== */

.journey-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 760px) {
  .journey-cards { grid-template-columns: 1fr; }
}

.jcard {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.jcard-top { background: var(--lapis-deep); padding: 20px 22px; color: #fff; }
.jcard-top.alt { background: #2A4A3E; }

.jcard-days {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tessera);
  margin: 0 0 6px;
}
.jcard-name {
  font-family: var(--disp);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: #fff;
}

.jcard-body { padding: 18px 22px; flex: 1; }
.jcard-body > p { font-size: 14px; color: var(--muted); margin: 0 0 15px; }

.jcard-hi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jcard-hi li {
  font-size: 13.5px;
  padding-left: 17px;
  position: relative;
  line-height: 1.5;
}
.jcard-hi li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--tessera);
}

.jcard-foot {
  border-top: 1px solid var(--line-soft);
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.jcard-for {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 10px;
}
.jcard-foot a { font-size: 13.5px; font-weight: 600; text-decoration: none; }

/* Scroll target offset so a linked itinerary does not land under the header. */
.itin { scroll-margin-top: 90px; }

/* Mass is offered subject to confirmation, never promised outright --
   arrangements depend on the parish and the season. */
.mass-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A6412;
  background: var(--tessera-soft);
  border: 1px solid #DEC489;
  padding: 3px 9px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 7px !important;
}


/* ===================================================================
   Quote form -- everything visible
   The optional half used to sit behind a link. Five numbered sections
   do the work that hiding did: it is the undifferentiated column that
   feels long, not the number of fields.
   =================================================================== */

.fsec {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lapis);
  margin: 26px 0 13px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.fsec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.sublabel { font-size: 9px !important; letter-spacing: .1em !important; opacity: .75; }

/* Day / month / year and the rooming trio must not stretch to full width. */
.dparts input, .dparts select { width: 100%; }

.frow.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .frow.three { grid-template-columns: 1fr; } }

/* Chips. Radios styled as buttons -- all options visible at once, and one
   tap on a phone rather than the two a <select> costs. */
.chipset { display: flex; flex-wrap: wrap; gap: 7px; }

/* .f label and .f input above force display:block, uppercase and width:100%.
   These sit inside .f, so the chip rules have to out-specify them rather than
   merely come later in the file. */
.f .chipset label.chip,
.chip {
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
  font-family: var(--body);
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  width: auto;
}
.f .chipset label.chip input,
.chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}
.chip span {
  display: inline-block;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--basalt);
  transition: background .12s, border-color .12s;
}
.chip:hover span { border-color: var(--lapis); }
.chip input:checked + span { background: var(--lapis); border-color: var(--lapis); color: #fff; font-weight: 500; }
.chip input:focus-visible + span { outline: 2px solid var(--tessera); outline-offset: 2px; }

/* Segmented control */
.seg { display: inline-flex; }
.seg-b {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 15px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
}
.seg-b:first-child { border-radius: 4px 0 0 4px; }
.seg-b:last-child { border-radius: 0 4px 4px 0; }
.seg-b + .seg-b { margin-left: -1px; }
.seg-b.on { background: var(--lapis); border-color: var(--lapis); color: #fff; position: relative; z-index: 1; }

/* Day / named month / year. A native date input renders in the browser's
   locale, so 09/03/2027 means different things to different readers. */
.dparts { display: grid; grid-template-columns: 74px 1.5fr 92px; gap: 7px; }
@media (max-width: 460px) { .dparts { grid-template-columns: 60px 1fr 74px; } }

/* Hotel tiers as cards. A dropdown reading "Pilgrim - 3 star" tells a pastor
   nothing about what they are choosing between. */
.f .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
@media (max-width: 720px) { .f .tiers { grid-template-columns: 1fr; } }
.f .tiers label.tier {
  display: block;
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
  font-family: var(--body);
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  width: auto;
}
.f .tiers label.tier input {
  position: absolute; opacity: 0; width: 0; height: 0; padding: 0; border: 0; margin: 0;
}
.f .tiers label.tier span {
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 15px;
  background: var(--paper);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  height: 100%;
}
.f .tiers label.tier strong {
  display: block;
  font-family: var(--disp);
  font-size: 17px;
  font-weight: 500;
  color: var(--basalt);
  margin-bottom: 1px;
}
.f .tiers label.tier em {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tessera);
  margin-bottom: 7px;
}
.f .tiers label.tier:hover span { border-color: var(--lapis); }
.f .tiers label.tier input:checked + span { border-color: var(--lapis); border-width: 1.5px; background: #EDF4F3; }
.f .tiers label.tier input:focus-visible + span { outline: 2px solid var(--tessera); outline-offset: 2px; }


/* ===================================================================
   Journey pages
   =================================================================== */
.journey-page { padding: clamp(40px,6vw,72px) 0; }

.journey-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--lapis-deep);
  color: #fff;
  border-radius: 7px;
  padding: 26px 28px;
  margin-top: 40px;
}
.journey-cta h3 {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 6px;
}
.journey-cta p { color: #BFD0CC; font-size: 14px; margin: 0; max-width: 46ch; }
.journey-cta .btn { background: var(--tessera); border-color: var(--tessera); color: #2A1D05; }
.journey-cta .btn:hover { background: #A97622; border-color: #A97622; }

.journey-other {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 22px 24px;
  margin-top: 18px;
  background: var(--paper);
}
.journey-other .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.journey-other h4 { font-family: var(--disp); font-size: 19px; font-weight: 500; margin: 0 0 6px; }
.journey-other p { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; max-width: 60ch; }
.journey-other a { font-size: 13.5px; font-weight: 600; }

@media (max-width: 620px) {
  .journey-cta { padding: 22px; }
  .journey-cta .btn { width: 100%; text-align: center; }
}


/* Extras. Checkbox rows rather than switches: a checkbox is understood
   everywhere and reads correctly to a screen reader without extra work. */
.xrows { display: grid; gap: 2px; }
.f .xrows label.xrow,
.xrow {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  padding: 12px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--paper);
  cursor: pointer;
  margin-bottom: 0;
  font-family: var(--body);
  font-size: 13.5px;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  width: auto;
}
.f .xrows label.xrow input[type="checkbox"],
.xrow input[type="checkbox"] {
  width: 17px; height: 17px; margin: 2px 0 0; padding: 0;
  accent-color: var(--lapis); cursor: pointer;
}
.xrow input[type="hidden"] { display: none; }
.xrow span { color: var(--muted); line-height: 1.5; }
.xrow strong {
  display: block; color: var(--basalt); font-weight: 600;
  font-size: 14px; margin-bottom: 2px;
}
.xrow:hover { border-color: var(--lapis); }
.xrow:has(input:checked) { border-color: var(--lapis); background: #EDF4F3; }


/* --- live brief panel --- */
.form-shell{align-items:start}
@media(min-width:900px){.uj-brief{position:sticky;top:96px}}
.brief-live h4{margin-bottom:3px}
.brief-sub{font-size:13px;color:var(--muted);margin:0 0 16px;line-height:1.55}
.brief-rows{margin:0}
.brief-rows > div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.brief-rows > div:last-of-type{border-bottom:none}
.brief-rows dt{font-size:14px;color:var(--muted);flex:0 0 auto}
.brief-rows dd{font-size:17px;font-weight:500;color:#12403C;margin:0;text-align:right}
.brief-rows dd.empty{font-size:15px;font-weight:400;font-style:italic;color:var(--muted)}
.brief-need,.brief-ready{font-size:13.5px;line-height:1.6;padding:12px 14px;margin-top:16px;border-left:3px solid}
.brief-need{background:#FAF3E4;border-color:#D9A94A;color:#6B4A0B}
.brief-ready{background:#EDF4F3;border-color:var(--lapis);color:#12403C;display:none}
.brief-rows > div.brief-grp{border-bottom:none;padding:16px 0 4px}
.brief-rows > div.brief-grp:first-child{padding-top:0}
.brief-rows > div.brief-grp dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--line)}
.brief-rows dd{overflow-wrap:anywhere}
.brief-extras{margin:0}
.bx-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--line);margin:14px 0 5px}
.bx-head:first-child{margin-top:4px}
.bx-item{display:flex;gap:8px;align-items:baseline;margin:0;padding:4px 0;font-size:15px;color:#12403C}
.bx-item i{font-size:15px;color:var(--lapis);flex:0 0 auto}
.bx-none{margin:4px 0 0;font-size:14px;color:var(--muted);font-style:italic}


/* --- accessible type scale --- */
.f label{font-size:17px;line-height:1.5}
.f label .opt{font-size:15px}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=number],
.f select,.f textarea{font-size:17px}
.f .chip span{font-size:16px}
.xrow span{font-size:15px;line-height:1.55}
.xrow span strong{font-size:17px;display:block;margin-bottom:3px}

/* The small print under an extra: a season, a cap, the days it does not run.
   On its own line and in the warning colour, because these are facts a church
   plans around -- a seasonal gorge and a night that only runs sometimes are
   the difference between a good evening and forty people at a locked gate.
   Left as prose inside the blurb they read as an afterthought, which is
   exactly what they are not. */
.xrow span em.xnote{
  display:block;
  margin-top:6px;
  font-style:normal;
  font-family:var(--mono, "IBM Plex Mono", monospace);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--madder, #8C3B2E);
}
.btn,.btn.ghost{font-size:17px}
.brief-rows dt{font-size:16px}
.brief-rows dd{font-size:19px}
.brief-rows dd.empty{font-size:17px;font-style:normal;color:#6B6862}
.brief-rows > div{padding:13px 0}
.brief-sub{font-size:15px;line-height:1.6}
.brief-need,.brief-ready{font-size:15px;line-height:1.6}
.brief-rows > div.brief-grp dt{font-family:var(--body);font-size:13px;letter-spacing:.09em;font-weight:500;color:#6B6862}
.bx-head{font-family:var(--body);font-size:13px;letter-spacing:.09em;font-weight:500;color:#6B6862;margin:20px 0 8px}
.bx-item{font-size:17px;line-height:1.5;gap:10px;padding:5px 0}
.bx-none{font-size:16px;font-style:normal;color:#6B6862}
.form-note{font-size:15px;line-height:1.6}
.aside-card p{font-size:16px;line-height:1.6}
.aside-card li{font-size:16px;line-height:1.55}
.bx-tick{color:var(--lapis);font-size:17px;line-height:1;flex:0 0 auto}