/* =============================================================
   ENS Immigration Advice — components.css
   Reusable INTERIOR content components (breadcrumb, page hero,
   quick-cards, card grids, info tables, calculators, TOC, FAQ,
   fee accordion, article/review cards, forms, glossary, tabs).
   Loaded on content/interior pages (not strictly needed on the
   homepage, which carries its own section styles).
   ============================================================= */

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  background:var(--paper-dim);
  border-bottom:1px solid var(--line);
}
.breadcrumb ol{
  list-style:none;
  margin:0 auto;
  max-width:var(--maxw);
  padding:12px 32px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:0.03em;
  color:var(--slate-light);
}
.breadcrumb li{display:flex;align-items:center;gap:8px;}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--line);}
.breadcrumb a{color:var(--slate-light);}
.breadcrumb a:hover{color:var(--brass);}
.breadcrumb li[aria-current="page"]{color:var(--ink);}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  background:linear-gradient(160deg,var(--ink) 0%,var(--ink-deep) 100%);
  color:var(--paper);
  padding:64px 0 40px;
}
.page-hero .eyebrow{color:var(--brass-light);}
.page-hero .eyebrow::before{background:var(--brass-light);}
.page-hero h1{
  color:var(--paper);
  font-size:clamp(30px,4vw,48px);
  line-height:1.08;
  max-width:22ch;
  margin-bottom:18px;
}
.page-hero p.lede{
  color:rgba(247,248,245,0.78);
  font-size:17px;
  max-width:60ch;
  margin:0 0 32px;
}
.page-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
/* Compact hero for thin-content / utility pages (legal, sitemap) */
.page-hero--short{padding:40px 0 26px;}
.page-hero--short h1{font-size:clamp(25px,3vw,34px);margin-bottom:8px;}
.page-hero--short p.lede{margin-bottom:0;font-size:15.5px;}

/* ---------- QUICK-CARDS (stat row under hero) ---------- */
.quick-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line-on-ink);
  border:1px solid var(--line-on-ink);
  border-radius:8px;
  overflow:hidden;
  margin-top:40px;
}
.quick-card{
  background:var(--ink-soft);
  padding:22px 22px;
  transition:background-color .28s ease;
}
.quick-card:hover{background:var(--ink-softer);}
.quick-card .qc-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass-light);
  margin-bottom:8px;
}
.quick-card .qc-value{
  font-family:'Bai Jamjuree',sans-serif;
  font-size:22px;
  font-weight:600;
  color:var(--paper);
  margin-bottom:4px;
}
.quick-card p{font-size:12.5px;color:rgba(247,248,245,0.6);margin:0;}

/* ---------- CARD GRID / INFO CARD ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.card-grid.cols-4{grid-template-columns:repeat(4,1fr);}
/* Flex-stretch variant: cards grow to fill every row (incl. the last) — no orphan
   empty cells without adding filler cards. Used on route grids with wide gaps. */
.card-grid.card-grid--flex{display:flex;flex-wrap:wrap;}
.card-grid.card-grid--flex>.info-card{flex:1 1 240px;min-width:0;}
@media (max-width:700px){.card-grid.card-grid--flex>.info-card{flex:1 1 100%;}}
/* --- Content-aware card grid (desktop): columns follow the ACTUAL card count,
   and any partial FINAL ROW stretches to fill the width evenly — never a left-
   aligned orphan / empty trailing cell. 2→2, 3→3, 4→4, 5→3+2(filled), 6→3×2,
   7→4+3(filled), 8→4×2, 9→3×3, 10→5×2, 11→4+4+3(filled), 12→4×3. The explicit
   .cols-* variants keep their columns. Below 861px the responsive rules apply. */
@media (min-width:861px){
  .card-grid:has(> :nth-child(1):last-child){grid-template-columns:minmax(0,560px);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(8):last-child){grid-template-columns:repeat(4,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(9):last-child){grid-template-columns:repeat(3,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(10):last-child){grid-template-columns:repeat(5,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(12):last-child){grid-template-columns:repeat(4,1fr);}
  /* Partial final rows: use a higher-resolution track grid and span each card so
     the last row divides the full width evenly (row 1 = N cards, last row fills). */
  .card-grid:not([class*="cols-"]):has(> :nth-child(5):last-child){grid-template-columns:repeat(6,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(5):last-child) > *{grid-column:span 2;}
  .card-grid:not([class*="cols-"]):has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3;}
  .card-grid:not([class*="cols-"]):has(> :nth-child(7):last-child){grid-template-columns:repeat(12,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(7):last-child) > *{grid-column:span 3;}
  .card-grid:not([class*="cols-"]):has(> :nth-child(7):last-child) > :nth-child(n+5){grid-column:span 4;}
  .card-grid:not([class*="cols-"]):has(> :nth-child(11):last-child){grid-template-columns:repeat(12,1fr);}
  .card-grid:not([class*="cols-"]):has(> :nth-child(11):last-child) > *{grid-column:span 3;}
  .card-grid:not([class*="cols-"]):has(> :nth-child(11):last-child) > :nth-child(n+9){grid-column:span 4;}
  /* --flex variant uses the same content-aware grid (all its children are info-cards). */
  .card-grid.card-grid--flex{display:grid;}
}
.info-card{
  background:var(--cream);
  padding:28px 26px;
  border-top:3px solid transparent;
  transition:box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
/* Image card used to complete a card-grid's final row (no orphan empty cells) */
.info-card.card-image{padding:0;position:relative;min-height:150px;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);border-top:none;}
.info-card.card-image:hover{transform:none;box-shadow:none;}
.info-card.card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.info-card.card-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,45,38,0.32) 0%,rgba(14,45,38,0.6) 55%,rgba(14,45,38,0.9) 100%);z-index:1;}
.info-card.card-image .ci-cap{position:relative;z-index:2;padding:16px 18px;}
.info-card.card-image .ci-cap .ci-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brass-light);margin-bottom:4px;}
.info-card.card-image .ci-cap h3{color:var(--paper);margin:0 0 3px;font-size:15px;line-height:1.25;}
.info-card.card-image .ci-cap p{color:rgba(247,248,245,0.72);font-size:12px;margin:0;max-width:none;}
.info-card:hover{
  box-shadow:0 22px 44px -22px rgba(14,45,38,0.35);
  transform:translateY(-4px);
  border-top-color:var(--brass);
}
.info-card:hover h3{color:var(--brass-dark);}
.info-card .ic-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:12px;
}
.info-card h3{font-size:17px;line-height:1.3;margin:0 0 10px;}
.info-card p{font-size:13.5px;color:var(--slate-light);margin:0 0 14px;}
.info-card .link{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.05em;
  color:var(--brass);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.info-card .link:hover{border-bottom-color:var(--brass);}

/* ---------- INFO TABLE ---------- */
.info-table{
  width:100%;
  border-collapse:collapse;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  font-size:14px;
}
.info-table caption{
  text-align:left;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--brass);
  padding:0 0 12px;
}
.info-table th,
.info-table td{
  text-align:left;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.info-table thead th{
  background:var(--ink);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--paper);
  font-weight:500;
}
.info-table thead th.num{color:var(--paper);}
.info-table tbody tr:last-child td{border-bottom:none;}
.info-table tbody tr{transition:background-color .15s ease;}
.info-table tbody tr:hover td{background:var(--paper-dim);}
.info-table tbody td:first-child{font-weight:600;color:var(--ink);}
.info-table td.num,
.info-table th.num{
  font-family:'IBM Plex Mono',monospace;
  color:var(--brass);
  white-space:nowrap;
  text-align:right;
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---------- CALCULATOR ---------- */
.calculator{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:8px;
  padding:30px 30px 26px;
  max-width:720px;
}
.calculator .calc-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:6px;
}
.calculator h3{font-size:20px;margin:0 0 6px;}
.calculator .calc-intro{font-size:13.5px;color:var(--slate-light);margin:0 0 22px;max-width:60ch;}
.calc-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:14px 0;
  border-top:1px dashed var(--line);
}
.calc-row:first-of-type{border-top:none;}
.calc-row label{font-size:14px;color:var(--slate);flex:1;}
.calc-row .calc-hint{display:block;font-size:12px;color:var(--slate-light);margin-top:2px;}
.calc-row input[type="number"],
.calc-row input[type="text"],
.calc-row select{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  width:170px;
  max-width:48vw;
}
.calc-row input:focus,
.calc-row select:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass);}
.calc-result{
  margin-top:22px;
  padding:20px 22px;
  border-radius:6px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.calc-result .cr-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--slate-light);
}
.calc-result .cr-value{
  font-family:'Bai Jamjuree',sans-serif;
  font-size:26px;
  font-weight:600;
  color:var(--ink);
}
.calc-result.pass{background:#E8F1EC;border-color:#B9D6C7;}
.calc-result.pass .cr-value{color:var(--ink);}
.calc-result.fail{background:#FBEAE3;border-color:#E7B5A0;}
.calc-result.fail .cr-value{color:var(--brass-dark);}
.calc-disclaimer{
  font-size:12px;
  color:var(--slate-light);
  margin:16px 0 0;
  max-width:64ch;
}

/* ---------- CTA STRIP ---------- */
.cta-strip{
  background:var(--ink);
  color:var(--paper);
  border-radius:8px;
  padding:40px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.cta-strip h3,.prose .cta-strip h3{color:var(--paper);font-size:23px;margin:0 0 6px;max-width:24ch;}
.cta-strip p,.prose .cta-strip p{color:rgba(247,248,245,0.9);font-size:14px;margin:0;max-width:46ch;}
.cta-strip .ctas{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- TABLE OF CONTENTS (sticky desktop + mobile) ---------- */
.with-toc{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:56px;
  align-items:start;
}
/* Let grid columns shrink below their content's intrinsic width (e.g. wide tables
   in .table-wrap/.table-scroll), so the content column never overflows the viewport
   on mobile — without min-width:0 the 1fr track keeps the min-content width of a wide
   child and pushes the whole page sideways. */
.with-toc > *,
.layout > *{min-width:0;}
.toc{
  position:sticky;
  top:96px;
  align-self:start;
  border-left:2px solid var(--line);
  padding-left:20px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
}
.toc .toc-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--slate-light);
  margin-bottom:14px;
}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.toc a{
  display:block;
  font-size:13px;
  color:var(--slate-light);
  padding:6px 10px;
  margin-left:-10px;
  border-radius:4px;
  transition:color .15s ease, background-color .15s ease;
}
.toc a:hover{color:var(--ink);background:var(--paper-dim);}
.toc a.active{color:var(--ink);background:var(--paper-dim);font-weight:600;position:relative;}
.toc a.active::before{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--brass);border-radius:2px;}
.toc-mobile{display:none;margin-bottom:32px;}
.toc-mobile summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.toc-mobile summary::-webkit-details-marker{display:none;}
.toc-mobile ul{list-style:none;margin:6px 0 0;padding:14px 4px 4px;display:grid;gap:4px;}
.toc-mobile a{font-size:13.5px;color:var(--slate-light);display:block;padding:6px 4px;}
.toc-mobile a.active{color:var(--brass);font-weight:600;}

/* ---------- FAQ ACCORDION ---------- */
.faq-list{max-width:820px;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 4px;
  font-family:'Bai Jamjuree',sans-serif;
  font-size:18px;
  color:var(--ink);
  font-weight:500;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .icon{
  font-family:'IBM Plex Mono',monospace;
  font-size:18px;
  color:var(--brass);
  flex-shrink:0;
  margin-left:20px;
  transition:transform .2s ease;
}
.faq-item[open] summary .icon{transform:rotate(45deg);}
.faq-item p{
  padding:0 4px 24px;
  margin:0;
  color:var(--slate-light);
  font-size:14.5px;
  max-width:66ch;
}

/* ---------- FEE ACCORDION ---------- */
.fee-accordion{
  max-width:1080px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 28px;
  align-items:start;
}
.fee-col{display:grid;}
.fee-group{border-top:1px solid var(--line);background:var(--cream);}
.fee-group:last-child{border-bottom:1px solid var(--line);}
.fee-group summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 22px;
  font-family:'Bai Jamjuree',sans-serif;
  font-size:16.5px;
  font-weight:600;
  color:var(--ink);
}
.fee-group summary::-webkit-details-marker{display:none;}
.fee-group summary .icon{
  font-family:'IBM Plex Mono',monospace;
  font-size:18px;
  color:var(--brass);
  flex-shrink:0;
  margin-left:20px;
  transition:transform .2s ease;
}
.fee-group[open] summary .icon{transform:rotate(45deg);}
.fee-group-body{padding:0 22px 26px;}
.fee-group-desc{font-size:13px;color:var(--slate-light);max-width:64ch;margin:0 0 18px;}
.fee-list{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper);}
.fee-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:12px 16px;
  border-bottom:1px dashed var(--line);
}
.fee-row:last-child{border-bottom:none;}
.fee-row span:first-child{font-size:13.5px;color:var(--slate);min-width:0;}
.fee-row span:last-child{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;
  font-weight:600;
  color:var(--brass);
  white-space:nowrap;
}

/* ---------- ARTICLE CARDS ---------- */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.article-card{
  border:1px solid var(--line);
  background:var(--cream);
  border-radius:4px;
  overflow:hidden;
  transition:box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.article-card:hover{
  box-shadow:0 22px 44px -22px rgba(14,45,38,0.35);
  transform:translateY(-4px);
  border-color:var(--brass-light);
}
.article-card:hover h3{color:var(--brass-dark);}
.article-thumb{height:150px;background:linear-gradient(135deg,var(--paper-dim),var(--line));background-size:cover;background-position:center;position:relative;}
.article-thumb span{
  position:absolute;bottom:12px;left:14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--brass);background:var(--cream);padding:4px 8px;border-radius:2px;
}
.article-body{padding:22px;}
.article-body time{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate-light);}
.article-body h3{font-size:17px;margin:8px 0 10px;}
.article-body p{font-size:13.5px;color:var(--slate-light);margin:0 0 14px;}
.article-body .link{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--brass);}

/* ---------- TESTIMONIAL / REVIEW CARDS ---------- */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.t-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:4px;
  padding:30px 26px;
  transition:box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.t-card:hover{
  box-shadow:0 22px 44px -22px rgba(14,45,38,0.35);
  transform:translateY(-4px);
  border-color:var(--brass-light);
}
.t-card .quote-mark{font-family:'Bai Jamjuree',sans-serif;font-size:44px;color:var(--brass-light);line-height:1;margin-bottom:6px;display:block;}
.t-card p.quote{font-size:14.5px;color:var(--slate);margin:0 0 20px;}
.t-meta{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:14px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--slate-light);
}
.t-meta strong{color:var(--ink);font-family:'Bai Jamjuree',sans-serif;font-size:13px;font-weight:600;}

/* ---------- FORMS (contact / enquiry) ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;max-width:760px;}
.form-field{display:flex;flex-direction:column;gap:7px;}
.form-field.full{grid-column:1 / -1;}
.form-field label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.form-field label .req{color:var(--brass);}
.form-field input,
.form-field select,
.form-field textarea{
  font-family:'Bai Jamjuree',sans-serif;
  font-size:15px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--cream);
  color:var(--ink);
  width:100%;
}
.form-field textarea{min-height:130px;resize:vertical;}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass);}
.form-field .field-error{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--brass-dark);
  min-height:1em;
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"]{border-color:var(--brass-dark);}
.form-actions{grid-column:1 / -1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.form-note{font-size:12.5px;color:var(--slate-light);max-width:52ch;margin:0;}
.form-status{grid-column:1 / -1;font-size:14px;padding:14px 16px;border-radius:6px;display:none;}
.form-status.show{display:block;}
.form-status.ok{background:#E8F1EC;border:1px solid #B9D6C7;color:var(--ink);}
.form-status.err{background:#FBEAE3;border:1px solid #E7B5A0;color:var(--brass-dark);}

/* ---------- GLOSSARY ---------- */
.glossary-controls{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.glossary-search{
  flex:1;
  min-width:240px;
  font-family:'Bai Jamjuree',sans-serif;
  font-size:15px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--cream);
}
.glossary-search:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass);}
.alpha-nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:30px;}
.alpha-nav a{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--slate);
}
.alpha-nav a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.glossary-group{margin-bottom:40px;}
.glossary-group h2{
  font-family:'IBM Plex Mono',monospace;
  font-size:22px;
  color:var(--brass);
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
  margin-bottom:18px;
}
.glossary-term{
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.glossary-term dt{font-family:'Bai Jamjuree',sans-serif;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.glossary-term dd{margin:0;font-size:14.5px;color:var(--slate-light);max-width:72ch;}
.glossary-term .term-tags{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
.term-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.04em;
  color:var(--brass);
  border:1px solid var(--line);
  border-radius:3px;
  padding:3px 8px;
}
.glossary-empty{display:none;padding:30px 0;color:var(--slate-light);font-size:15px;}

/* ---------- PROSE (long-form guidance body) ---------- */
.prose h2{font-size:clamp(24px,3vw,32px);margin:48px 0 16px;scroll-margin-top:96px;}
.prose h3{font-size:20px;margin:32px 0 12px;scroll-margin-top:96px;}
.prose p{font-size:15.5px;color:var(--slate);margin:0 0 18px;}
.prose ul,.prose ol{font-size:15.5px;color:var(--slate);padding-left:22px;margin:0 0 18px;}
.prose li{margin-bottom:8px;}
.prose a:not(.btn):not(.link){color:var(--brass);border-bottom:1px solid var(--line);}
.prose a:not(.btn):not(.link):hover{border-bottom-color:var(--brass);}
.prose strong{color:var(--ink);}
.page-updated{font-size:13.5px;color:var(--slate);background:var(--sand,#f6f2ec);border-left:3px solid var(--brass);padding:11px 15px;border-radius:6px;margin:0 0 22px;max-width:68ch;}
.page-updated strong{color:var(--ink);}
.journey-steps{counter-reset:js;list-style:none;margin:0 0 10px;padding:0;max-width:70ch;}
.journey-steps li{position:relative;padding:11px 0 11px 42px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);font-size:14.5px;}
.journey-steps li:last-child{border-bottom:none;}
.journey-steps li::before{counter-increment:js;content:counter(js);position:absolute;left:0;top:9px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;}
.journey-steps li span{display:block;font-weight:400;font-size:13px;color:var(--slate-light);margin-top:3px;}
.page-byline{font-size:13.5px;color:var(--slate);background:var(--sand,#f6f2ec);border-left:3px solid var(--brass);padding:12px 16px;border-radius:6px;margin:0 0 22px;}
.page-byline p{margin:0;max-width:none;}
.page-byline .pb-by{color:var(--slate);}
.page-byline .pb-dates{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.02em;color:var(--slate-light);margin-top:5px;}
.page-byline .pb-note{margin-top:8px;line-height:1.55;}
.page-byline strong{color:var(--ink);}
.disclaimer{font-size:13px;line-height:1.6;color:var(--slate);border-top:1px solid var(--line);padding-top:16px;margin:30px auto 0;max-width:68ch;}
.disclaimer strong{color:var(--ink);}

/* ---- Section heading icons (family-visa style) ---- */
h2:has(> .sec-icon){display:flex;align-items:center;gap:12px;}
.sec-icon{width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink);}
.sec-icon svg{width:15px;height:15px;}
.section-intro{font-size:15px;color:var(--slate-light);margin:-2px 0 18px;}

/* ---------- Shared services grid (home + /visas/ category cards) ---------- */
.services-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.service-card{background:var(--cream);padding:30px 24px;position:relative;overflow:hidden;cursor:pointer;transition:background-color .28s ease, transform .28s ease, box-shadow .28s ease;z-index:0;}
.service-card::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.4,0,.2,1);z-index:-1;}
.service-card:hover::before,.service-card:focus-within::before{transform:scaleX(1);}
.service-card:hover,.service-card:focus-within{box-shadow:0 22px 44px -22px rgba(14,45,38,0.45);}
.service-card:hover h3,.service-card:focus-within h3{color:var(--paper);}
.service-card:hover p,.service-card:focus-within p{color:rgba(247,248,245,0.68);}
.service-card:hover .link,.service-card:focus-within .link{color:var(--brass-light);border-bottom-color:var(--brass-light);}
.service-card:hover .service-icon,.service-card:focus-within .service-icon{border-color:var(--brass-light);color:var(--brass-light);background:transparent;}
.service-card:hover .tab,.service-card:focus-within .tab{background:var(--brass);color:var(--ink);}
.service-card .tab{position:absolute;top:0;left:24px;transform:translateY(-1px);background:var(--ink);color:var(--paper);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.1em;padding:4px 10px;border-radius:0 0 3px 3px;transition:background-color .28s ease, color .28s ease;}
.service-card h3{font-size:16.5px;line-height:1.25;margin:24px 0 10px;transition:color .28s ease;}
.service-card p{font-size:13px;line-height:1.5;color:var(--slate-light);margin:0 0 16px;transition:color .28s ease;}
.service-card .link{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.05em;color:var(--brass);border-bottom:1px solid transparent;transition:color .28s ease, border-color .28s ease;}
.service-icon{width:38px;height:38px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bai Jamjuree',sans-serif;font-size:12.5px;letter-spacing:0.01em;color:var(--ink);transition:color .28s ease, border-color .28s ease, background-color .28s ease;}
.service-image-card{grid-column:span 1;padding:0;cursor:default;background:linear-gradient(115deg,var(--ink) 0%,var(--ink-deep) 100%);display:flex;align-items:flex-end;overflow:hidden;}
.service-image-card::before{content:none;}
.service-image-card .skyline-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;z-index:0;}
.service-image-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,45,38,0.42) 0%,rgba(14,45,38,0.6) 48%,rgba(14,45,38,0.92) 100%);z-index:1;}
.service-image-caption{position:relative;z-index:2;padding:26px 28px;}
.service-image-caption h3{color:var(--paper);font-size:19px;margin:0 0 4px;}
.service-image-caption p{color:rgba(247,248,245,0.65);font-size:13px;margin:0;}
@media (max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr);}.service-image-card{grid-column:span 2;}}
@media (max-width:700px){.services-grid{grid-template-columns:1fr;}.service-image-card{grid-column:span 1;min-height:200px;}}
@media (prefers-reduced-motion:reduce){.service-card,.service-card::before,.service-card h3,.service-card p,.service-card .link,.service-card .service-icon,.service-card .tab{transition:none !important;}}

/* =============================================================
   UI WIDGET LIBRARY (opt-in, progressive-enhancement)
   Lightweight, token-driven, mobile/tablet-first. No libraries.
   Animated widgets stay inert until components.js adds .is-in.
   ============================================================= */

/* ---- Section title ---- */
.section-title{margin:0 0 22px;max-width:70ch;}
.section-title .eyebrow{margin-bottom:8px;}
.section-title h2{margin:0 0 8px;}
.section-title .lead{font-size:16px;color:var(--slate-light);margin:0;line-height:1.6;}
.section-title--center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---- Divider & Spacer ---- */
.divider{border:0;border-top:1px solid var(--line);margin:28px 0;}
.divider--dotted{border-top-style:dotted;}
.divider--label{display:flex;align-items:center;gap:14px;border:0;color:var(--slate-light);font:600 12px/1 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.14em;text-transform:uppercase;}
.divider--label::before,.divider--label::after{content:"";flex:1;height:1px;background:var(--line);}
.spacer{display:block;height:32px;}
.spacer-sm{height:16px;}.spacer-lg{height:56px;}.spacer-xl{height:88px;}

/* ---- Reusable Tabs (horizontal + vertical) ---- */
.tabs{margin:22px 0;}
.tablist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.tab{appearance:none;background:var(--cream);border:1px solid var(--line);padding:9px 17px;font:600 14px/1.2 inherit;color:var(--slate-light);cursor:pointer;border-radius:999px;transition:color .15s,border-color .15s,background .15s;}
.tab:hover{color:var(--ink);border-color:var(--ink-softer);}
.tab[aria-selected="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink);}
.tab:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
.tabpanel{animation:tabfade .25s ease;}
.tabpanel[hidden]{display:none;}
/* Tab-panel lists (e.g. Issues / Evidence) match the body text size and gain a
   left indent, rather than inheriting the browser-default 16px flush-left list */
.tabpanel .ic-list{font-size:14.5px;padding-left:24px;margin:0;}
.tabpanel .ic-list li{font-size:14.5px;margin-bottom:6px;}
@keyframes tabfade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.tabs--vertical{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:24px;align-items:start;}
.tabs--vertical .tablist{flex-direction:column;margin:0;gap:6px;}
.tabs--vertical .tab{text-align:left;font-size:12px;}
.tabpanel .tab-body{margin:0;font-size:14.5px;line-height:1.65;color:var(--slate);}
@media(max-width:680px){.tabs--vertical{grid-template-columns:1fr;}.tabs--vertical .tablist{flex-direction:row;flex-wrap:wrap;}}
/* Auto-generated tabs: stack the rail on top when the container cell is too
   narrow for a usable side panel (independent of viewport width). */
.ltabs-ctx{container-type:inline-size;}
@container (max-width:540px){.tabs--vertical{grid-template-columns:1fr;}.tabs--vertical .tablist{flex-direction:row;flex-wrap:wrap;}}

/* ---- Toggle (standalone collapsible) ---- */
.toggle{border:1px solid var(--line);border-radius:var(--radius);margin:12px 0;background:var(--cream);}
.toggle>summary{list-style:none;cursor:pointer;padding:14px 18px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px;}
.toggle>summary::-webkit-details-marker{display:none;}
.toggle>summary .icon{transition:transform .2s;font-size:18px;color:var(--brass);flex:none;}
.toggle[open]>summary .icon{transform:rotate(45deg);}
.toggle .toggle-body{padding:0 18px 16px;color:var(--slate);font-size:15px;line-height:1.65;}

/* ---- Icon List ---- */
.icon-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px;}
.icon-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--slate);line-height:1.55;}
.icon-list .ico,.icon-list li>svg{flex:none;width:20px;height:20px;margin-top:1px;}
.icon-list--check .ico,.icon-list--check li>svg{color:var(--sage);}
.icon-list--cross .ico,.icon-list--cross li>svg{color:var(--brass);}
.icon-list--dot .ico,.icon-list--dot li>svg{color:var(--brass);}
.icon-list--cols{grid-template-columns:1fr 1fr;gap:10px 26px;}
@media(max-width:560px){.icon-list--cols{grid-template-columns:1fr;}}

/* ---- Timeline ---- */
.timeline{position:relative;margin:20px 0;padding-left:6px;list-style:none;}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line);}
.timeline-item{position:relative;padding:0 0 22px 34px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--cream);border:3px solid var(--brass);box-shadow:0 0 0 3px var(--paper);}
.timeline-item .tl-time{font:600 12px/1 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.06em;color:var(--brass-dark);text-transform:uppercase;margin-bottom:4px;}
.timeline-item .tl-title{font-weight:600;color:var(--ink);margin:0 0 4px;font-size:16px;}
.timeline-item .tl-body{margin:0;color:var(--slate);font-size:14.5px;line-height:1.6;}

/* ---- Step process (connected, numbered) ---- */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;margin:22px 0;counter-reset:step;}
.steps .step{position:relative;padding:0 16px;text-align:center;}
.steps .step::before{content:"";position:absolute;top:19px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0;}
.steps .step:first-child::before{display:none;}
.steps .step .step-num{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 12px;}
.steps .step h4{margin:0 0 4px;font-size:15px;color:var(--ink);}
.steps .step p{margin:0;font-size:13.5px;color:var(--slate-light);line-height:1.5;}
@media(max-width:680px){.steps{grid-auto-flow:row;grid-auto-columns:auto;gap:0;}.steps .step{display:grid;grid-template-columns:40px 1fr;gap:0 16px;text-align:left;padding:0 0 22px;}.steps .step::before{top:40px;left:19px;width:2px;height:100%;}.steps .step .step-num{margin:0;}.steps .step h4,.steps .step p{grid-column:2;}}

/* ---- Counter / stat row ---- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin:24px 0;}
.counter{text-align:center;}
.counter .counter-num{font:700 clamp(30px,5vw,44px)/1 var(--mono,'IBM Plex Mono',monospace);color:var(--ink);letter-spacing:-.01em;}
.counter .counter-num .suffix,.counter .counter-num .prefix{color:var(--brass);}
.counter .counter-label{margin-top:6px;font-size:14px;color:var(--slate-light);}

/* ---- Progress bar / skill bar ---- */
.progress{position:relative;height:10px;background:var(--paper-dim);border-radius:999px;overflow:hidden;margin:8px 0;}
.progress-bar{height:100%;width:0;background:var(--brass);border-radius:999px;transition:width 1s cubic-bezier(.22,1,.36,1);}
.progress.is-in .progress-bar{width:var(--val,0%);}
.skillbar{margin:16px 0;}
.skillbar .skillbar-head{display:flex;justify-content:space-between;font-size:14px;color:var(--ink);font-weight:600;margin-bottom:6px;}
.skillbar .skillbar-head .pct{color:var(--brass-dark);font-family:var(--mono,'IBM Plex Mono',monospace);}

/* ---- Circular progress (SVG ring) ---- */
.circle-progress{display:inline-flex;flex-direction:column;align-items:center;gap:10px;}
.circle-progress svg{transform:rotate(-90deg);}
.circle-progress .ring-track{stroke:var(--paper-dim);}
.circle-progress .ring-fill{stroke:var(--brass);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);}
.circle-progress .ring-label{font:700 22px/1 var(--mono,'IBM Plex Mono',monospace);fill:var(--ink);transform:rotate(90deg);transform-origin:center;}
.circle-progress .circle-cap{font-size:14px;color:var(--slate-light);}

/* ---- Button variants ---- */
.btn-icon{display:inline-flex;align-items:center;gap:8px;}
.btn-icon svg{width:18px;height:18px;flex:none;}
.btn-icon--round{padding:0;width:44px;height:44px;justify-content:center;border-radius:50%;}
.btn-gradient{background:linear-gradient(135deg,var(--brass),var(--brass-dark));color:var(--paper);border:0;}
.btn-gradient:hover{filter:brightness(1.06);}
.dual-btn{display:inline-flex;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 0 var(--line);}
.dual-btn .btn{border-radius:0;}
.dual-btn .btn+.btn{border-left:1px solid rgba(255,255,255,.25);}

/* ---- Social share ---- */
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0;}
.share .share-label{font-size:13px;color:var(--slate-light);margin-right:2px;}
.share a,.share button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--cream);color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;}
.share a:hover,.share button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px);}
.share svg{width:17px;height:17px;}
.share .copied{position:relative;}
.share .copied::after{content:"Copied";position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:11px;padding:3px 7px;border-radius:var(--radius);white-space:nowrap;}

@media (prefers-reduced-motion:reduce){
  .tabpanel{animation:none;}
  .progress-bar,.circle-progress .ring-fill{transition:none;}
  .share a,.share button{transition:none;}
}

/* ---------- Universal keyboard focus ring (shared) ----------
   The brass :focus-visible ring was defined only in family.css, so lean-
   template reading pages (Skilled Worker, Sponsor) had no consistent focus
   indicator. Sourced here (loaded on every reading page) so keyboard focus is
   visibly indicated on all pages, in both light and dark (brass reads on both).
   Element-specific :focus-visible rules keep higher specificity and still win. */
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:2px;}

/* ---------- READING TOOLS (reading time + A−/A/A+ text size) ----------
   Injected by main.js into .content on reading pages. Lives here (not
   family.css) so ALL reading clusters are styled — incl. Skilled Worker
   and Sponsor, which don't load family.css. */
.reading-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 24px;padding:9px 14px;background:var(--cream);border:1px solid var(--line);border-radius:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--slate);}
.reading-tools .rt-time{display:inline-flex;align-items:center;gap:6px;}
.reading-tools .rt-time b{color:var(--ink);font-weight:600;}
.reading-tools .rt-group{display:inline-flex;align-items:center;gap:6px;margin-left:auto;}
.reading-tools .rt-label{color:var(--slate-light);}
.reading-tools .rt-btn{min-width:30px;height:28px;padding:0 8px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:4px;font-family:'Bai Jamjuree',sans-serif;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:border-color .15s ease,color .15s ease;}
.reading-tools .rt-btn:hover{border-color:var(--brass);color:var(--brass);}
.reading-tools .rt-btn:focus-visible{outline:2px solid var(--brass);outline-offset:1px;}
.reading-tools .rt-btn:disabled{opacity:0.4;cursor:default;border-color:var(--line);color:var(--slate-light);}
html.rt-scaled .content section p,
html.rt-scaled .content section li,
html.rt-scaled .content section summary{font-size:calc(15.5px * var(--reading-scale,1));line-height:1.7;}
@media (max-width:640px){ .reading-tools{font-size:10px;} .reading-tools .rt-group{margin-left:0;} }

/* ---------- PRINT: hide the reading-tools UI control ---------- */
@media print { .reading-tools{display:none !important;} }

/* ============ Routes-to-citizenship overview map (citizenship hub) ============ */
.route-map-legend{display:flex;gap:22px;flex-wrap:wrap;margin:6px 0 14px;font-size:13px;color:var(--slate);}
.rm-key{display:inline-flex;align-items:center;gap:8px;}
.rm-key .rm-dot{position:static;margin:0;}
.route-map{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 6px;}
.rm-lane{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:15px 16px 12px;min-width:0;}
.rm-lane-h{font:600 12.5px/1.25 inherit;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin:0 0 12px;padding-bottom:9px;border-bottom:2px solid var(--brass);}
.rm-lane ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.rm-lane li{position:relative;padding-left:20px;font-size:13px;line-height:1.5;color:var(--slate);overflow-wrap:anywhere;}
.rm-dot{position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--brass);}
.rm-apply .rm-dot{background:transparent;border:2px solid var(--ink-softer);width:11px;height:11px;}
.rm-ref{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate-light);margin-top:1px;}
.rm-note{font-size:12.5px;color:var(--slate-light);margin:14px 0 0;max-width:82ch;}
@media (max-width:980px){.route-map{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.route-map{grid-template-columns:1fr;}}

/* ---------- READING MEASURE (readability) ---------- */
/* Cap body-text line length to a comfortable ~68-char measure so long lines
   don't tire the eye. em-based so it holds at any A-/A/A+ text-size. Full-width
   elements (tables, cards, hero, info-boxes, CTA strips) keep their own widths. */
/* Applied only inside .with-toc (the sidebar layout, ~640px column) so the
   measure is a gentle cap there. Wide single-column pages (about, advice,
   legal) are NOT constrained — their text fills the column to match headings. */
.with-toc .content p, .with-toc .content ul, .with-toc .content ol,
.with-toc .prose p, .with-toc .prose ul, .with-toc .prose ol { max-width: 36em; }
/* Block callouts span the full content column, not the reading measure */
.key-points ul, .key-points ol, .page-byline p, .page-byline ul, .page-byline ol { max-width: none; }
/* Legal pages: dense policy text in a wide single column reads better capped to
   a comfortable reading column (the whole .prose block, so text fills it). */
.prose.reading-column { max-width: 720px; }
/* ---------- LEAD PARAGRAPH (readability) ---------- */
/* The opening/intro paragraph of a content section stands out from body copy:
   larger, a touch more line-height and breathing room. Applies to the CONTENT
   lede on all pages (family + lean); the page-hero lede is styled separately. */
.content p.lede{font-size:17.5px;line-height:1.6;margin:0 0 20px;}
@media (max-width:640px){ .content p.lede{font-size:16.5px;} }
/* ---------- KEY POINTS / "IN BRIEF" CALLOUT ---------- */
/* Short scannable summary at the top of a long guide. Distils points already
   made in the body (never new advice). Aligned to the reading measure. */
.key-points{background:var(--paper-dim);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:8px;padding:18px 22px;margin:0 0 26px;}
.key-points .kp-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--brass-dark);font-weight:600;margin:0 0 10px;display:flex;align-items:center;gap:8px;}
.key-points .kp-label svg{width:15px;height:15px;flex:none;}
.key-points ul{margin:0;padding-left:20px;max-width:none;}
.key-points li{font-size:15px;color:var(--slate);margin-bottom:7px;line-height:1.5;}
.key-points li:last-child{margin-bottom:0;}

/* ---------- Booking page layout (calendar + details) ---------- */
/* Two columns on desktop; stacks to one on tablet/mobile so the Cal.com
   calendar gets full width instead of being squeezed by the details box. */
.book-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start;}
.bl-how-mobile{display:none;}
@media (max-width:860px){
  .book-layout{grid-template-columns:1fr;gap:28px;}
  .bl-how-mobile{display:block;}          /* show "How it works" above the calendar */
  .book-layout .bl-how-desktop{display:none;} /* hide the sidebar copy on mobile */
}

/* ---------- Floating contact button (WhatsApp + Call) ---------- */
/* Injected by main.js on every page. Bottom-left to clear the
   bottom-right back-to-top button. Labelled pills on desktop,
   compact icon circles on mobile. */
.contact-fab{position:fixed;left:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px;}
.contact-fab a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 13px;border-radius:999px;font-family:'Bai Jamjuree',system-ui,sans-serif;font-size:13.5px;font-weight:600;line-height:1;text-decoration:none;box-shadow:0 10px 26px -10px rgba(14,45,38,0.55);transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;}
.contact-fab a:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(14,45,38,0.6);filter:brightness(1.04);}
.contact-fab a:focus-visible{outline:3px solid var(--brass);outline-offset:2px;}
.contact-fab svg{width:20px;height:20px;flex:none;}
.contact-fab .cf-wa{background:#25D366;color:#fff;}
.contact-fab .cf-call{background:var(--ink,#173F35);color:var(--paper,#F7F8F5);}
@media (max-width:640px){
  .contact-fab{left:14px;bottom:14px;gap:9px;}
  .contact-fab a{padding:0;width:50px;height:50px;justify-content:center;border-radius:50%;}
  .contact-fab .cf-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
/* ---------- Glossary: bilingual (EN + Türkçe) + scope + cross-links ---------- */
.glossary-letter{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.18em;color:var(--brass);font-weight:600;margin:30px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line,#e6e1d8);}
.glossary-term dd .gloss-en{display:block;}
.gloss-tr{display:block;margin-top:6px;font-size:14px;color:var(--slate,#5b6b64);line-height:1.5;}
.gloss-lang{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;background:var(--ink,#173F35);color:var(--paper,#F7F8F5);border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:1.5px;}
.gloss-note{display:block;margin-top:7px;font-size:13.5px;color:var(--slate,#5b6b64);}
.gloss-note::before{content:'In practice — ';font-weight:600;color:var(--ink,#173F35);}
.gloss-scope{display:block;margin-top:9px;font-size:13px;background:var(--sand,#F5EFE7);border-left:3px solid var(--brass);padding:9px 13px;border-radius:0 6px 6px 0;color:var(--ink,#173F35);line-height:1.5;}
.gloss-link{display:inline-block;margin-top:9px;font-size:13.5px;font-weight:500;}
.glossary-term dt .gloss-tag{display:inline-block;margin-left:9px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-dark,#B6533F);border:1px solid var(--brass-light,#E29581);border-radius:4px;padding:1px 6px;vertical-align:2px;font-weight:500;}
/* ---------- Language switch pill (EN <-> TR, in page-hero) ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:9px;margin:2px 0 18px;padding:11px 20px;border:0;border-radius:999px;background:var(--brass,#D26750);color:var(--cream,#FFF8F2);font-family:'Bai Jamjuree',system-ui,sans-serif;font-size:15px;font-weight:700;line-height:1;letter-spacing:.01em;text-decoration:none;box-shadow:0 8px 22px -8px rgba(210,103,80,0.75);transition:background .15s ease,transform .15s ease,box-shadow .15s ease;}
.lang-switch:hover,.lang-switch:focus-visible{background:var(--brass-dark,#B6533F);transform:translateY(-2px);box-shadow:0 13px 30px -8px rgba(210,103,80,0.9);}
.lang-switch svg{width:18px;height:18px;flex:none;}
.lang-switch .ls-arrow{font-weight:600;}
@media (max-width:640px){ .lang-switch{font-size:15px;padding:12px 20px;} }

/* ---------- Language suggestion banner (soft, hreflang-driven) ---------- */
.lang-suggest{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;background:var(--ink,#173F35);color:var(--paper,#F7F8F5);padding:11px 16px;font-family:'Bai Jamjuree',system-ui,sans-serif;font-size:14.5px;line-height:1.35;text-align:center;position:relative;z-index:101;}
.lang-suggest .ls-ico{display:inline-flex;}
.lang-suggest .ls-ico svg{width:18px;height:18px;}
.lang-suggest .ls-msg{font-weight:500;}
.lang-suggest .ls-go{display:inline-flex;align-items:center;gap:6px;background:var(--brass,#D26750);color:#fff;padding:7px 16px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 6px 16px -8px rgba(210,103,80,0.85);transition:background .15s ease;}
.lang-suggest .ls-go:hover,.lang-suggest .ls-go:focus-visible{background:var(--brass-dark,#B6533F);}
.lang-suggest .ls-x{background:transparent;border:0;color:rgba(247,248,245,0.72);font-family:inherit;font-size:13px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:6px 4px;}
.lang-suggest .ls-x:hover,.lang-suggest .ls-x:focus-visible{color:var(--paper,#F7F8F5);}
@media (max-width:640px){ .lang-suggest{font-size:14px;padding:12px 14px;gap:7px 12px;} }