/* =========================
   Follincraft - Styles (Clean Rewrite)
   Purpose:
   - One source of truth for card thumbs (3:2 everywhere)
   - Remove conflicting/duplicated overrides
   ========================= */

:root{
  --accent:#ea580c;
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --line:#2a2f36;
  --panel:#0f1115;
  --bg:#0a0c0f;

  --r:12px;
  --r-sm:10px;
  --navh:68px;

  --wrap:1100px;
  --shadow:0 10px 24px rgba(0,0,0,.35);
}

/* =========================================================
   TOOLS + FIELD REFERENCES
   ========================================================= */
body.tool-reference-article{
  background:#050608;
}

.field-reference-page{
  padding-top:var(--navh);
  background:
    linear-gradient(180deg, rgba(234,88,12,.08), rgba(234,88,12,0) 280px),
    #050608;
}

.field-reference-hero{
  padding:34px 0 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.field-reference-hero h1{
  max-width:900px;
  margin:0;
  color:#fff;
  font-size:clamp(34px, 5vw, 58px);
  line-height:.98;
  letter-spacing:0;
}

.field-reference-hero .lead{
  max-width:760px;
  margin:14px 0 0;
  color:#c2c8d0;
  font-size:17px;
  line-height:1.55;
}

.field-reference-content{
  padding:28px 0 54px;
}

.field-reference-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.field-reference-card{
  min-width:0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(15,17,22,.92);
  box-shadow:none;
}

.field-reference-card.strong{
  border-color:rgba(234,88,12,.78);
  background:
    linear-gradient(180deg, rgba(234,88,12,.14), rgba(234,88,12,.035)),
    rgba(15,17,22,.96);
}

.field-reference-card.span{
  grid-column:1 / -1;
}

.field-reference-card h2{
  margin:0 0 10px;
  color:var(--accent);
  font-size:18px;
  line-height:1.15;
}

.field-reference-card p,
.field-reference-card li{
  color:#e4e8ee;
  line-height:1.55;
}

.field-reference-card p{
  margin:0;
}

.field-reference-card ul{
  margin:0;
  padding-left:19px;
}

.field-reference-card li{
  margin:6px 0;
}

.field-source-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.field-source-list a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(234,88,12,.62);
  border-radius:8px;
  color:var(--accent);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}

.field-source-list a:hover,
.field-source-list a:focus-visible{
  background:var(--accent);
  color:#000;
}

body:not([data-page-id]) .tool-page{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 260px),
    var(--bg);
}

body:not([data-page-id]) .tool-intro{
  border-bottom:1px solid rgba(255,255,255,.08);
}

body:not([data-page-id]) .tool-intro .eyebrow{
  color:var(--accent) !important;
}

body:not([data-page-id]) .critter-app .tool-intro .eyebrow,
body:not([data-page-id]) .plant-app .tool-intro .eyebrow,
body .critter-app .tool-intro .eyebrow,
body .plant-app .tool-intro .eyebrow{
  color:#f3f4f6 !important;
}

body:not([data-page-id]) .critter-app .tool-intro,
body:not([data-page-id]) .plant-app .tool-intro,
body .critter-app .tool-intro,
body .plant-app .tool-intro{
  border-bottom:0 !important;
}

body:not([data-page-id]) .tool-wrap > .card,
body:not([data-page-id]) .tool-page .card{
  border-radius:10px !important;
  box-shadow:none !important;
}

body:not([data-page-id]) .tool-wrap input,
body:not([data-page-id]) .tool-wrap select,
body:not([data-page-id]) .tool-wrap textarea{
  border-radius:8px !important;
}

@media (max-width:760px){
  .field-reference-grid{
    grid-template-columns:1fr;
  }

  .field-reference-hero{
    padding:26px 0 18px;
  }

  .field-reference-card{
    padding:16px;
  }
}

.service-card span{
  color:var(--accent);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
}

.service-card strong{
  color:#fff;
  font-size:18px;
  line-height:1.15;
}

body[data-page-id="home"] .home-service-article-shell{
  margin:0 0 10px;
  padding-top:8px;
  counter-reset:guide-card;
}

body[data-page-id="home"] .home-service-article-grid.collection-grid{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-columns:none !important;
  grid-auto-columns:calc((100% - 28px) / 3) !important;
  gap:14px !important;
  width:100%;
  margin:0 0 24px !important;
  padding:10px 10px 18px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-padding-inline:10px !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

body[data-page-id="home"] .home-service-article-grid.collection-grid::-webkit-scrollbar{
  display:none;
  height:0;
}

body[data-page-id="home"] .home-service-article-shell .collection-card{
  min-height:190px;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:24px 28px 20px !important;
  box-sizing:border-box !important;
  scroll-snap-align:start !important;
}

body[data-page-id="home"] .category-collection-shell.home-service-article-shell .collection-card::after{
  content:"Open service →";
}

/* Services pages */
body[data-index-type="services"] .service-page-section{
  padding-top:calc(var(--navh) + 24px);
}

body[data-index-type="services"] .service-card-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.service-card{
  min-height:190px;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:9px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--panel);
  color:var(--ink);
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}

.service-card:hover,
.service-card:focus-visible{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(234,88,12,.08), transparent), var(--panel);
  transform:translateY(-2px);
  outline:none;
}

.service-card p{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  margin:0;
}

.service-detail-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(220px, .55fr);
  gap:22px;
  align-items:stretch;
}

.service-detail-photo,
.service-side-link,
.service-panel{
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--panel);
}

.service-detail-photo{
  overflow:hidden;
  min-height:230px;
}

.service-detail-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.service-side-link{
  display:grid;
  align-content:end;
  gap:8px;
  min-height:230px;
  padding:18px;
  color:var(--ink);
  text-decoration:none;
}

.service-side-link:hover,
.service-side-link:focus-visible{
  border-color:var(--accent);
  outline:none;
}

.service-side-link span{
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.service-side-link strong{
  color:#fff;
  font-size:21px;
  line-height:1.15;
}

.service-side-link em{
  color:var(--muted);
  font-size:14px;
  font-style:normal;
  line-height:1.5;
}

.service-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.service-panel{
  padding:18px;
}

.service-panel p:not(.section-kicker){
  color:#cbd5e1;
  font-size:15px;
  line-height:1.6;
  margin:0 0 14px;
}

.service-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.service-list li{
  color:#cbd5e1;
  line-height:1.55;
  padding-left:18px;
  position:relative;
}

.service-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--accent);
}

@media (max-width:1050px){
  body[data-index-type="services"] .service-card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:760px){
  body[data-index-type="services"] .service-card-grid,
  .service-detail-hero,
  .service-detail-grid{
    grid-template-columns:1fr;
  }

  .service-card{
    min-height:0;
  }
}

@media (max-width:700px){
  body[data-page-id="home"] .home-service-article-grid.collection-grid{
    grid-auto-columns:100% !important;
    gap:0 !important;
    margin:0 0 24px !important;
    padding:18px 0 22px !important;
    overflow-y:visible !important;
    scroll-padding-inline:0 !important;
  }

  body[data-page-id="home"] .home-service-article-shell .collection-card{
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    min-height:206px !important;
    padding:24px 28px 20px !important;
  }
}

/* Service pages: fuller decision pages */
body[data-index-type="services"] .service-page-section{
  padding-bottom:58px;
}

body[data-index-type="services"] .category-headline.service-headline{
  align-items:end;
}

body[data-index-type="services"] .service-index-summary{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr);
  gap:18px;
  margin:0 0 18px;
}

.service-index-note,
.service-cta-panel,
.service-panel,
.service-step,
.service-proof-card,
.service-hero-card{
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 14px 30px rgba(0,0,0,.18);
}

.service-index-note{
  padding:18px;
}

.service-index-note p{
  color:#cbd5e1;
  font-size:15px;
  line-height:1.6;
  margin:0 0 12px;
}

.service-index-note p:last-child{
  margin-bottom:0;
}

body[data-index-type="services"] .service-card-grid.service-card-grid-featured{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin:0 0 22px;
}

body[data-index-type="services"] .service-card{
  min-height:230px;
  padding:20px;
  gap:11px;
  border-radius:8px;
}

body[data-index-type="services"] .service-card strong{
  font-size:22px;
}

body[data-index-type="services"] .service-card em{
  display:block;
  color:#f97316;
  font-size:12px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:auto;
}

.service-choice-grid,
.service-step-grid,
.service-proof-grid{
  display:grid;
  gap:14px;
  margin:18px 0 0;
}

.service-choice-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.service-step-grid,
.service-proof-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.service-detail-hero{
  position:relative;
  grid-template-columns:minmax(0, 1.12fr) minmax(280px, .72fr);
  gap:24px;
  padding:28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 10%, rgba(234,88,12,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%),
    var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 22px 48px rgba(0,0,0,.24);
}

.service-detail-copy{
  position:relative;
  z-index:1;
  display:grid;
  align-content:center;
  gap:14px;
}

.service-detail-copy .section-intro{
  max-width:760px;
}

.service-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.service-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  color:#dbeafe;
  background:rgba(255,255,255,.035);
  font-size:12px;
  font-weight:800;
}

.service-hero-card{
  position:relative;
  z-index:1;
  display:grid;
  align-content:end;
  min-height:260px;
  padding:18px;
  overflow:hidden;
}

.service-hero-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.42;
  filter:saturate(.9) contrast(1.05);
}

.service-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 22%, rgba(10,12,15,.92));
}

.service-hero-card > *{
  position:relative;
  z-index:1;
}

.service-hero-card span,
.service-proof-card span,
.service-step span{
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.service-hero-card strong{
  color:#fff;
  font-size:22px;
  line-height:1.12;
}

.service-hero-card em{
  color:#cbd5e1;
  font-style:normal;
  line-height:1.45;
}

.service-detail-grid{
  margin-top:18px;
}

.service-detail-grid.service-detail-grid-wide{
  grid-template-columns:1.05fr .95fr;
}

.service-panel{
  padding:20px;
}

.service-panel h2,
.service-panel h3,
.service-step strong,
.service-proof-card strong,
.service-cta-panel strong{
  color:#fff;
  line-height:1.12;
}

.service-panel h2,
.service-panel h3{
  font-size:22px;
  margin:0 0 12px;
}

.service-panel .section-kicker{
  color:var(--accent);
  margin:0 0 8px;
}

.service-panel.featured{
  border-color:rgba(234,88,12,.45);
  background:
    radial-gradient(circle at 92% 0%, rgba(234,88,12,.16), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.014)),
    var(--panel);
}

.service-list.compact{
  gap:8px;
}

.service-list li strong{
  color:#fff;
}

.service-step{
  display:grid;
  gap:8px;
  min-height:150px;
  padding:16px;
}

.service-step strong,
.service-proof-card strong{
  font-size:17px;
}

.service-step p,
.service-proof-card p{
  color:#aeb8c5;
  font-size:14px;
  line-height:1.5;
  margin:0;
}

.service-proof-card{
  display:grid;
  gap:8px;
  padding:16px;
  color:inherit;
  text-decoration:none;
}

.service-proof-card:hover,
.service-proof-card:focus-visible{
  border-color:var(--accent);
  outline:none;
}

.service-cta-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:20px 0 0;
  padding:20px;
  border-color:rgba(234,88,12,.42);
  background:
    radial-gradient(circle at 96% 20%, rgba(234,88,12,.17), transparent 34%),
    linear-gradient(180deg, rgba(234,88,12,.09), rgba(255,255,255,.015)),
    var(--panel);
}

.service-cta-panel p{
  color:#cbd5e1;
  margin:6px 0 0;
  max-width:720px;
}

.service-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  flex:0 0 auto;
}

.service-page-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 0;
}

.service-next-panel{
  margin-top:20px;
}

.service-next-panel .service-proof-grid{
  margin-top:14px;
}

.service-detail-footer{
  margin-top:0;
}

.service-detail-footer .footer-links .btn{
  text-decoration:none;
}

@media (max-width:900px){
  body[data-index-type="services"] .service-index-summary,
  .service-detail-hero,
  .service-detail-grid.service-detail-grid-wide,
  .service-choice-grid,
  .service-step-grid,
  .service-proof-grid{
    grid-template-columns:1fr;
  }

  body[data-index-type="services"] .service-card-grid.service-card-grid-featured{
    grid-template-columns:1fr;
  }

  .service-cta-panel{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (max-width:700px){
  body[data-index-type="services"] .service-page-section .wrap,
  body[data-index-type="services"] .service-detail-hero,
  body[data-index-type="services"] .service-detail-copy,
  body[data-index-type="services"] .service-ready-panel,
  body[data-index-type="services"] .service-ready-copy,
  body[data-index-type="services"] .service-ready-list,
  body[data-index-type="services"] .service-panel,
  body[data-index-type="services"] .service-step,
  body[data-index-type="services"] .service-proof-card,
  body[data-index-type="services"] .service-cta-panel{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }

  body[data-index-type="services"] .service-page-section .wrap{
    padding-left:16px;
    padding-right:16px;
  }

  body[data-index-type="services"] .service-detail-copy h1,
  body[data-index-type="services"] .service-detail-copy p,
  body[data-index-type="services"] .service-panel h2,
  body[data-index-type="services"] .service-panel p,
  body[data-index-type="services"] .service-panel li,
  body[data-index-type="services"] .service-ready-panel h2,
  body[data-index-type="services"] .service-ready-panel p,
  body[data-index-type="services"] .service-ready-panel li,
  body[data-index-type="services"] .service-step strong,
  body[data-index-type="services"] .service-step p,
  body[data-index-type="services"] .service-proof-card strong,
  body[data-index-type="services"] .service-proof-card p{
    max-width:100%;
    overflow-wrap:anywhere;
    white-space:normal;
  }

  body[data-index-type="services"] .service-detail-hero{
    padding:20px;
  }

  body[data-index-type="services"] .service-detail-copy .title{
    font-size:clamp(1.75rem, 8vw, 2.15rem) !important;
    line-height:1.08 !important;
    overflow-wrap:anywhere;
  }

  body[data-index-type="services"] .service-panel h2,
  body[data-index-type="services"] .service-panel h3{
    font-size:1.35rem;
    overflow-wrap:anywhere;
  }

  body[data-index-type="services"] .service-pill{
    font-size:11px;
    max-width:100%;
  }

  body[data-index-type="services"] .service-hero-card strong{
    font-size:1.25rem;
    overflow-wrap:anywhere;
  }
}

/* Projects: Chris / capabilities block */
body[data-index-type="projects"] .project-about{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.25fr);
  gap:22px;
  align-items:start;
  margin:0 0 4px;
  padding:20px 0 18px;
}

body[data-index-type="projects"] .category-headline + .section-divider{
  margin-bottom:8px !important;
}

body[data-index-type="projects"] .project-about-copy{
  padding:4px 0;
}

body[data-index-type="projects"] .project-about-copy .section-kicker{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.2;
  margin:0 0 4px;
  font-size:13px;
  font-weight:800;
}

body[data-index-type="projects"] .project-about h2{
  color:var(--ink);
  font-size:clamp(1.35rem, 2.8vw, 2rem);
  line-height:1.08;
  margin:0 0 14px;
}

body[data-index-type="projects"] .project-about p{
  color:#b7c7db;
  font-size:15px;
  line-height:1.6;
  margin:0 0 12px;
}

body[data-index-type="projects"] .project-orbit{
  display:grid;
  gap:14px;
  align-content:start;
}

body[data-index-type="projects"] .project-orbit-map{
  position:relative;
  min-height:360px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 38%),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--panel);
  background-size:auto, 42px 42px, 42px 42px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 46px rgba(0,0,0,.24);
  isolation:isolate;
}

body[data-index-type="projects"] .project-orbit-map::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:10px;
  pointer-events:none;
  z-index:0;
}

body[data-index-type="projects"] .project-service-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:1;
}

body[data-index-type="projects"] .project-service-line{
  stroke:rgba(124,138,158,.24);
  stroke-width:1.05;
  stroke-linecap:round;
  stroke-dasharray:5 9;
  vector-effect:non-scaling-stroke;
  transition:stroke .2s ease, stroke-width .2s ease, opacity .2s ease, filter .2s ease, stroke-dashoffset .2s ease;
}

body[data-index-type="projects"] .project-orbit-map[data-active-lane="fab"] .line-fab,
body[data-index-type="projects"] .project-orbit-map[data-active-lane="web"] .line-web,
body[data-index-type="projects"] .project-orbit-map[data-active-lane="systems"] .line-systems,
body[data-index-type="projects"] .project-orbit-map[data-active-lane="consulting"] .line-consulting{
  stroke:rgba(234,88,12,.92);
  stroke-width:2.15;
  stroke-dasharray:9 10;
  animation:projectServiceLineDash 1.5s linear infinite, projectServiceLinePulse 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(234,88,12,.34));
}

body[data-index-type="projects"] .project-service-core{
  position:absolute;
  left:50%;
  top:50%;
  width:108px;
  height:108px;
  padding:3px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(145deg, #ff7a1a, #b83c06);
  box-shadow:0 20px 42px rgba(0,0,0,.38), 0 0 0 8px rgba(234,88,12,.06);
  transform:translate(-50%,-50%);
  animation:projectServicePulse 6.4s ease-in-out infinite;
  z-index:3;
}

body[data-index-type="projects"] .project-service-core::before,
body[data-index-type="projects"] .project-service-core::after{
  content:"";
  position:absolute;
  inset:-10px;
  border:1px solid rgba(234,88,12,.22);
  border-radius:999px;
  opacity:0;
  animation:projectServiceRing 4.8s ease-out infinite;
}

body[data-index-type="projects"] .project-service-core::after{
  animation-delay:2.4s;
}

body[data-index-type="projects"] .project-service-core img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  border:3px solid var(--bg);
  border-radius:999px;
}

body[data-index-type="projects"] .project-service-node{
  position:absolute;
  z-index:4;
  display:grid;
  place-items:center;
  gap:2px;
  width:108px;
  height:108px;
  padding:14px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(10,12,15,.94);
  color:var(--ink);
  font:inherit;
  line-height:1;
  cursor:pointer;
  align-content:center;
  box-shadow:0 14px 32px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.035);
  animation:projectServiceFloat 7s ease-in-out infinite;
  transition:border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body[data-index-type="projects"] .project-service-node::before{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(234,88,12,.28);
  border-radius:999px;
  opacity:0;
  transform:scale(.92);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

body[data-index-type="projects"] .project-service-node[data-lane="fab"]{
  left:20%;
  top:25%;
  transform:translate(-50%,-50%);
}

body[data-index-type="projects"] .project-service-node[data-lane="web"]{
  left:81%;
  top:27%;
  width:96px;
  height:96px;
  transform:translate(-50%,-50%);
  animation-delay:-1.4s;
}

body[data-index-type="projects"] .project-service-node[data-lane="systems"]{
  left:23%;
  top:75%;
  width:88px;
  height:88px;
  transform:translate(-50%,-50%);
  animation-delay:-2.8s;
}

body[data-index-type="projects"] .project-service-node[data-lane="consulting"]{
  left:79%;
  top:74%;
  width:100px;
  height:100px;
  transform:translate(-50%,-50%);
  animation-delay:-4.2s;
}

body[data-index-type="projects"] .project-service-node span{
  color:var(--accent);
  font-size:23px;
  font-weight:900;
}

body[data-index-type="projects"] .project-service-node strong{
  max-width:84px;
  color:#fff;
  font-size:17px;
  line-height:1.05;
  text-align:center;
}

body[data-index-type="projects"] .project-service-node[data-lane="web"] span,
body[data-index-type="projects"] .project-service-node[data-lane="systems"] span{
  font-size:21px;
}

body[data-index-type="projects"] .project-service-node[data-lane="web"] strong{
  font-size:15px;
}

body[data-index-type="projects"] .project-service-node[data-lane="systems"] strong{
  font-size:14px;
}

body[data-index-type="projects"] .project-service-node[data-lane="consulting"] strong{
  font-size:16px;
}

body[data-index-type="projects"] .project-service-node:hover,
body[data-index-type="projects"] .project-service-node:focus-visible,
body[data-index-type="projects"] .project-service-node.active{
  border-color:var(--accent);
  background:linear-gradient(145deg, rgba(234,88,12,.24), rgba(10,12,15,.96) 62%);
  box-shadow:0 18px 38px rgba(0,0,0,.36), 0 0 0 7px rgba(234,88,12,.07);
  transform:translate(-50%,-50%) scale(1.08);
  outline:none;
}

body[data-index-type="projects"] .project-service-node:hover::before,
body[data-index-type="projects"] .project-service-node:focus-visible::before,
body[data-index-type="projects"] .project-service-node.active::before{
  opacity:1;
  transform:scale(1);
  animation:projectNodeHalo 2.2s ease-in-out infinite;
}

body[data-index-type="projects"] .project-orbit-detail{
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--panel);
  padding:16px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body[data-index-type="projects"] .project-orbit-detail.is-swapping{
  animation:projectDetailPop .34s ease-out;
}

body[data-index-type="projects"] .project-orbit-detail .section-kicker{
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  margin:0 0 7px;
}

body[data-index-type="projects"] .project-orbit-detail h3{
  color:var(--ink);
  font-size:18px;
  line-height:1.2;
  margin:0 0 8px;
}

body[data-index-type="projects"] .project-orbit-detail p:not(.section-kicker){
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  margin:0 0 14px;
}

@keyframes projectDetailPop{
  0%{transform:translateY(5px);opacity:.72}
  100%{transform:translateY(0);opacity:1}
}

@keyframes projectServiceFloat{
  0%,100%{margin-top:0}
  50%{margin-top:-6px}
}

@keyframes projectServicePulse{
  0%,100%{box-shadow:0 20px 42px rgba(0,0,0,.38), 0 0 0 7px rgba(234,88,12,.045)}
  50%{box-shadow:0 20px 42px rgba(0,0,0,.38), 0 0 0 12px rgba(234,88,12,.085)}
}

@keyframes projectServiceRing{
  0%{opacity:0;transform:scale(.82)}
  18%{opacity:.42}
  100%{opacity:0;transform:scale(1.7)}
}

@keyframes projectServiceLinePulse{
  0%,100%{stroke-width:2.05;opacity:.88}
  50%{stroke-width:2.6;opacity:1}
}

@keyframes projectServiceLineDash{
  to{stroke-dashoffset:-19}
}

@keyframes projectNodeHalo{
  0%,100%{opacity:.55;transform:scale(.98)}
  50%{opacity:.95;transform:scale(1.04)}
}

@media (max-width:900px){
  body[data-index-type="projects"] .project-about{
    grid-template-columns:1fr;
    gap:16px;
  }
}

@media (max-width:620px){
  body[data-index-type="projects"] .project-orbit-map{
    min-height:320px;
  }

  body[data-index-type="projects"] .project-service-core{
    width:86px;
    height:86px;
  }

  body[data-index-type="projects"] .project-service-node{
    width:84px;
    height:84px;
    padding:8px;
  }

  body[data-index-type="projects"] .project-service-node[data-lane="web"]{
    width:76px;
    height:76px;
  }

  body[data-index-type="projects"] .project-service-node[data-lane="systems"]{
    width:72px;
    height:72px;
  }

  body[data-index-type="projects"] .project-service-node[data-lane="consulting"]{
    width:80px;
    height:80px;
  }

  body[data-index-type="projects"] .project-service-node span{
    font-size:21px;
  }

  body[data-index-type="projects"] .project-service-node strong{
    font-size:14px;
  }

  body[data-index-type="projects"] .project-service-node[data-lane="web"] strong,
  body[data-index-type="projects"] .project-service-node[data-lane="systems"] strong,
  body[data-index-type="projects"] .project-service-node[data-lane="consulting"] strong{
    font-size:12px;
  }

}

@media (prefers-reduced-motion:reduce){
  body[data-index-type="projects"] .project-service-core,
  body[data-index-type="projects"] .project-service-core::before,
  body[data-index-type="projects"] .project-service-core::after,
  body[data-index-type="projects"] .project-service-node,
  body[data-index-type="projects"] .project-service-node::before,
  body[data-index-type="projects"] .project-service-line,
  body[data-index-type="projects"] .project-orbit-detail.is-swapping{
    animation:none !important;
  }
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
:target{scroll-margin-top:calc(var(--navh) + 10px)}

/* Media defaults (IMPORTANT: do NOT force height:auto that breaks thumbs) */
img,video,canvas,svg{max-width:100%;display:block}

/* Header / Nav */
header{
  position:fixed;left:0;right:0;top:0;
  height:var(--navh);
  z-index:1200;
  background:rgba(0,0,0,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:44px;height:44px;border-radius:8px;
  background:#000;border:2px solid var(--line);
  display:grid;place-items:center;
  font-weight:800;font-size:20px;color:#fff;
}
.logo .c{color:var(--accent)}
.brand h1,
.brand-wordmark{font-size:20px;font-weight:700;line-height:1}

#topNav{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
#topNav::-webkit-scrollbar{display:none}
nav a{
  color:var(--accent);
  font-size:14px;
  text-decoration:none;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:.2s;
}
nav a:hover{border-color:var(--accent);background:rgba(234,88,12,.12);color:#fff}
nav a.active{background:#fff;color:#000;border-color:#fff}
#topNav .nav-search-link{
  width:38px;
  min-width:38px;
  padding:8px 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  line-height:1;
}
.search-icon{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.menu-btn{
  display:none;
  border:1px solid var(--line);
  background:#000;
  color:var(--accent);
  padding:8px 10px;
  border-radius:var(--r-sm);
  cursor:pointer;
}

/* Buttons / Chips */
.btn,.chip,.pill{border-radius:var(--r-sm)}
.btn{
  display:inline-block;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:10px 14px;
  text-decoration:none;
  transition:.2s;
  cursor:pointer;
  background:transparent;
}
.btn:hover{background:var(--accent);color:#000;transform:translateY(-2px)}
.btn.solid{background:var(--accent);color:#000;border-color:var(--accent)}

.chip,.pill{
  display:inline-block;
  border:1px solid var(--line);
  padding:6px 10px;
  background:#0e0e0e;
  color:var(--ink);
  font-size:13px;
}

/* Sections */
section{padding:56px 0}
.title{color:var(--accent);font-weight:800;letter-spacing:.2px;margin-bottom:12px;font-size:1.4rem}
@media (min-width:1024px){.title{font-size:1.8rem}}

/* Grid + Cards */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  align-items:stretch;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px;
  transition:.2s;
  display:flex;
  flex-direction:column;
  height:100%;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* -------------------------------------------------
   SINGLE SOURCE OF TRUTH - CARD THUMBS (3:2 ALWAYS)
   This is what you wanted.
   ------------------------------------------------- */
.card .thumb,
.project-card .thumb,
.code-card .thumb,
.camp-card .thumb,
.gear-card .thumb,
.store-card .thumb{
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:#0e0e0e;
  aspect-ratio:3 / 2;
}

.card .thumb img,
.project-card .thumb img,
.code-card .thumb img,
.camp-card .thumb img,
.gear-card .thumb img,
.store-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gear-card .thumb img[src^="https://m.media-amazon.com"],
.gear-card .thumb img[src^="https://pisces.bbystatic.com"],
.gear-card .thumb img[src^="https://cdn.shopify.com"]{
  object-fit:contain;
  padding:10px;
  background:
    radial-gradient(circle at 66% 18%, rgba(234,88,12,.10), transparent 34%),
    linear-gradient(145deg, #05070a, #10151c 58%, #080a0d);
}

.card h4{margin:10px 0 6px;font-size:16px;line-height:1.25}
.card .desc,.card .lead{
  font-size:15px;
  line-height:1.45;
  color:var(--muted);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.card-tags,.project-tags{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  margin-top:auto;
  overflow:hidden;
  white-space:nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
          mask-image: linear-gradient(to right, #000 82%, transparent);
}
.card-tags .pill,.project-tags .chip{flex:0 0 auto;font-size:12px;padding:3px 8px;border-radius:8px;background:#0f1013;border:1px solid var(--line)}
@media (max-width:640px){
  .card-tags,.project-tags{ -webkit-mask-image:none; mask-image:none; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .card-tags::-webkit-scrollbar,.project-tags::-webkit-scrollbar{display:none}
}

/* Forms */
form{display:grid;gap:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.input{width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#0f0f0f;color:var(--ink);font-size:15px}
.input:focus{outline:none;border-color:var(--accent);background:#0a0a0a}
textarea.input{min-height:140px;resize:vertical}
.contact-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}

/* Contact page */
body[data-index-type="contact"]{
  background:
    radial-gradient(circle at 90% 8%, rgba(234,88,12,.13), transparent 25%),
    linear-gradient(180deg, #080a0d 0%, var(--bg) 52%, #080a0d 100%);
}

body[data-index-type="contact"] .contact-page-section{
  padding-bottom:64px;
}

body[data-index-type="contact"] .contact-headline{
  min-height:150px !important;
}

body[data-index-type="contact"] .contact-headline .section-intro{
  max-width:760px;
}

body[data-index-type="contact"] .contact-photo-panel{
  top:-32px !important;
  width:200px !important;
  height:200px;
  min-width:200px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:0 20px 55px rgba(0,0,0,.42);
}

body[data-index-type="contact"] .contact-photo-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--accent);
}

body[data-index-type="contact"] .contact-page-layout{
  display:block;
}

body[data-index-type="contact"] .contact-page-copy{
  margin:0 0 18px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

body[data-index-type="contact"] .contact-page-copy .section-kicker{
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 4px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
}

body[data-index-type="contact"] .contact-cue-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

body[data-index-type="contact"] .contact-cue-card{
  position:relative;
  min-height:100%;
  padding:16px 16px 16px 18px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(234,88,12,.10), rgba(234,88,12,0) 42%),
    #0d0f13;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

body[data-index-type="contact"] .contact-cue-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--accent);
}

body[data-index-type="contact"] .contact-cue-grid strong,
body[data-index-type="contact"] .contact-cue-grid span{
  display:block;
}

body[data-index-type="contact"] .contact-cue-mark{
  width:max-content;
  margin:0 0 10px;
  padding:3px 8px;
  border:1px solid rgba(234,88,12,.45);
  border-radius:999px;
  color:var(--accent);
  background:rgba(234,88,12,.08);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

body[data-index-type="contact"] .contact-cue-grid strong{
  margin-bottom:6px;
  color:#fff;
  font-size:16px;
  line-height:1.2;
}

body[data-index-type="contact"] .contact-cue-grid span{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

body[data-index-type="contact"] .contact-box{
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

body[data-index-type="contact"] .contact-box textarea.input{
  min-height:180px;
}

@media (max-width:900px){
  body[data-index-type="contact"] .contact-headline{
    padding-right:0 !important;
    min-height:0 !important;
  }

  body[data-index-type="contact"] .contact-photo-panel{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:200px !important;
    height:200px;
    min-width:200px;
    margin:18px 0 0;
  }

  body[data-index-type="contact"] .contact-page-layout{
    display:block;
  }

  body[data-index-type="contact"] .contact-cue-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .row{
    grid-template-columns:1fr;
  }
}

/* Hero */
.hero{position:relative;height:100dvh;display:grid;place-items:center;text-align:center;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.58;
  filter:brightness(.72) saturate(.82);
}
.hero .bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.58);pointer-events:none}
.hero > .wrap{position:relative;z-index:1;max-width:var(--wrap);padding:calc(var(--navh) + 20px) 20px 40px;display:flex;flex-direction:column;align-items:center;gap:18px}
.hero img{width:200px;height:200px;object-fit:cover;border-radius:50%;border:3px solid var(--accent)}
.hero h1,
.hero h2{font-size:clamp(34px,5vw,48px);line-height:1.2}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;display:none;z-index:2147483649;background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.mobile-menu.open{display:block}
.mobile-menu .mobile-links{
  position:absolute;
  top:var(--navh);
  left:12px;right:12px;
  padding:18px;
  border-radius:16px;
  background:rgba(234,88,12,.10);
  border:2px solid var(--accent);
  box-shadow:0 22px 60px rgba(0,0,0,.65);
}
.mobile-menu .mobile-links a{
  display:flex;align-items:center;justify-content:space-between;
  font-size:18px;font-weight:800;letter-spacing:.02em;
  padding:16px 14px;margin:10px 0;
  border-radius:14px;
  color:#fff;
  border:1px solid rgba(234,88,12,.45);
  background:rgba(0,0,0,.25);
  text-decoration:none;
}
.mobile-menu .mobile-links a:hover,
.mobile-menu .mobile-links a:focus-visible{color:#000;background:var(--accent);border-color:var(--accent);outline:none}
.mobile-menu .mobile-links a.nav-search-link{
  justify-content:flex-start;
  gap:10px;
}
.mobile-menu .mobile-links a.nav-search-link::after{
  content:"Search";
}

/* Modals (simple + consistent)
   Note: your index.html also has its own inline modal guards for mobile.
*/
.modal{
  position:fixed;inset:0;
  background:rgba(10,12,15,.55);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index:2000;
}
.modal.open{display:flex}
.modal-card{
  width:min(1180px,95vw);
  max-height:92vh;
  background:#0f0f0f;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  display:grid;
  grid-template-rows:auto 1fr;
}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.close-btn{border:1px solid var(--line);background:#0b0b0b;color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer}
.close-btn:hover{border-color:var(--accent);color:var(--accent)}
.modal-body{display:grid;grid-template-columns:minmax(0,56%) 1fr;gap:16px;padding:16px;align-items:start;overflow:auto}
@media (max-width:900px){.modal-body{grid-template-columns:1fr}}

.gallery{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0b0c0f}
.gallery img{width:100%;height:clamp(320px,56vh,680px);object-fit:contain;background:transparent}
.gal-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:12px;
  color:#fff;background:rgba(0,0,0,.55);
  border:1px solid var(--line);
  display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.gal-btn:hover{border-color:var(--accent);background:rgba(234,88,12,.22)}

.thumb-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.thumb-row img{width:96px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#0b0c0f;cursor:pointer}

.details{display:grid;grid-template-columns:1fr;gap:10px}
.meta-block{display:flex;flex-wrap:wrap;gap:8px}
.meta-block .pill,.meta-block .chip{border:1px solid var(--accent);background:transparent;color:var(--accent);padding:4px 8px;border-radius:var(--r-sm);font-size:12px;font-weight:700}
.kv{border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);padding:12px}
.kv .k{display:block;margin:0 0 6px;font-size:12px;letter-spacing:.04em;font-weight:800;color:var(--accent);text-transform:uppercase}
.kv .v{margin:0;color:var(--ink)}
.kv ul{margin:0;padding-left:18px}
.kv li{margin:4px 0}

/* Tools section visibility (your HTML already has both list + table) */
#tools .tool-list{display:none}
#tools .tool-desktop-only{display:block}
@media (max-width: 860px){
  #tools .tool-list{display:flex;flex-direction:column;gap:12px}
  #tools .tool-desktop-only{display:none !important}
}

/* Floating cart (minimal, stable) */
#fc-cart{position:fixed;right:16px;bottom:16px;z-index:2147483647;pointer-events:auto}
#fc-cart-toggle{
  background:var(--accent);
  color:#000;
  border:0;
  border-radius:12px;
  height:44px;
  padding:0 12px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}

/* Mobile tweaks */
@media (max-width:900px){
  .row{grid-template-columns:1fr}
  section{padding:40px 0}
}
@media (max-width:640px){
  :root{--navh:56px}
  #topNav{display:none}
  .menu-btn{display:inline-block}
  .card{padding:12px}
  .hero img{width:140px;height:140px}
  .hero h1,
  .hero h2{font-size:28px}
}

/* Caret guard (kept) */
html,body,*{caret-color:transparent}
input,textarea,[contenteditable="true"]{caret-color:auto}
/* ==========================================
   PATCH PACK - NAV + HERO + CART + TOOLS
   Paste at VERY END of styles.css
   ========================================== */

/* 1) FC logo link color lock (kills blue/purple visited behavior) */
.brand a,
.brand a:link,
.brand a:visited,
.brand a:hover,
.brand a:active{
  color: inherit !important;
  text-decoration: none !important;
}

.logo,
.logo:link,
.logo:visited,
.logo:hover,
.logo:active{
  color:#fff !important;
}
.logo .f{ color:#fff !important; }
.logo .c{ color: var(--accent) !important; }

/* 2) Hamburger bigger and more obvious */
.menu-btn{
  font-size: 20px !important;
  padding: 10px 12px !important;
  border: 2px solid var(--accent) !important;
  background: rgba(234,88,12,.14) !important;
  color: var(--accent) !important;
  line-height: 1 !important;
}
.menu-btn:hover{
  background: var(--accent) !important;
  color:#000 !important;
}

/* 3) Darken hero video more (stronger overlay) */
.hero .bg::after{
  background: rgba(0,0,0,.58) !important;
}

/* 4) Cart panel should NOT be visible unless opened */
#fc-cart-panel{
  display: none !important;
}
#fc-cart-panel.open{
  display: block !important;
}

/* Give the cart panel a real styled drawer (so it looks right when opened) */
#fc-cart-panel{
  position: absolute !important;
  right: 0 !important;
  bottom: 56px !important;
  width: clamp(320px, 42vw, 520px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: 76vh !important;
  overflow: auto !important;

  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #0f1117 !important;
  padding: 14px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.6) !important;
}

/* Mobile cart panel goes full width */
@media (max-width:560px){
  #fc-cart{ right:8px !important; bottom:8px !important; }
  #fc-cart-panel{
    right: 50% !important;
    transform: translateX(50%) !important;
    width: calc(100vw - 16px) !important;
    max-height: 78vh !important;
  }
}

/* 5) Tools and Resources - restore actual styling (mobile list + desktop table) */

/* Mobile list row styling */
#tools .tool-row{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  color:inherit;
}

#tools .tool-icon{
  width:44px; height:44px;
  border-radius:12px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  flex:0 0 auto;
}

/* Lucide icons inside tool-icon */
#tools .tool-icon svg{
  width:20px; height:20px;
  stroke: var(--accent);
  stroke-width: 2.2;
}

#tools .tool-meta{ min-width:0; flex:1; }
#tools .tool-title{
  font-weight:900;
  font-size:16px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#tools .tool-sub{
  margin-top:4px;
  font-size:12.5px;
  opacity:.72;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#tools .tool-desc{
  margin-top:6px;
  font-size:13px;
  opacity:.85;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#tools .tool-cta{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:999px;
  background: var(--accent);
  color:#0b0b0b;
  font-weight:900;
  font-size:13px;
  line-height:1;
}

/* Desktop table styling */
#tools .tool-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
#tools .tool-table thead th{
  text-align:left;
  font-weight:800;
  font-size:14px;
  color: var(--ink);
  background:#0b0d12;
  border-bottom:1px solid var(--line);
  padding:12px 14px;
}
#tools .tool-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  font-size:14px;
  color: var(--ink);
}
#tools .tool-table tbody tr:last-child td{ border-bottom:0; }
#tools .tool-table tbody tr:hover td{
  background: rgba(234,88,12,.08);
}
#tools .tool-table td:last-child,
#tools .tool-table th:last-child{
  width: 160px;
  text-align:right;
  white-space:nowrap;
}
#tools .tool-table td:last-child .btn{
  width:auto;
  display:inline-block;
}

/* Make sure the desktop table is visible on desktop, list on mobile */
#tools .tool-list{ display:none; }
#tools .tool-desktop-only{ display:block; }
@media (max-width: 860px){
  #tools .tool-list{ display:flex; flex-direction:column; gap:12px; }
  #tools .tool-desktop-only{ display:none !important; }
}

/* ==========================================
   HERO VIDEO DARKEN FIX
   ========================================== */

.hero .bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58) !important;
  pointer-events:none;
  z-index:1;
}

/* make sure hero content stays above overlay */
.hero > .wrap{
  position:relative;
  z-index:2;
}
/* ==========================================
   MOBILE: MATCH CAMP IMAGE SIZE
   (Projects / Code / Gear only)
   ========================================== */

@media (max-width: 900px){

  /* Camp stays untouched */

  #projectGrid .thumb,
  #codeGrid .thumb,
  #gearGrid .thumb{
    aspect-ratio: 3 / 2 !important;
    min-height: 320px !important;   /* match Camp feel */
  }

  #projectGrid .thumb img,
  #codeGrid .thumb img,
  #gearGrid .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

}
/* ==========================================
   DESKTOP: BIGGER CARD WIDTH
   ========================================== */

@media (min-width: 1024px){

  #projectGrid.grid,
  #codeGrid.grid,
  #gearGrid.grid{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
  }

  #projectGrid .thumb,
  #codeGrid .thumb,
  #gearGrid .thumb{
    min-height: 320px !important;
  }

}
/* ==========================================
   FIX DESKTOP SCALE (Projects / Code / Gear)
   Keep mobile big, keep desktop sane
   Paste at VERY END of styles.css
   ========================================== */

/* ----- DESKTOP / LAPTOP: stop the giant images ----- */
@media (min-width: 901px){

  /* Projects / Code / Gear thumbs: normal desktop size */
  #projectGrid .thumb,
  #codeGrid .thumb,
  #gearGrid .thumb{
    aspect-ratio: 3 / 2 !important;

    /* kill any old "min-height: 320/360/380" junk */
    min-height: 0 !important;
    height: auto !important;

    /* THIS is the control knob for desktop */
    max-height: clamp(220px, 18vw, 300px) !important;
  }

  /* Make sure the img actually fills the frame */
  #projectGrid .thumb img,
  #codeGrid .thumb img,
  #gearGrid .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Optional: Camp slightly taller on desktop (subtle) */
  #campGrid .thumb{
    max-height: clamp(240px, 19vw, 320px) !important;
  }
}

/* ----- MOBILE: keep the Camp-sized look ----- */
@media (max-width: 900px){

  /* Match Camp feel for Projects / Code / Gear */
  #projectGrid .thumb,
  #codeGrid .thumb,
  #gearGrid .thumb{
    aspect-ratio: 3 / 2 !important;
    min-height: 320px !important;   /* adjust 300-360 to taste */
    height: auto !important;
    max-height: none !important;
  }

  #projectGrid .thumb img,
  #codeGrid .thumb img,
  #gearGrid .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}
/* =========================================================
   DESKTOP NORMALIZATION - Projects + Gear (Camp untouched)
   Fix: giant cards + broken scaling
   Paste at VERY END of styles.css
   ========================================================= */

/* ---------- DESKTOP ONLY ---------- */
@media (min-width: 901px){

  /* FORCE Projects + Gear to be real desktop grids */
  #projectGrid.grid,
  #gearGrid.grid{
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    overflow: visible !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  /* If your markup is <div id="projectGrid" class="grid"> with <a> wrappers */
  #projectGrid.grid > a,
  #gearGrid.grid > a{
    padding: 0 !important;
    display: block !important;
    justify-content: initial !important;
  }

  /* STOP the “gigantic thumb” problem (Projects + Gear only) */
  #projectGrid .thumb,
  #gearGrid .thumb{
    aspect-ratio: 3 / 2 !important;

    /* kill any old forced heights/min-heights */
    height: auto !important;
    min-height: 0 !important;

    /* this is the desktop size knob */
    max-height: 280px !important;

    overflow: hidden !important;
    border-radius: 12px !important;
  }

  #projectGrid .thumb img,
  #gearGrid .thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Camp can be a touch taller if you want (subtle) */
  #campGrid .thumb{
    max-height: 300px !important;
  }

}

/* ---------- TOOLS: make it look like your site again ---------- */

/* Make Tools section headings + body look intentional */
#tools summary{
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--accent) !important;
}

/* Mobile list rows (when visible) */
#tools .tool-row{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
}

#tools .tool-title{ font-size: 16px !important; font-weight: 900 !important; }
#tools .tool-sub{ font-size: 13px !important; opacity: .75 !important; }
#tools .tool-desc{ font-size: 14px !important; opacity: .85 !important; }

/* Desktop table (when visible) */
#tools .tool-table{
  width: 100% !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--panel) !important;
}

#tools .tool-table thead th{
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 12px 14px !important;
}

#tools .tool-table td{
  font-size: 14px !important;
  padding: 12px 14px !important;
}

/* ==========================================
   GLOBAL: SQUARE CARD IMAGES (1:1)
   Paste at VERY END of styles.css
   ========================================== */

.card .thumb,
#projectGrid .thumb,
#codeGrid .thumb,
#campGrid .thumb,
#gearGrid .thumb,
#store .thumb,
.store-card .thumb,
.project-card .thumb,
.code-card .thumb,
.camp-card .thumb,
.gear-card .thumb{
  aspect-ratio: 1 / 1 !important;
}

.card .thumb img,
#projectGrid .thumb img,
#codeGrid .thumb img,
#campGrid .thumb img,
#gearGrid .thumb img,
#store .thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ==========================================
   HERO VIDEO: DARKER OVERLAY
   ========================================== */

.hero .bg{ position:absolute; inset:0; z-index:0; }

.hero .bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.78) !important;
  pointer-events:none;
  z-index:1;
}

.hero > .wrap{
  position:relative;
  z-index:2;
}

/* ==========================================
   TEXT OVERLAP FIX - FORCE READABLE TYPE
   Applies site-wide + modals
   ========================================== */

/* Global readability */
body{
  line-height: 1.55 !important;
}

/* Paragraph/list spacing */
p, li{
  line-height: 1.55 !important;
}

/* Modal + detail panels: these are where overlap shows up first */
.modal,
.modal *{
  line-height: 1.5 !important;
}

.modal p{
  margin: 0 0 10px !important;
}

.modal h1, .modal h2, .modal h3, .modal h4{
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
}

/* ==========================================
   FIX: MODAL TEXT OVERLAP
   Stop using card "clamp" styles inside modals
   Paste at VERY END of styles.css
   ========================================== */

/* 1) Kill all line-clamping + weird -webkit-box behavior inside modals */
.modal .lead,
.modal p,
.modal li{
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  white-space: normal !important;
  text-overflow: clip !important;

  line-height: 1.55 !important;
}

/* 2) Camp modal specifically (your screenshot) */
#campModal #campNotes,
#campModal .details p{
  margin: 0 0 12px !important;
}

/* 3) Make sure the right column can’t “collapse” weirdly */
#campModal .details{
  min-width: 0 !important;
}

/* ==========================================
   FIX: .lead should NOT be card-clamped globally
   Clamp ONLY card previews inside grids
   Paste at VERY END of styles.css
   ========================================== */

/* 1) Reset .lead to be normal body copy everywhere */
.lead{
  display: block !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  overflow: visible !important;

  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

/* 2) Keep card preview clamping - but ONLY inside the homepage grids */
.grid .card .desc,
.grid .card .lead{
  color: var(--muted) !important;
  line-height: 1.45 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

/* 3) Titles still clamp in grids (optional, if you want it) */
.grid .card h4{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ==========================================
   HERO VIDEO – STRONGER DARK OVERLAY
   ========================================== */

/* Make sure bg layer is positioned */
.hero .bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Ensure video fills */
.hero .bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity:.58;
  filter:brightness(.72) saturate(.82);
}

/* DARK OVERLAY */
.hero .bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58) !important;
  z-index:1;
  pointer-events:none;
}

/* Keep content above overlay */
.hero > .wrap{
  position: relative;
  z-index: 2;
}

/* ==========================================
   TOOLS TABLE - ALIGNMENT + POLISH
   Paste at VERY END of styles.css
   ========================================== */

#tools .tool-table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;            /* key: stable columns */
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--panel) !important;
}

/* Column widths: Resource | Description | Link */
#tools .tool-table th:nth-child(1),
#tools .tool-table td:nth-child(1){ width: 340px !important; }
#tools .tool-table th:nth-child(3),
#tools .tool-table td:nth-child(3){ width: 140px !important; }

/* Header */
#tools .tool-table thead th{
  text-align: left !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
  color: var(--ink) !important;
  background: #0b0d12 !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 12px 16px !important;
}
#tools .tool-table thead th:last-child{
  text-align: right !important;
}

/* Cells */
#tools .tool-table td{
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  vertical-align: middle !important;
  color: var(--ink) !important;
  font-size: 14px !important;
}
#tools .tool-table tbody tr:last-child td{ border-bottom: 0 !important; }

/* Row hover */
#tools .tool-table tbody tr:hover td{
  background: rgba(234,88,12,.06) !important;
}

/* Resource cell: icon + text aligned cleanly */
#tools .tool-table .tool-meta{
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#tools .tool-table .tool-icon{
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.25) !important;
  display: grid !important;
  place-items: center !important;
}

/* Title/sub spacing */
#tools .tool-table .tool-title{
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
#tools .tool-table .tool-sub{
  margin-top: 3px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.2 !important;
}

/* Description column: nicer line length + vertical rhythm */
#tools .tool-table td:nth-child(2){
  color: var(--muted) !important;
  line-height: 1.45 !important;
}

/* Link column: right-align the button consistently */
#tools .tool-table td:nth-child(3){
  text-align: right !important;
}
#tools .tool-table td:nth-child(3) .btn,
#tools .tool-table td:nth-child(3) .open-tool{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 86px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
}

/* =========================
   MOBILE - FORCE SQUARE CARD IMAGES
   ========================= */
@media (max-width:1100px), (hover:none) and (pointer:coarse){

  #projectGrid .thumb,
  #codeGrid .thumb,
  #gearGrid .thumb,
  #campGrid .thumb{
    aspect-ratio: 1 / 1;      /* makes it square */
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
  }

  #projectGrid .thumb img,
  #codeGrid .thumb img,
  #gearGrid .thumb img,
  #campGrid .thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;        /* prevents distortion */
    display: block;
  }

}

/* =========================================================
   FORCE NEW BADGE ALWAYS VISIBLE (kills hover-only rules)
   Put this LAST so it wins.
   ========================================================= */
html body #campGrid .camp-card .thumb .camp-badge-new{
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Also force it visible even if someone wrote a hover-only rule */
html body #campGrid .camp-card:hover .thumb .camp-badge-new{
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3 !important;
}

/* =========================================================
   MODALS - make top spacing tight and consistent (match Camp)
   ========================================================= */
/* Remove header row spacing when modal heads are hidden */
.modal-card{ grid-template-rows: 1fr !important; }

/* Slightly tighter body padding */
.modal-body{ padding: 12px 16px 16px !important; }

/* Common breadcrumb rows inside injected pages */
.modal .breadcrumbs,
.modal [class*="breadcrumb"],
.modal [class*="crumb"]{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Prevent any first element from creating a big top gap */
.modal .modal-body > *:first-child{ margin-top: 0 !important; }

/* =========================================================
   ORANGE SCROLLBARS
   ========================================================= */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0a0c0f; }
::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:6px; border:2px solid #0a0c0f; }
::-webkit-scrollbar-thumb:hover{ background:#ff7a1a; }
*{ scrollbar-width: thin; scrollbar-color: var(--accent) #0a0c0f; }

.collection-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 0 24px;
}

.collection-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:154px;
  height:100%;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:inherit;
  text-decoration:none;
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.collection-card:hover{
  border-color:var(--accent);
  background:rgba(234,88,12,.06);
  transform:none;
  box-shadow:none;
}

.collection-card .section-kicker{
  margin:0;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.collection-card h3{
  margin:0;
  color:var(--accent);
  font-size:18px;
  line-height:1.12;
  min-height:2.05em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.collection-card p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.collection-card h3 + p{
  min-height:2.95em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.guide-teaser-card{
  position:relative;
  counter-increment:guide-card;
  gap:10px;
  min-height:176px;
  padding:24px 28px 20px;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.08), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--panel);
  border:0;
  border-radius:10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.065),
    0 14px 34px rgba(0,0,0,.22);
}

.guide-teaser-card::before{
  content:counter(guide-card, decimal-leading-zero);
  position:absolute;
  right:16px;
  top:12px;
  color:rgba(255,255,255,.055);
  font-size:56px;
  line-height:.8;
  font-weight:800;
  letter-spacing:0;
  pointer-events:none;
}

.guide-teaser-card .section-kicker{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(234,88,12,.95);
  font-size:12px;
  letter-spacing:.08em;
}

.guide-teaser-card .section-kicker::before{
  content:none;
}

.guide-teaser-card h3{
  position:relative;
  z-index:1;
  max-width:88%;
  color:#fff;
  font-size:21px;
  line-height:1.08;
  min-height:2.15em;
}

.guide-teaser-card h3 + p{
  position:relative;
  z-index:1;
  max-width:88%;
  min-height:3em;
  color:#b8c1ca;
}

.guide-teaser-card::after{
  content:"Open article →";
  position:relative;
  z-index:1;
  display:inline-flex;
  margin-top:auto;
  padding-top:6px;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.guide-teaser-card .collection-card-footer{
  display:none;
}

.collection-card-footer{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:6px;
  border-top:0;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.collection-card-footer::after{
  content:"→";
  color:var(--accent);
  font-size:13px;
}

.guide-teaser-card:hover{
  background:
    radial-gradient(circle at 86% 18%, rgba(234,88,12,.16), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.016)),
    var(--panel);
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(234,88,12,.86),
    inset 0 0 0 3px rgba(234,88,12,.12),
    0 18px 38px rgba(0,0,0,.26);
}

@media (max-width:700px){
  .collection-card{
    min-height:140px;
    padding:12px;
  }

  .collection-card h3{
    font-size:17px;
    min-height:0;
  }

  .collection-card h3 + p{
    min-height:0;
  }

  .guide-teaser-card{
    min-height:164px;
    padding:18px 20px 16px;
  }

  .guide-teaser-card::before{
    right:12px;
    top:10px;
    font-size:44px;
  }

  .guide-teaser-card h3{
    max-width:90%;
    font-size:18px;
  }

  .guide-teaser-card h3 + p{
    max-width:90%;
    min-height:0;
  }
}

body[data-page-id="category"] .category-collection-shell{
  margin:0 0 8px;
}

body[data-page-id="category"] #campCollectionsGrid.collection-grid,
body[data-page-id="category"] #gearCollectionsGrid.collection-grid{
  counter-reset:guide-card;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:14px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  align-items:stretch !important;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:10px;
  -webkit-overflow-scrolling:touch;
  padding:10px 10px 18px !important;
  margin:0 0 24px !important;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

body[data-page-id="category"] #campCollectionsGrid.collection-grid::-webkit-scrollbar,
body[data-page-id="category"] #gearCollectionsGrid.collection-grid::-webkit-scrollbar{
  display:none;
  height:0;
}

body[data-page-id="category"] #campCollectionsGrid.collection-grid > *,
body[data-page-id="category"] #gearCollectionsGrid.collection-grid > *{
  flex:0 0 calc((100% - 28px) / 3);
  min-width:calc((100% - 28px) / 3);
  max-width:calc((100% - 28px) / 3);
  scroll-snap-align:start;
  height:100%;
  padding:24px 28px 20px;
  box-sizing:border-box;
}

.home-start-here{
  padding:26px 0 8px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.01);
}

.start-here-grid{
  margin-bottom:0;
}

.start-here-grid .collection-card{
  min-height:0;
}

body[data-page-id="home"] #campGuideGrid.collection-grid,
body[data-page-id="home"] #gearGuideGrid.collection-grid{
  counter-reset:guide-card;
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-columns:none !important;
  grid-auto-columns:calc((100% - 28px) / 3) !important;
  gap:14px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  align-items:stretch !important;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:10px;
  -webkit-overflow-scrolling:touch;
  padding:10px 10px 18px !important;
  margin:0 0 24px !important;
}

@media (min-width: 1101px){
  body[data-page-id="home"] #campGuideGrid.collection-grid,
  body[data-page-id="home"] #gearGuideGrid.collection-grid{
    grid-auto-columns:calc((100% - 28px) / 3) !important;
    gap:14px !important;
    padding:10px 10px 18px !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:24px 28px 20px !important;
  }
}

/* Final mobile card width parity: homepage How-To + category cards match homepage Camp cards. */
@media (max-width:700px){
  html body[data-page-id="home"] #howToGrid.howto-home-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:100% !important;
    gap:0 !important;
    width:100% !important;
    margin:0 0 24px !important;
    padding:8px 0 14px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:0 !important;
    box-sizing:border-box !important;
    scrollbar-width:none !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid::-webkit-scrollbar{
    display:none !important;
    height:0 !important;
  }

  html body[data-page-id="category"] .index-grid,
  html body[data-page-id="category"] .howto-index-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
    justify-items:center !important;
    overflow:visible !important;
    padding-top:8px !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid > *,
  html body[data-page-id="category"] .index-grid > .category-card-link,
  html body[data-page-id="category"] .howto-index-grid > .category-card-link{
    display:flex !important;
    justify-content:center !important;
    width:calc(100% - 24px) !important;
    min-width:calc(100% - 24px) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
    scroll-snap-align:start !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid > * > .card,
  html body[data-page-id="category"] .index-grid > .category-card-link > .card,
  html body[data-page-id="category"] .howto-index-grid > .category-card-link > .card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link > .howto-card,
  html body[data-page-id="category"] .howto-index-grid > .category-card-link > .howto-card{
    border-color:var(--line) !important;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link:hover > .howto-card,
  html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link:focus-visible > .howto-card,
  html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link > .howto-card:hover,
  html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link > .howto-card:focus-within,
  html body[data-page-id="category"] .howto-index-grid > .category-card-link:hover > .howto-card,
  html body[data-page-id="category"] .howto-index-grid > .category-card-link:focus-visible > .howto-card,
  html body[data-page-id="category"] .howto-index-grid > .category-card-link > .howto-card:hover,
  html body[data-page-id="category"] .howto-index-grid > .category-card-link > .howto-card:focus-within{
    border-color:var(--accent) !important;
    box-shadow:var(--shadow) !important;
  }
}

/* =========================================================
   HOW-TO PARITY PASS
   Keep How-To cards on the same frame as the camp/gear cards.
   ========================================================= */
.home-carousel-shell,
.category-collection-shell,
.howto-carousel-shell{
  padding-top:8px;
}

body[data-page-id="home"] #howToGrid.howto-home-grid{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-columns:none !important;
  grid-auto-columns:calc((100% - 36px) / 3) !important;
  gap:18px !important;
  align-items:start !important;
  margin:0 0 24px !important;
  padding:2px 2px 14px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-padding-inline:2px !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch;
}

body[data-page-id="home"] #howToGrid.howto-home-grid::-webkit-scrollbar{
  display:none;
  height:0;
}

body[data-page-id="home"] #howToGrid.howto-home-grid > *{
  box-sizing:border-box !important;
  min-width:0 !important;
  padding-inline:2px !important;
  scroll-snap-align:start !important;
}

body[data-page-id="home"] #howToGrid .howto-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:0 !important;
  padding:14px !important;
  overflow:visible !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel) !important;
}

body[data-page-id="home"] #howToGrid .howto-card:hover{
  transform:none !important;
}

body[data-page-id="home"] #howToGrid .thumb{
  position:relative !important;
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding-top:0 !important;
  overflow:hidden !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:#0d1015 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;
  flex:0 0 auto !important;
}

body[data-page-id="home"] #howToGrid .thumb img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
  transform:none !important;
  border-radius:inherit !important;
}

body[data-page-id="home"] #howToGrid .card-body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  gap:4px !important;
  padding:10px 0 0 !important;
}

body[data-page-id="home"] #howToGrid .card-meta{
  margin:0 0 2px !important;
  color:var(--accent) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

body[data-page-id="home"] #howToGrid h4{
  margin:0 0 2px !important;
  min-height:0 !important;
  height:auto !important;
  color:#fff !important;
  font-size:16px !important;
  line-height:1.2 !important;
}

body[data-page-id="home"] #howToGrid .desc{
  margin:0 !important;
  color:var(--muted) !important;
  font-size:15px !important;
  line-height:1.45 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
}

body[data-page-id="home"] #howToGrid .card-tags{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:auto !important;
  padding-top:8px !important;
}

@media (max-width:700px){
  body[data-page-id="home"] #howToGrid.howto-home-grid{
    grid-auto-columns:100% !important;
    gap:0 !important;
    padding:2px 0 14px !important;
    scroll-padding-inline:0 !important;
  }

  body[data-page-id="home"] #howToGrid.howto-home-grid > *{
    width:min(340px, calc(100% - 24px)) !important;
    min-width:min(340px, calc(100% - 24px)) !important;
    max-width:340px !important;
    margin:0 auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  body[data-page-id="home"] #howToGrid.howto-home-grid > * > .card{
    width:100% !important;
    max-width:100% !important;
  }
}

body[data-page-id="home"] #campGuideGrid.collection-grid > *,
body[data-page-id="home"] #gearGuideGrid.collection-grid > *{
  min-width:0;
  scroll-snap-align:start;
  padding:24px 28px 20px;
  box-sizing:border-box;
}

body[data-page-id="home"] #campGuideGrid.collection-grid::-webkit-scrollbar,
body[data-page-id="home"] #gearGuideGrid.collection-grid::-webkit-scrollbar{
  height:8px;
}

body[data-page-id="home"] #campGuideGrid.collection-grid::-webkit-scrollbar-thumb,
body[data-page-id="home"] #gearGuideGrid.collection-grid::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}

@media (max-width: 1100px){
  body[data-page-id="home"] #campGuideGrid.collection-grid,
  body[data-page-id="home"] #gearGuideGrid.collection-grid{
    grid-auto-columns:calc((100% - 14px) / 2) !important;
  }
}

.roundup-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
}

.roundup-callout{
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid rgba(234,88,12,.45);
  border-radius:10px;
  background:rgba(234,88,12,.08);
  color:var(--muted);
  line-height:1.55;
}

.roundup-callout strong{
  color:#fff;
}

.roundup-section{
  margin-top:26px;
}

.roundup-section .title{
  margin:0 0 6px;
  font-size:1.25rem;
}

.roundup-section .lead{
  margin:0 0 14px;
}

.roundup-section ul{
  margin:0;
  padding-left:20px;
  color:#fff;
  line-height:1.6;
}

.roundup-section li{
  margin:8px 0;
}

.roundup-section li::marker{
  color:var(--accent);
}

.related-section{
  margin:22px 0 0;
}

.related-section-inline{
  margin:26px 0 0;
}

body[data-guide-layout="editorial"] .category-section > .wrap > .related-section-inline{
  width:100%;
  max-width:100%;
}

.related-section .related-headline{
  margin-bottom:14px;
}

body[data-guide-layout="editorial"] .related-headline .section-kicker{
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 4px;
  font-size:13px;
  font-weight:800;
  color:#fff;
}

.related-grid{
  margin-bottom:0;
}

.related-section .tool-link-list{
  margin-top:8px;
}

body[data-guide-layout="editorial"] .roundup-callout{
  border-color:var(--line);
  background:rgba(255,255,255,.03);
  color:#d3d9df;
}

body[data-guide-layout="editorial"] .guide-author{
  position:absolute;
  top:6px;
  right:20px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 8px 8px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:rgba(15,17,21,.92);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}

body[data-guide-layout="editorial"] .guide-author img{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--accent);
  flex:0 0 auto;
}

body[data-guide-layout="editorial"] .guide-author span{
  color:#fff;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

body[data-guide-layout="editorial"] .guide-top-note{
  margin-top:10px;
  margin-bottom:20px;
}

body[data-guide-layout="editorial"] .roundup-callout strong{
  color:#fff;
}

body[data-guide-layout="editorial"] .roundup-section .title{
  color:#fff;
  font-size:1.15rem;
}

body[data-guide-layout="editorial"] .tool-list-card{
  background:rgba(255,255,255,.02);
}

body[data-guide-layout="editorial"] .tool-list-card h3{
  color:var(--muted);
  font-size:18px;
}

body[data-guide-layout="editorial"] .tool-list-card .section-kicker{
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-guide-layout="editorial"] .tool-list-note{
  color:#c2c8cf;
}

body[data-guide-layout="editorial"] .roundup-section ul{
  color:#d7dde3;
}

/* =========================================================
   CATEGORY PAGE MATCH PASS (2026-04-16)
   Pull list pages closer to homepage cards and move search up.
   ========================================================= */

body[data-page-id="category"] .category-section .wrap{
  position:relative;
}

body[data-page-id="category"] .breadcrumbs{
  font-size:16px !important;
  margin:0 0 16px !important;
}

body[data-page-id="category"] .category-headline{
  position:relative;
  display:block !important;
  padding-right:0;
  min-height:0;
}

body[data-page-id="category"] .category-headline .section-kicker{
  font-size:13px !important;
  font-weight:800 !important;
}

body[data-page-id="category"] .category-headline .title{
  margin:0 0 8px !important;
  font-size:1.8rem !important;
  line-height:1.08 !important;
}

body[data-page-id="category"] .category-headline .section-intro{
  max-width:none;
  margin:0;
}

body[data-page-id="category"]:not([data-guide-layout="editorial"]) .category-headline{
  padding-right:340px;
  min-height:120px;
}

body[data-page-id="category"] .category-tools{
  position:absolute !important;
  top:-24px !important;
  right:0 !important;
  width:min(300px,30vw);
  margin:0 !important;
  display:grid !important;
  gap:8px;
  justify-items:end;
}

body[data-page-id="category"] .category-tools .input{
  min-height:40px;
  border-color:var(--line);
  background:rgba(255,255,255,.03);
}

body[data-page-id="category"] .section-divider{
  margin:16px 0 24px !important;
}

body[data-index-type="search"] .category-headline{
  margin-bottom:10px !important;
  min-height:90px !important;
}

body[data-index-type="search"] .section-divider{
  margin:12px 0 24px !important;
}

body[data-page-id="category"] .category-card{
  padding:14px !important;
  overflow:visible !important;
}

body[data-page-id="category"] .category-card .thumb{
  position:relative;
  margin:0 !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  overflow:hidden !important;
}

body[data-page-id="category"] .category-card .card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:0;
  padding:0 !important;
}

body[data-page-id="category"] .category-card .card-meta{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

body[data-page-id="category"] .category-card h4{
  margin:10px 0 6px !important;
  min-height:0 !important;
  font-size:16px !important;
  line-height:1.25 !important;
}


body[data-page-id="category"] .category-card .desc{
  margin:0 !important;
  min-height:0 !important;
  font-size:15px !important;
  line-height:1.45 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
}

body[data-page-id="category"] .category-card .card-tags{
  margin-top:auto !important;
  padding-top:8px;
}

body[data-page-id="category"][data-index-type="projects"] .category-card .card-meta,
body[data-page-id="category"][data-index-type="code"] .category-card .card-meta,
body[data-page-id="category"][data-index-type="gear"] .category-card .card-meta{
  display:none !important;
}

body[data-page-id="category"][data-index-type="projects"] .category-card .card-tags,
body[data-page-id="category"][data-index-type="code"] .category-card .card-tags,
body[data-page-id="category"][data-index-type="gear"] .category-card .card-tags{
  padding-top:10px;
}

body[data-page-id="category"] .camp-card .camp-rating{
  margin:0 0 6px !important;
}

body[data-page-id="category"] .camp-badge-new{
  top:12px;
  left:12px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.6);
  background:var(--accent);
  color:#000;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}

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

  body[data-page-id="category"] .category-headline{
    padding-right:0;
    min-height:0;
  }

  body[data-page-id="category"] .category-tools{
    position:static !important;
    width:100%;
    justify-items:start;
    margin-top:14px !important;
  }
}


/* =========================================================
   FIX PACK (2026-02-23)
   - NEW badges always visible on Camp grid
   - Remove modal header bars, use floating close button
   - Tight, consistent modal top spacing (match Camp)
   - Restore orange scrollbars (kept below if already present)
   ========================================================= */

/* --- NEW badge (Camp grid only) --- */
#campGrid .thumb{ position:relative !important; }
#campGrid .thumb img{ position:relative !important; z-index:1 !important; }
#campGrid .camp-badge-new{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  z-index:3 !important;
  display:inline-flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
}

/* --- Modals: remove title/menu bars, unify spacing --- */
.modal-card{ position:relative !important; grid-template-rows:1fr !important; }
.modal-head{ display:none !important; }

/* Floating close button for ALL modals */
.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  z-index:20;
}
.modal-close:hover{
  border-color:var(--accent);
  background:rgba(0,0,0,.82);
  color:var(--accent);
}

/* Tight body padding */
.modal-body{ padding:12px 16px 16px !important; }

/* Hide embedded page header/nav/menu INSIDE modal content */
.modal .modal-body header,
.modal .modal-body nav,
.modal .modal-body #mobileMenu,
.modal .modal-body .mobile-menu{
  display:none !important;
}

/* Project pages: don't add a giant section gap under the title */
.project-page{
  padding-top: 0 !important;        /* kills the 56px */
  padding-bottom: 56px;              /* keep normal bottom spacing */
}

/* Optional: set the “nice but not too tight” spacing knob */
:root{ --proj-gap: 14px; }           /* try 16px if you want a hair looser */
.proj-wrap{ padding-bottom: var(--proj-gap) !important; }

/* thumbnails match camp cards */
.grid .thumb{
  position: relative;
  overflow: hidden;
}

.grid .thumb img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

/* subtle zoom on hover */
.grid .card:hover .thumb img{
  transform: scale(1.04);
}

/* ==========================================
   FORCE CODE CARDS TO MATCH PROJECT SCALE
   ========================================== */

@media (min-width: 901px){

  /* keep the code section on the same 3-up desktop grid */
  #codeGrid.grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:16px !important;
    align-items:stretch !important;
  }

  /* make every code card the same overall size */
  #codeGrid .code-card{
    display:flex !important;
    flex-direction:column !important;
    min-height:520px !important;
    height:100% !important;
  }

  /* make the image area match the visual weight of Projects/Camp */
  #codeGrid .code-card .thumb{
    aspect-ratio:1 / 1 !important;
    min-height:280px !important;
    max-height:280px !important;
    flex:0 0 280px !important;
  }

  #codeGrid .code-card .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  /* reserve space for title + description so the section feels consistent */
  #codeGrid .code-card h4{
    min-height:2.6em !important;
  }

  #codeGrid .code-card .desc,
  #codeGrid .code-card .lead,
  #codeGrid .code-card p{
    min-height:4.7em !important;
  }

  #codeGrid .code-card .card-tags{
    margin-top:auto !important;
  }
}

.card h4{
  min-height: 2.5em;
}

.card .desc{
  min-height: 4.5em;
}

#code{
  padding-bottom: 24px !important;
}

#camp{
  padding-top: 28px !important;
}
#fc-cart.is-empty{
  display:none !important;
}

/* Camp rating */
.camp-rating{
  display:flex;
  align-items:center;
  gap:6px;
  margin:4px 0 6px;
}

.camp-rating .stars{
  color:var(--accent);
  letter-spacing:2px;
  font-size:14px;
}

.camp-rating .score{
  color:var(--muted);
  font-size:12px;
}



/* camp cards */
#campGrid .camp-card .camp-rating{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  line-height:1;
}

#campGrid .camp-card .camp-rating .stars{
  color:var(--accent);
  font-size:14px;
  letter-spacing:1px;
  line-height:1;
}

#campGrid .camp-card .camp-rating .score{
  color:var(--muted);
  font-size:12px;
  line-height:1;
}

/* camp page header only */
.camp-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin:0 0 5px;
}

.camp-header .camp-rating{
  display:flex;
  align-items:center;
  gap:4px;
}

.camp-header .camp-rating .stars{
  font-size:20px;
  letter-spacing:2px;
}

.camp-header .camp-rating .score{
  font-size:18px;
  color:#fff;
  font-weight:700;
}

/* camp card title-to-rating gap fix */
#campGrid .camp-card h4{
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}

#campGrid .camp-card .camp-rating{
  margin: 0 !important;
}

/* force correct orange on camp card stars */
#campGrid .camp-card .camp-rating .stars{
  color: var(--accent) !important;
}

/* ==========================================
   CATEGORY INDEX PAGES
   Full lists use the same card language as the homepage.
   ========================================== */

body[data-page-id="category"] .index-page{
  padding-top:var(--navh);
}

body[data-page-id="category"] .index-hero{
  padding:44px 0 26px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#10141a 0%,var(--bg) 100%);
}

body[data-page-id="category"] .breadcrumbs{
  color:var(--muted);
  font-size:14px;
  margin:0 0 18px;
}

body[data-page-id="category"] .breadcrumbs a{
  color:var(--muted);
  text-decoration:none;
}

body[data-page-id="category"] .breadcrumbs a:hover{
  color:var(--accent);
}

body[data-page-id="category"] .index-hero h1{
  color:var(--accent);
  font-size:clamp(38px,6vw,68px);
  line-height:1;
  margin:4px 0 12px;
}

body[data-page-id="category"] .index-hero .lead{
  max-width:780px;
}

body[data-page-id="category"] .index-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  max-width:780px;
  margin-top:22px;
}

body[data-page-id="category"] .input{
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:#08090c;
  color:#fff;
  padding:10px 12px;
  font:inherit;
}

body[data-page-id="category"] .input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(234,88,12,.2);
}

body[data-page-id="category"] .index-count{
  color:var(--muted);
  font-size:14px;
  white-space:nowrap;
}

body[data-page-id="category"] .index-results{
  padding:30px 0 64px;
}

body[data-page-id="category"] .index-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
  justify-content:start;
}

body[data-page-id="category"] .category-card-link{
  color:inherit;
  text-decoration:none;
  display:block;
  min-height:100%;
}

body[data-page-id="category"] .category-card{
  overflow:hidden;
  padding:0 0 6px;
}

body[data-page-id="category"] .category-card .thumb{
  position:relative;
  border-radius:12px;
  border:1px solid var(--line);
  margin:14px 14px 0;
}

body[data-page-id="category"] .category-card .card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:10px 12px 12px;
  gap:0;
}

body[data-page-id="category"] .category-card .card-meta{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0;
}

body[data-index-type="how-to"] .category-card .card-meta,
body[data-index-type="how-to"] .howto-card .card-meta{
  color:var(--accent);
}

body[data-page-id="category"] .category-card h4{
  margin:2px 0 4px;
  font-size:16px;
  line-height:1.25;
  min-height:0 !important;
}

body[data-page-id="category"] .category-card .desc{
  margin:0;
  font-size:15px;
  color:var(--muted);
  line-height:1.45;
  min-height:0 !important;
}

body[data-page-id="category"] .category-card .card-tags{
  margin-top:8px;
  padding-top:0;
}

.howto-home-grid,
body[data-index-type="how-to"] .howto-index-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  margin:0 0 24px;
}

.howto-carousel-shell .howto-home-grid{
  grid-auto-flow:column;
  grid-template-columns:none;
  grid-auto-columns:calc((100% - 36px) / 3);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  scrollbar-width:none;
}

.howto-carousel-shell .howto-home-grid::-webkit-scrollbar{
  display:none;
}

.howto-carousel-shell .howto-home-grid > *{
  scroll-snap-align:start;
}

.howto-home-grid .category-card-link,
body[data-index-type="how-to"] .category-card-link{
  color:inherit;
  text-decoration:none;
  display:flex;
  min-height:100%;
}

.howto-home-grid .howto-card,
body[data-index-type="how-to"] .howto-card{
  width:100%;
  height:100%;
  overflow:hidden;
  padding:0;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
}

.howto-card .thumb{
  aspect-ratio:16/9;
  margin:14px 14px 0;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#090b0e;
}

.howto-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.howto-card .card-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 16px 16px;
}

.howto-card .card-meta{
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.howto-card h4{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.12;
}

.howto-card .desc{
  margin:0;
  color:#b8c1ca;
  line-height:1.45;
}

.howto-card .card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
}

.howto-card:hover,
.howto-home-grid .category-card-link:hover .howto-card,
.howto-home-grid .category-card-link:focus-visible .howto-card,
body[data-index-type="how-to"] .category-card-link:hover .howto-card,
body[data-index-type="how-to"] .category-card-link:focus-visible .howto-card{
  border-color:rgba(234,88,12,.8);
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}

body[data-index-type="how-to"] .howto-section-stack{
  display:grid;
  gap:36px;
}

body[data-index-type="how-to"] .howto-start-path{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:12px;
  align-items:stretch;
  margin:0 0 28px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(234,88,12,.12), rgba(255,255,255,.025) 42%, rgba(0,0,0,.12));
}

body[data-index-type="how-to"] .howto-path-head{
  display:grid;
  align-content:center;
  gap:6px;
}

body[data-index-type="how-to"] .howto-path-head .section-kicker{
  margin:0;
  color:var(--accent);
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
}

body[data-index-type="how-to"] .howto-path-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(1.1rem, 2.2vw, 1.45rem);
  line-height:1.08;
}

body[data-index-type="how-to"] .howto-path-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

body[data-index-type="how-to"] .howto-path-card{
  display:grid;
  gap:5px;
  align-content:start;
  min-height:96px;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(10,12,15,.72);
  color:var(--ink);
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}

body[data-index-type="how-to"] .howto-path-card:hover,
body[data-index-type="how-to"] .howto-path-card:focus-visible{
  border-color:rgba(234,88,12,.85);
  background:rgba(15,17,21,.92);
  transform:translateY(-2px);
  outline:none;
}

body[data-index-type="how-to"] .howto-path-card span{
  color:var(--accent);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-index-type="how-to"] .howto-path-card strong{
  color:#fff;
  font-size:.96rem;
  line-height:1.15;
}

body[data-index-type="how-to"] .howto-path-card em{
  color:var(--muted);
  font-size:.86rem;
  font-style:normal;
  line-height:1.45;
}

@media (max-width:900px){
  body[data-index-type="how-to"] .howto-start-path{
    grid-template-columns:1fr;
  }
}

@media (max-width:680px){
  body[data-index-type="how-to"] .howto-start-path{
    padding:14px;
    margin-bottom:28px;
  }

  body[data-index-type="how-to"] .howto-path-grid{
    grid-template-columns:1fr;
  }

  body[data-index-type="how-to"] .howto-path-card{
    min-height:0;
  }
}

body[data-index-type="how-to"] .howto-topic-section{
  padding-top:4px;
}

body[data-index-type="how-to"] .howto-topic-section + .howto-topic-section{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:30px;
}

body[data-index-type="how-to"] .howto-topic-head{
  max-width:760px;
  margin:0 0 16px;
}

body[data-index-type="how-to"] .howto-topic-head .section-kicker{
  color:var(--accent);
  text-transform:uppercase;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
}

body[data-index-type="how-to"] .howto-topic-head h2{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(1.35rem, 3vw, 1.9rem);
  line-height:1.08;
}

body[data-index-type="how-to"] .howto-topic-head p:not(.section-kicker){
  margin:0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.55;
}

body[data-index-type="gear"] .gear-section-stack{
  display:grid;
  gap:36px;
}

body[data-index-type="gear"] .gear-hub-panel{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.45fr);
  gap:12px;
  align-items:stretch;
  margin:0 0 22px;
}

body[data-index-type="gear"] .gear-hub-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
  padding:16px;
  border:1px solid rgba(234,88,12,.44);
  border-radius:8px;
  background:
    radial-gradient(circle at 18% 0%, rgba(234,88,12,.18), rgba(234,88,12,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--panel);
  box-shadow:none;
}

body[data-index-type="gear"] .gear-hub-copy .section-kicker{
  margin:0 0 8px;
  color:var(--accent);
}

body[data-index-type="gear"] .gear-hub-copy h2{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(1.18rem, 2.4vw, 1.55rem);
  line-height:1.05;
}

body[data-index-type="gear"] .gear-hub-copy p:not(.section-kicker){
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.48;
}

body[data-index-type="gear"] .gear-hub-lanes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

body[data-index-type="gear"] .gear-hub-lanes a{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:start;
  gap:7px;
  min-height:92px;
  padding:12px 38px 12px 12px;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(234,88,12,.11), rgba(234,88,12,0) 34%),
    rgba(255,255,255,.018);
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease;
}

body[data-index-type="gear"] .gear-hub-lanes a::after{
  content:"\2192";
  position:absolute;
  right:14px;
  bottom:11px;
  color:var(--accent);
  font-size:22px;
  font-weight:900;
  line-height:1;
}

body[data-index-type="gear"] .gear-hub-lanes a:hover,
body[data-index-type="gear"] .gear-hub-lanes a:focus-visible{
  border-color:var(--accent);
  background:
    linear-gradient(135deg, rgba(234,88,12,.18), rgba(234,88,12,.03) 42%),
    rgba(255,255,255,.024);
  transform:translateY(-1px);
}

body[data-index-type="gear"] .gear-hub-lanes span{
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-index-type="gear"] .gear-hub-lanes strong{
  max-width:88%;
  color:#fff;
  font-size:.94rem;
  line-height:1.22;
}

body[data-index-type="gear"] .gear-topic-section{
  padding-top:4px;
  scroll-margin-top:calc(var(--navh) + 18px);
}

body[data-index-type="gear"] .gear-topic-section + .gear-topic-section{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:30px;
}

body[data-index-type="gear"] .gear-topic-head{
  max-width:780px;
  margin:0 0 16px;
}

body[data-index-type="gear"] .gear-topic-head .section-kicker{
  color:var(--accent);
  text-transform:uppercase;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
}

body[data-index-type="gear"] .gear-topic-head h2{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(1.35rem, 3vw, 1.9rem);
  line-height:1.08;
}

body[data-index-type="gear"] .gear-topic-head p:not(.section-kicker){
  margin:0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.55;
}

@media (max-width:900px){
  body[data-index-type="gear"] .gear-hub-panel{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  body[data-index-type="gear"] .gear-hub-panel{
    gap:12px;
    margin-bottom:20px;
  }

  body[data-index-type="gear"] .gear-hub-copy{
    padding:18px;
  }

  body[data-index-type="gear"] .gear-hub-lanes{
    grid-template-columns:1fr;
  }

  body[data-index-type="gear"] .gear-hub-lanes a{
    min-height:0;
    padding:12px 38px 12px 12px;
  }
}

@media (min-width:701px){
  body[data-page-id="home"] .howto-carousel-shell .howto-home-grid{
    align-items:stretch;
  }

  body[data-page-id="home"] .howto-carousel-shell .howto-home-grid > .category-card-link{
    min-height:520px;
  }

  body[data-page-id="home"] .howto-carousel-shell .howto-home-grid > .category-card-link > .howto-card{
    height:100%;
  }
}

.guide-hero-image{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  margin:18px 0 18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#090b0e;
  box-shadow:0 18px 38px rgba(0,0,0,.22);
}

.guide-body{
  display:grid;
  gap:22px;
  margin-top:20px;
}

.guide-panel{
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel);
  padding:22px;
}

.guide-panel h2,
.guide-panel h3{
  margin:0 0 10px;
  color:#fff;
  line-height:1.15;
}

.guide-panel p{
  color:var(--muted);
  line-height:1.65;
  margin:0 0 12px;
}

.guide-panel p:last-child,
.guide-panel ul:last-child,
.guide-panel ol:last-child{
  margin-bottom:0;
}

.guide-panel ul,
.guide-panel ol{
  color:var(--muted);
  line-height:1.65;
  padding-left:20px;
  margin:10px 0 0;
}

.guide-panel li + li{
  margin-top:7px;
}

.gear-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:18px;
  align-items:start;
}

.gear-detail-media{
  border:1px solid var(--line);
  border-radius:12px;
  background:
    radial-gradient(circle at 68% 20%, rgba(234,88,12,.16), transparent 34%),
    linear-gradient(145deg, #05070a, #11151b 58%, #080a0d);
  padding:18px;
  min-height:420px;
  display:grid;
  place-items:center;
}

.gear-detail-media img{
  width:100%;
  max-height:520px;
  object-fit:contain;
  border-radius:10px;
}

.gear-detail-side{
  display:grid;
  gap:12px;
}

.gear-detail-buy{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#05070a;
  text-decoration:none;
  font-weight:800;
}

.gear-detail-buy:hover{
  filter:brightness(1.08);
}

.gear-detail-specs{
  display:grid;
  gap:8px;
}

.gear-detail-specs div{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:0 0 8px;
  color:var(--muted);
}

.gear-detail-specs strong{
  color:#fff;
}

.gear-detail-notes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

@media (max-width:900px){
  .gear-detail-layout,
  .gear-detail-notes{
    grid-template-columns:1fr;
  }
  .gear-detail-media{
    min-height:300px;
  }
}

.guide-check-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.guide-check{
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(0,0,0,.18);
  padding:16px;
}

.guide-check strong{
  display:block;
  color:#fff;
  margin-bottom:6px;
}

.guide-check span{
  display:block;
  color:var(--muted);
  line-height:1.5;
}

.guide-two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.guide-callout{
  border:1px solid rgba(234,88,12,.55);
  border-radius:12px;
  background:linear-gradient(135deg, rgba(234,88,12,.16), rgba(234,88,12,.03));
  color:#f4c7ae;
  line-height:1.6;
  padding:18px;
}

.guide-mini-nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:8px;
}

.guide-mini-nav a{
  display:block;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.025);
}

.guide-mini-nav a:hover{
  border-color:rgba(234,88,12,.8);
}

.guide-mini-nav span{
  display:block;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}

@media (max-width:900px){
  .howto-home-grid,
  body[data-index-type="how-to"] .howto-index-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .howto-carousel-shell .howto-home-grid{
    grid-template-columns:none;
    grid-auto-columns:calc((100% - 18px) / 2);
  }

  .guide-check-grid,
  .guide-mini-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .howto-home-grid,
  body[data-index-type="how-to"] .howto-index-grid{
    grid-template-columns:1fr;
  }

  .howto-carousel-shell .howto-home-grid{
    grid-template-columns:none;
    grid-auto-columns:100%;
  }

  .howto-card h4{
    font-size:19px;
  }

  .guide-hero-image{
    border-radius:10px;
    margin-top:14px;
  }

  .guide-panel{
    padding:18px;
  }

  .guide-check-grid,
  .guide-two-col,
  .guide-mini-nav{
    grid-template-columns:1fr;
  }
}

body[data-page-id="category"] .index-empty{
  margin-top:18px;
}

body[data-page-id="category"] .index-empty[hidden]{
  display:none !important;
}

.section-actions{
  margin:14px 0 0;
}

.section-headline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.section-headline-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.home-carousel-shell{
  position:relative;
}

.carousel-arrows{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  top:50%;
  transform:translateY(calc(-50% - 10px));
  pointer-events:none;
  z-index:4;
}

.carousel-arrow{
  position:absolute;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--accent);
  font-size:42px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:none;
  transition:color .18s ease, transform .18s ease, opacity .18s ease;
}

.carousel-arrow.prev{
  left:-54px;
}

.carousel-arrow.next{
  right:-54px;
}

.carousel-arrow:hover{
  color:#ff8a3d;
  transform:none;
}

.section-link-btn{
  flex:0 0 auto;
  margin-top:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 16px;
  border:1px solid rgba(234,88,12,.72);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(234,88,12,.18), rgba(234,88,12,.08)),
    rgba(255,255,255,.03);
  color:#fff7ed;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}

.section-link-btn::after{
  content:"→";
  color:var(--accent);
  font-size:14px;
  line-height:1;
  transition:transform .18s ease, color .18s ease;
}

.section-link-btn:hover{
  color:#fff;
  border-color:var(--accent);
  background:
    linear-gradient(180deg, rgba(234,88,12,.26), rgba(234,88,12,.12)),
    rgba(255,255,255,.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 28px rgba(0,0,0,.24);
}

.section-link-btn:hover::after{
  color:#ff8a3d;
  transform:translateX(2px);
}

.section-link-btn:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(234,88,12,.16);
}

.section-link-strip{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px 18px;
  align-items:center;
  margin-top:16px;
  padding:16px 56px 16px 18px;
  border:1px solid rgba(234,88,12,.5);
  border-radius:12px;
  background:
    radial-gradient(circle at 96% 20%, rgba(234,88,12,.18), transparent 34%),
    linear-gradient(180deg, rgba(234,88,12,.12), rgba(234,88,12,.055)),
    rgba(255,255,255,.02);
  color:inherit;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.section-link-strip::after{
  content:"→";
  position:absolute;
  right:18px;
  top:50%;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(234,88,12,.55);
  border-radius:8px;
  color:var(--accent);
  font-size:16px;
  font-weight:900;
  line-height:1;
  transform:translateY(-50%);
  transition:border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.section-link-strip:hover{
  border-color:var(--accent);
  background:
    radial-gradient(circle at 96% 20%, rgba(234,88,12,.24), transparent 34%),
    linear-gradient(180deg, rgba(234,88,12,.16), rgba(234,88,12,.075)),
    rgba(255,255,255,.025);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 30px rgba(0,0,0,.2);
  transform:translateY(-1px);
}

.section-link-strip:hover::after{
  border-color:var(--accent);
  background:rgba(234,88,12,.14);
  color:#ff8a3d;
  transform:translate(2px, -50%);
}

.section-link-strip strong{
  grid-column:1;
  color:#fff7ed;
  font-size:16px;
  line-height:1.2;
}

.section-link-strip em{
  grid-column:1;
  color:var(--muted);
  font-style:normal;
  font-size:13px;
  line-height:1.35;
}

@media (max-width:700px){
  .section-link-strip{
    gap:5px;
    padding:14px 54px 14px 16px;
  }

  .section-link-strip::after{
    right:16px;
  }
}

body[data-page-id="category"] .category-section{
  padding-top:calc(var(--navh) + 28px);
}

body[data-page-id="category"] .index-page{
  padding-top:0;
}

body[data-page-id="category"] .category-headline{
  align-items:flex-start;
}

body[data-page-id="category"] .category-headline .title{
  font-size:1.4rem;
  margin-bottom:12px;
}

@media (min-width:1024px){
  body[data-page-id="category"] .category-headline .title{
    font-size:1.8rem;
  }
}

.tool-suite-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:18px 0;
}

.tool-list-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:18px 0;
}

.decision-card{
  display:grid;
  gap:14px;
  margin:18px 0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(234,88,12,.08), rgba(234,88,12,0) 42%),
    var(--panel);
}

.decision-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.9fr);
  gap:14px;
  align-items:start;
}

.decision-card h3{
  margin:0;
  color:#fff;
  font-size:22px;
  line-height:1.1;
}

.decision-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.decision-item{
  display:grid;
  gap:6px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.03);
}

.decision-item strong{
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.decision-item span{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.camp-decision-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(234,88,12,.62) !important;
  background:
    linear-gradient(180deg, rgba(234,88,12,.10), rgba(234,88,12,.025) 46%, rgba(255,255,255,.018)),
    var(--panel) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}

.camp-decision-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--accent);
}

.camp-decision-card .section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px !important;
}

.camp-decision-card .section-title::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg, rgba(234,88,12,.65), rgba(234,88,12,0));
}

.camp-decision-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.camp-decision-grid .q{
  min-height:0;
  padding:14px;
  border:1px solid rgba(234,88,12,.24);
  border-left:3px solid rgba(234,88,12,.78);
  border-radius:10px;
  background:rgba(6,10,15,.72);
  line-height:1.5;
}

.camp-decision-grid .q .sub{
  display:block;
  margin:0 0 7px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.camp-decision-grid .q:nth-child(2){
  border-color:rgba(255,255,255,.16);
  border-left-color:rgba(148,163,184,.82);
  background:rgba(255,255,255,.045);
}

.camp-decision-grid .q:nth-child(n+3){
  background:rgba(234,88,12,.055);
}

@media (max-width:700px){
  .camp-decision-grid{
    grid-template-columns:1fr;
  }

  .camp-decision-grid .q{
    padding:13px;
  }
}

/* Camp pages: make choose/skip guidance read as a real decision module. */
article.camp-decision-card{
  position:relative !important;
  overflow:hidden !important;
  grid-column:1 / -1 !important;
  padding:18px !important;
  border:1px solid rgba(234,88,12,.72) !important;
  border-radius:12px !important;
  background:
    linear-gradient(180deg, rgba(234,88,12,.13), rgba(234,88,12,.035) 42%, rgba(255,255,255,.018)),
    var(--panel) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28) !important;
}

article.camp-decision-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--accent);
}

article.camp-decision-card .section-title{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 14px !important;
}

article.camp-decision-card .section-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(234,88,12,.75), rgba(234,88,12,0));
}

article.camp-decision-card > .camp-decision-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 !important;
}

article.camp-decision-card > .camp-decision-grid > .q{
  display:block !important;
  min-width:0 !important;
  padding:14px 14px 14px 16px !important;
  border:1px solid rgba(234,88,12,.28) !important;
  border-left:4px solid rgba(234,88,12,.9) !important;
  border-radius:10px !important;
  background:rgba(5,8,12,.72) !important;
  color:#e9edf3 !important;
  line-height:1.5 !important;
}

article.camp-decision-card > .camp-decision-grid > .q:nth-child(2){
  border-color:rgba(255,255,255,.16) !important;
  border-left-color:rgba(148,163,184,.95) !important;
  background:rgba(255,255,255,.045) !important;
}

article.camp-decision-card > .camp-decision-grid > .q .sub{
  display:block !important;
  margin:0 0 8px !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

@media (max-width:700px){
  article.camp-decision-card{
    padding:16px !important;
  }

  article.camp-decision-card > .camp-decision-grid{
    grid-template-columns:1fr !important;
  }
}

.project-grid > .below > article.card:not(.span-2) .bygo-grid-2{
  grid-template-columns:1fr !important;
}

.project-grid > .below > article.card:not(.span-2) .bygo-card{
  min-width:0 !important;
}

.project-grid > .below > article.card .steps{
  padding-left:20px !important;
  margin-left:0 !important;
}

.tool-list-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:100%;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    var(--panel);
}

.tool-list-card h3{
  margin:0;
  color:var(--accent);
  font-size:20px;
  line-height:1.15;
}

body[data-index-type="tools"] .tool-list-card .section-kicker{
  margin:0 0 8px;
  color:#f3f4f6;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.15;
  text-transform:uppercase;
}

.tool-list-note{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.tool-link-list{
  display:grid;
  gap:10px;
  margin-top:4px;
}

.tool-link-list a,
.tool-link-item{
  display:grid;
  gap:3px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  color:inherit;
  text-decoration:none;
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.tool-link-list a strong,
.tool-link-item strong{
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1.25;
}

.tool-link-list a span,
.tool-link-item span{
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.tool-link-list a:hover,
.tool-link-item:hover{
  border-color:var(--accent);
  background:rgba(234,88,12,.08);
  transform:translateY(-1px);
}

/* Shared styling for standalone utility pages in /repo/. */
body[data-tool-style="site"]{
  background:var(--bg) !important;
  color:var(--ink) !important;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

body[data-tool-style="site"] .brand-wordmark{
  color:var(--ink) !important;
}

body[data-tool-style="site"] .logo .f,
body[data-tool-style="site"] .brand-wordmark{
  color:#fff !important;
}

body[data-tool-style="site"] .logo .c,
body[data-tool-style="site"] .brand-wordmark span{
  color:var(--accent) !important;
}

body[data-tool-style="site"] .tool-page{
  padding:94px 0 42px !important;
}

body[data-tool-style="site"] header .nav{
  justify-content:space-between !important;
}

body[data-tool-style="site"] #topNav{
  margin-left:auto !important;
}

body[data-tool-style="site"] .menu-btn{
  display:none !important;
}

body[data-tool-style="site"] .tool-intro{
  max-width:1100px !important;
  margin:0 auto !important;
  padding:0 24px 18px !important;
  border-bottom:0 !important;
}

body[data-tool-style="site"] .tool-intro p.breadcrumbs{
  margin:0 0 18px !important;
  color:var(--muted) !important;
  font-size:16px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:1.4 !important;
  opacity:1 !important;
  text-transform:none !important;
}

body[data-tool-style="site"] .tool-intro .breadcrumbs a,
body[data-tool-style="site"] .tool-intro .breadcrumbs span{
  color:var(--muted) !important;
  font-size:inherit !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
  text-transform:none !important;
}

body[data-tool-style="site"] .tool-intro .breadcrumbs a:hover{
  color:var(--accent) !important;
}

body[data-tool-style="site"] .tool-intro .eyebrow,
body[data-tool-style="site"] .tool-intro .section-kicker{
  margin:0 0 6px !important;
  color:#f3f4f6 !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

body[data-tool-style="site"] .tool-intro h1{
  margin:0 0 8px !important;
  color:var(--accent) !important;
  font-size:1.8rem !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
}

body[data-tool-style="site"] .tool-intro > p:not(.eyebrow):not(.breadcrumbs):not(.section-kicker){
  max-width:760px !important;
  margin:0 !important;
  color:var(--muted) !important;
  font-size:16px !important;
  line-height:1.55 !important;
}

body[data-tool-style="site"] .tool-intro::after{
  content:"" !important;
  display:block !important;
  width:100% !important;
  max-width:760px !important;
  height:1px !important;
  margin:18px 0 0 !important;
  background:linear-gradient(90deg, var(--accent), rgba(234,88,12,.42), rgba(234,88,12,0)) !important;
}

body[data-tool-style="site"] .tool-intro + *{
  border-top:0 !important;
}

body[data-tool-style="site"] .tool-intro + .tool-actions{
  margin-top:10px !important;
  margin-bottom:14px !important;
}

body[data-tool-style="site"] .tool-wrap,
body[data-tool-style="site"] .finder-app .wrap,
body[data-tool-style="site"] .checklist-app .wrap{
  max-width:1100px !important;
  margin:0 auto !important;
  padding:18px 24px 24px !important;
}

body[data-tool-style="site"] .page-head,
body[data-tool-style="site"] .tool-actions,
body[data-tool-style="site"] .cookbook-hero-row{
  max-width:1100px !important;
  margin:0 auto 14px !important;
  padding:0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
}

body[data-tool-style="site"] .cookbook-hero{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  max-width:1100px !important;
  margin:0 auto !important;
  padding:18px 24px 0 !important;
  border:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
}

body[data-tool-style="site"] .cookbook-hero .spacer{
  display:none !important;
}

body[data-tool-style="site"] .cookbook-wrap{
  max-width:1100px !important;
  margin:0 auto !important;
  padding:18px 24px 24px !important;
}

body[data-tool-style="site"] .cookbook-wrap .filters{
  align-items:center !important;
  margin:0 0 14px !important;
}

body[data-tool-style="site"] .cookbook-wrap .search{
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
  flex:1 1 360px !important;
  max-width:520px !important;
}

body[data-tool-style="site"] .cookbook-wrap .search input{
  min-width:0 !important;
  width:100% !important;
  min-height:40px !important;
  padding:0 12px !important;
}

body[data-tool-style="site"] .cookbook-wrap .grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  align-items:start !important;
  gap:14px !important;
}

body[data-tool-style="site"] .cookbook-wrap details.card{
  min-width:0 !important;
  align-self:start !important;
  height:auto !important;
  overflow:hidden !important;
}

body[data-tool-style="site"] .cookbook-wrap details.card:not([open]){
  height:max-content !important;
  max-height:210px !important;
}

body[data-tool-style="site"] .cookbook-wrap details.card summary{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  align-items:start !important;
  gap:12px !important;
  min-height:156px !important;
  padding:16px !important;
  border-bottom:0 !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(234,88,12,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
}

body[data-tool-style="site"] .cookbook-wrap details.card:not([open]) summary{
  border-bottom:0 !important;
}

body[data-tool-style="site"] .cookbook-wrap details.card[open] summary{
  border-bottom:1px solid var(--line) !important;
}

body[data-tool-style="site"] .cookbook-wrap .ic,
body[data-tool-style="site"] .cookbook-wrap .meta svg{
  display:none !important;
}

body[data-tool-style="site"] .cookbook-wrap .title{
  margin:0 !important;
  color:#fff !important;
  font-size:20px !important;
  line-height:1.14 !important;
  letter-spacing:0 !important;
}

body[data-tool-style="site"] .cookbook-wrap .meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:12px !important;
  color:var(--muted) !important;
  font-size:12px !important;
  line-height:1.35 !important;
}

body[data-tool-style="site"] .cookbook-wrap .meta span{
  display:inline-flex !important;
  align-items:center !important;
}

body[data-tool-style="site"] .cookbook-wrap .badges{
  display:flex !important;
  gap:6px !important;
  flex-wrap:wrap !important;
  margin-top:12px !important;
}

body[data-tool-style="site"] .cookbook-wrap .badge,
body[data-tool-style="site"] .cookbook-wrap .chip,
body[data-tool-style="site"] .cookbook-wrap .store{
  border-color:rgba(234,88,12,.38) !important;
  background:rgba(234,88,12,.08) !important;
  color:#f3f4f6 !important;
}

body[data-tool-style="site"] .cookbook-wrap .chev{
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  color:var(--accent) !important;
  fill:currentColor !important;
}

body[data-tool-style="site"] .cookbook-wrap .body{
  padding:14px !important;
}

body[data-tool-style="site"] .cookbook-wrap .row{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
}

body[data-tool-style="site"] .cookbook-wrap .section{
  padding:12px !important;
}

body[data-tool-style="site"] .cookbook-wrap .section h3{
  color:var(--accent) !important;
  font-size:13px !important;
  line-height:1.2 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}

body[data-tool-style="site"] .cookbook-wrap ol,
body[data-tool-style="site"] .cookbook-wrap ul{
  margin-top:8px !important;
  color:var(--ink) !important;
}

body[data-tool-style="site"] .cookbook-wrap li{
  margin:6px 0 !important;
  line-height:1.45 !important;
}

body[data-tool-style="site"] .checklist-app .item input[type="checkbox"],
body[data-tool-style="site"] .cookbook-wrap .ing input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  position:relative !important;
  padding:0 !important;
  border:2px solid #263244 !important;
  border-radius:6px !important;
  background:#05080d !important;
  cursor:pointer !important;
  box-shadow:none !important;
}

body[data-tool-style="site"] .checklist-app .item input[type="checkbox"]:checked,
body[data-tool-style="site"] .cookbook-wrap .ing input[type="checkbox"]:checked{
  border-color:var(--accent) !important;
  background:var(--accent) !important;
}

body[data-tool-style="site"] .checklist-app .item input[type="checkbox"]:checked::after,
body[data-tool-style="site"] .cookbook-wrap .ing input[type="checkbox"]:checked::after{
  content:"" !important;
  position:absolute !important;
  left:4px !important;
  top:1px !important;
  width:5px !important;
  height:9px !important;
  border:solid #090b0f !important;
  border-width:0 2px 2px 0 !important;
  transform:rotate(45deg) !important;
}

body[data-tool-style="site"] .checklist-app .item input[type="checkbox"]:focus-visible,
body[data-tool-style="site"] .cookbook-wrap .ing input[type="checkbox"]:focus-visible{
  outline:2px solid rgba(234,88,12,.65) !important;
  outline-offset:2px !important;
}

@media (max-width:980px){
  body[data-tool-style="site"] .cookbook-wrap .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:700px){
  body[data-tool-style="site"] .cookbook-wrap .grid{
    grid-template-columns:1fr !important;
  }
}

body[data-tool-style="site"] .card,
body[data-tool-style="site"] .container,
body[data-tool-style="site"] .panel,
body[data-tool-style="site"] .svg-wrap,
body[data-tool-style="site"] details.card,
body[data-tool-style="site"] .match-card,
body[data-tool-style="site"] .match-detail,
body[data-tool-style="site"] .section,
body[data-tool-style="site"] .item,
body[data-tool-style="site"] .ing,
body[data-tool-style="site"] .toggle,
body[data-tool-style="site"] .out{
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel) !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}

body[data-tool-style="site"] .card,
body[data-tool-style="site"] .container,
body[data-tool-style="site"] .panel-inner,
body[data-tool-style="site"] .bd{
  padding:16px !important;
}

body[data-tool-style="site"] details.card,
body[data-tool-style="site"] .match-card{
  overflow:hidden !important;
}

body[data-tool-style="site"] details.card summary,
body[data-tool-style="site"] .head,
body[data-tool-style="site"] .hd,
body[data-tool-style="site"] .results-head{
  border-bottom:1px solid var(--line) !important;
  background:rgba(255,255,255,.018) !important;
}

body[data-tool-style="site"] details.card summary,
body[data-tool-style="site"] .head,
body[data-tool-style="site"] .hd{
  padding:14px 16px !important;
}

body[data-tool-style="site"] .body,
body[data-tool-style="site"] .items{
  padding:14px 16px !important;
}

body[data-tool-style="site"] .grid,
body[data-tool-style="site"] .tool-layout{
  gap:14px !important;
}

body[data-tool-style="site"] .tool-layout{
  grid-template-columns:minmax(300px, 360px) minmax(0, 1fr) !important;
}

body[data-tool-style="site"] label{
  color:#c7ced8 !important;
  font-size:13px !important;
  font-weight:800 !important;
}

body[data-tool-style="site"] h2,
body[data-tool-style="site"] h3,
body[data-tool-style="site"] .title,
body[data-tool-style="site"] .lbl,
body[data-tool-style="site"] strong{
  color:#fff !important;
}

body[data-tool-style="site"] .match-card h3,
body[data-tool-style="site"] .section h3,
body[data-tool-style="site"] .checklist-app .title,
body[data-tool-style="site"] .cookbook-wrap .title{
  color:var(--accent) !important;
}

body[data-tool-style="site"] footer{
  background:var(--panel) !important;
  border-top:1px solid var(--accent) !important;
}

body[data-tool-style="site"] footer h3{
  color:var(--accent) !important;
}

body[data-tool-style="site"] footer .btn{
  border-color:var(--accent) !important;
  background:transparent !important;
  color:var(--accent) !important;
}

body[data-tool-style="site"] footer .btn:hover{
  background:var(--accent) !important;
  color:#000 !important;
}

body[data-tool-style="site"] .muted,
body[data-tool-style="site"] .footer-note,
body[data-tool-style="site"] .helper-note,
body[data-tool-style="site"] .note,
body[data-tool-style="site"] .sub,
body[data-tool-style="site"] .blurb,
body[data-tool-style="site"] .hint,
body[data-tool-style="site"] .meta,
body[data-tool-style="site"] .match-summary,
body[data-tool-style="site"] .match-detail p,
body[data-tool-style="site"] .results-head p,
body[data-tool-style="site"] .panel p{
  color:var(--muted) !important;
}

body[data-tool-style="site"] input,
body[data-tool-style="site"] textarea,
body[data-tool-style="site"] select{
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  background:#090b0f !important;
  color:#fff !important;
  font-family:inherit !important;
}

body[data-tool-style="site"] input:focus,
body[data-tool-style="site"] textarea:focus,
body[data-tool-style="site"] select:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(234,88,12,.18) !important;
}

body[data-tool-style="site"] button,
body[data-tool-style="site"] .btn,
body[data-tool-style="site"] .tab,
body[data-tool-style="site"] .chip,
body[data-tool-style="site"] .pill,
body[data-tool-style="site"] .badge,
body[data-tool-style="site"] .store,
body[data-tool-style="site"] .swatch,
body[data-tool-style="site"] .match-tags span,
body[data-tool-style="site"] .match-meta span{
  border-radius:8px !important;
  font-family:inherit !important;
}

body[data-tool-style="site"] button,
body[data-tool-style="site"] .btn,
body[data-tool-style="site"] .match-btn{
  min-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(234,88,12,.7) !important;
  background:rgba(234,88,12,.14) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
}

body[data-tool-style="site"] button.secondary,
body[data-tool-style="site"] button.ghost,
body[data-tool-style="site"] .btn:not(.primary),
body[data-tool-style="site"] .match-btn.secondary{
  border-color:var(--line) !important;
  background:rgba(255,255,255,.035) !important;
}

body[data-tool-style="site"] .tab.active,
body[data-tool-style="site"] .chip.active,
body[data-tool-style="site"] .btn.primary{
  border-color:var(--accent) !important;
  background:var(--accent) !important;
  color:#090b0f !important;
}

body[data-tool-style="site"] .checklist-progress{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 10px;
  border:1px solid rgba(234,88,12,.38);
  border-radius:8px;
  background:rgba(234,88,12,.08);
  color:#fff;
  font-size:13px;
  font-weight:800;
}

body[data-tool-style="site"] table{
  border-collapse:collapse !important;
}

body[data-tool-style="site"] th,
body[data-tool-style="site"] td{
  border-color:rgba(255,255,255,.1) !important;
}

body[data-tool-style="site"] thead th{
  background:#11151b !important;
  color:#c4cad3 !important;
}

body[data-tool-style="site"] tbody tr:nth-child(odd),
body[data-tool-style="site"] tbody tr:nth-child(even),
body[data-tool-style="site"] tbody td{
  background:transparent !important;
  color:var(--ink) !important;
}

body[data-tool-style="site"] .parts-table th,
body[data-tool-style="site"] .parts-table td,
body[data-tool-style="site"] .pipe-wrap th,
body[data-tool-style="site"] .pipe-wrap td{
  text-align:left !important;
}

body[data-tool-style="site"] .tabs,
body[data-tool-style="site"] .chips,
body[data-tool-style="site"] .filters,
body[data-tool-style="site"] .tool-filter-row,
body[data-tool-style="site"] .kv,
body[data-tool-style="site"] .legend,
body[data-tool-style="site"] .tool-actions,
body[data-tool-style="site"] .btns,
body[data-tool-style="site"] .actions,
body[data-tool-style="site"] .match-actions,
body[data-tool-style="site"] .match-tags,
body[data-tool-style="site"] .match-meta{
  gap:10px !important;
}

body[data-tool-style="site"] .tool-filter-row{
  display:grid !important;
  grid-template-columns:minmax(260px, 420px) 1fr !important;
  align-items:end !important;
  margin:0 0 16px !important;
}

body[data-tool-style="site"] .tool-filter-row label{
  grid-column:1 / -1 !important;
  margin:0 0 6px !important;
}

body[data-tool-style="site"] .tool-filter-row input[type="search"]{
  width:100% !important;
  min-height:42px !important;
  padding:0 12px !important;
}

@media (max-width:700px){
  body[data-tool-style="site"] .tool-filter-row{
    grid-template-columns:1fr !important;
  }
}

body[data-tool-style="site"] .open-link,
body[data-tool-style="site"] .openwin a{
  color:var(--accent) !important;
  font-weight:900 !important;
}

body[data-tool-style="site"] .svg-wrap svg{
  background:#090b0f !important;
}

@media (max-width:700px){
  body[data-tool-style="site"] .tool-page{
    padding-top:86px !important;
  }

  body[data-tool-style="site"] .tool-intro,
  body[data-tool-style="site"] .tool-wrap,
  body[data-tool-style="site"] .finder-app .wrap,
  body[data-tool-style="site"] .checklist-app .wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  body[data-tool-style="site"] .tool-layout{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:640px){
  body[data-tool-style="site"] .menu-btn{
    display:inline-flex !important;
  }
}

@media (max-width:900px){
  .decision-head,
  .decision-grid{
    grid-template-columns:1fr;
  }
}

.tool-quicknav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
}

.tool-quicknav-link{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:#fff;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:.18s ease;
}

.tool-quicknav-link:hover{
  border-color:var(--accent);
  color:#fff;
  background:rgba(234,88,12,.1);
}

.tool-story-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 0 22px;
}

.tool-story-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:100%;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}

.tool-story-card strong{
  color:#fff;
  font-size:18px;
  line-height:1.25;
}

.tool-story-card em{
  color:var(--muted);
  font-style:normal;
  line-height:1.45;
}

.tool-suite-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:150px;
  padding:16px;
  color:inherit;
  text-decoration:none;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:.18s ease;
}

.tool-suite-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.tool-suite-card strong{
  color:#fff;
  font-size:20px;
  line-height:1.15;
}

.tool-suite-card em{
  color:var(--muted);
  font-style:normal;
  line-height:1.4;
}

.tool-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
  align-items:stretch;
}

.tool-preview-grid--narrow{
  grid-template-columns:repeat(auto-fit,minmax(260px,320px));
}

.tool-preview-card{
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:100%;
  color:inherit;
  text-decoration:none;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:.18s ease;
}

.tool-preview-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.tool-preview-media{
  aspect-ratio:3 / 2;
  overflow:hidden;
  background:#08090b;
  border-bottom:1px solid var(--line);
}

.tool-preview-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tool-preview-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
}

.tool-preview-body strong{
  color:#fff;
  font-size:18px;
  line-height:1.2;
}

.tool-preview-body em{
  color:var(--muted);
  font-style:normal;
  line-height:1.45;
}

@media (max-width:800px){
  .tool-story-grid,
  .tool-suite-grid,
  .tool-list-grid{
    grid-template-columns:1fr;
  }
}

body[data-page-id="category"] .category-tools{
  flex:0 0 min(320px,100%);
  margin-top:27px;
  display:grid;
  gap:8px;
  justify-items:end;
}

body[data-page-id="category"] .category-tools .input{
  min-height:40px;
  border-color:var(--line);
  background:rgba(255,255,255,.03);
}

body[data-page-id="category"] .category-tools .index-count{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

@media (max-width:640px){
  .section-headline,
  body[data-page-id="category"] .category-headline{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
  }

  .section-headline-actions{
    width:100%;
    justify-content:flex-start;
  }

  .carousel-arrows{
    display:none;
  }

  .section-link-btn{
    justify-self:start;
    margin-top:0;
  }

  body[data-page-id="category"] .category-tools{
    justify-items:start;
    width:100%;
    margin-top:0;
  }

  body[data-page-id="category"] .index-search-row{
    grid-template-columns:1fr;
  }
}

body[data-page-id="home"] #projectGrid.grid,
body[data-page-id="home"] #codeGrid.grid,
body[data-page-id="home"] #campGrid.grid,
body[data-page-id="home"] #gearGrid.grid,
body[data-page-id="home"] #store .grid{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-columns:none !important;
  grid-auto-columns:calc((100% - 36px) / 3) !important;
  gap:18px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  align-items:start !important;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 12px !important;
}

body[data-page-id="home"] #projectGrid .card:hover,
body[data-page-id="home"] #codeGrid .card:hover,
body[data-page-id="home"] #campGrid .card:hover,
body[data-page-id="home"] #gearGrid .card:hover,
body[data-page-id="home"] #store .card:hover{
  transform:none !important;
  box-shadow:none !important;
}

body[data-page-id="home"] #projectGrid .project-card,
body[data-page-id="home"] #codeGrid .code-card,
body[data-page-id="home"] #gearGrid .gear-card,
body[data-page-id="home"] #campGrid .camp-card,
body[data-page-id="home"] #store .store-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

body[data-page-id="home"] #projectGrid .thumb,
body[data-page-id="home"] #codeGrid .thumb,
body[data-page-id="home"] #gearGrid .thumb,
body[data-page-id="home"] #campGrid .thumb,
body[data-page-id="home"] #store .thumb{
  position:relative !important;
  aspect-ratio:1 / 1 !important;
  overflow:hidden !important;
  border-radius:12px !important;
  border:1px solid var(--line) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
}

body[data-page-id="home"] #projectGrid .thumb img,
body[data-page-id="home"] #codeGrid .thumb img,
body[data-page-id="home"] #gearGrid .thumb img,
body[data-page-id="home"] #campGrid .thumb img,
body[data-page-id="home"] #store .thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

body[data-page-id="home"] #projectGrid .thumb img,
body[data-page-id="home"] #codeGrid .thumb img{
  object-position:center center !important;
}

body[data-page-id="home"] #projectGrid .card-body,
body[data-page-id="home"] #codeGrid .card-body,
body[data-page-id="home"] #gearGrid .card-body,
body[data-page-id="home"] #campGrid .card-body,
body[data-page-id="home"] #store .card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:10px 12px 12px;
  gap:4px;
}

body[data-page-id="home"] #projectGrid h4,
body[data-page-id="home"] #codeGrid h4,
body[data-page-id="home"] #gearGrid h4,
body[data-page-id="home"] #campGrid h4,
body[data-page-id="home"] #store h4{
  margin:0;
  line-height:1.2;
}

body[data-page-id="home"] #projectGrid .desc,
body[data-page-id="home"] #codeGrid .desc,
body[data-page-id="home"] #projectGrid .lead,
body[data-page-id="home"] #codeGrid .lead,
body[data-page-id="home"] #gearGrid .desc,
body[data-page-id="home"] #gearGrid .lead,
body[data-page-id="home"] #campGrid .desc,
body[data-page-id="home"] #store .desc{
  margin:0;
  color:var(--muted);
}

body[data-page-id="home"] #projectGrid .card-tags,
body[data-page-id="home"] #codeGrid .card-tags,
body[data-page-id="home"] #gearGrid .card-tags,
body[data-page-id="home"] #campGrid .card-tags,
body[data-page-id="home"] #store .card-tags{
  margin-top:auto;
}

body[data-page-id="home"] #projectGrid.grid > *,
body[data-page-id="home"] #codeGrid.grid > *,
body[data-page-id="home"] #campGrid.grid > *,
body[data-page-id="home"] #gearGrid.grid > *,
body[data-page-id="home"] #store .grid > *{
  box-sizing:border-box;
  min-width:0;
  padding-inline:2px;
  scroll-snap-align:start;
}

body[data-page-id="home"] #projectGrid.grid::-webkit-scrollbar,
body[data-page-id="home"] #codeGrid.grid::-webkit-scrollbar,
body[data-page-id="home"] #campGrid.grid::-webkit-scrollbar,
body[data-page-id="home"] #gearGrid.grid::-webkit-scrollbar,
body[data-page-id="home"] #store .grid::-webkit-scrollbar{
  display:none;
  height:0;
}

body[data-page-id="home"] #projectGrid.grid::-webkit-scrollbar-thumb,
body[data-page-id="home"] #codeGrid.grid::-webkit-scrollbar-thumb,
body[data-page-id="home"] #campGrid.grid::-webkit-scrollbar-thumb,
body[data-page-id="home"] #gearGrid.grid::-webkit-scrollbar-thumb,
body[data-page-id="home"] #store .grid::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}

body[data-page-id="home"] #projectGrid.grid,
body[data-page-id="home"] #codeGrid.grid,
body[data-page-id="home"] #campGrid.grid,
body[data-page-id="home"] #gearGrid.grid,
body[data-page-id="home"] #store .grid,
body[data-page-id="home"] #campGuideGrid.collection-grid,
body[data-page-id="home"] #gearGuideGrid.collection-grid{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

body[data-page-id="home"] #campGuideGrid.collection-grid::-webkit-scrollbar,
body[data-page-id="home"] #gearGuideGrid.collection-grid::-webkit-scrollbar{
  display:none;
  height:0;
}

@media (max-width:700px){
  body[data-page-id="home"] #projectGrid.grid,
  body[data-page-id="home"] #codeGrid.grid,
  body[data-page-id="home"] #campGrid.grid,
  body[data-page-id="home"] #gearGrid.grid,
  body[data-page-id="home"] #store .grid,
  body[data-page-id="home"] #campGuideGrid.collection-grid,
  body[data-page-id="home"] #gearGuideGrid.collection-grid{
    grid-auto-columns:100% !important;
    gap:0 !important;
    padding:2px 0 12px !important;
    scroll-padding-inline:0 !important;
  }

  body[data-page-id="home"] #projectGrid.grid > *,
  body[data-page-id="home"] #codeGrid.grid > *,
  body[data-page-id="home"] #campGrid.grid > *,
  body[data-page-id="home"] #gearGrid.grid > *,
  body[data-page-id="home"] #store .grid > *,
  body[data-page-id="home"] #campGuideGrid.collection-grid > *,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > *{
    width:100% !important;
    min-width:0 !important;
    padding:0 12px !important;
    box-sizing:border-box !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card{
    padding:18px 20px 16px !important;
  }

  body[data-page-id="home"] #projectGrid.grid > * > .card,
  body[data-page-id="home"] #codeGrid.grid > * > .card,
  body[data-page-id="home"] #campGrid.grid > * > .card,
  body[data-page-id="home"] #gearGrid.grid > * > .card,
  body[data-page-id="home"] #store .grid > * > .card,
  body[data-page-id="home"] #campGuideGrid.collection-grid > *,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > *{
    width:100% !important;
    max-width:none !important;
  }

  body[data-page-id="home"] #store .store-badge{
    display:none !important;
  }

  body[data-page-id="home"] #store .store-card .desc{
    -webkit-line-clamp:3 !important;
  }

  body[data-page-id="home"] #store .store-card .card-tags{
    margin-top:auto !important;
  }

  body[data-page-id="home"] #store .store-card .buy-row{
    margin:8px 0 0 !important;
  }

  body[data-page-id="home"] #store .store-card .buy-row .btn{
    min-height:0 !important;
    padding:6px 10px !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  body[data-page-id="home"] #store .grid{
    grid-auto-columns:100% !important;
    scroll-padding-inline:0 !important;
  }

  body[data-page-id="home"] #store .grid > .store-item{
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 12px !important;
    box-sizing:border-box !important;
    display:flex !important;
    justify-content:stretch !important;
  }

  body[data-page-id="home"] #store .grid > .store-item > .store-card{
    width:100% !important;
    max-width:none !important;
  }


  body[data-page-id="home"] .carousel-arrows{
    display:none !important;
  }

  body[data-page-id="home"] .camp-swipe-hint{
    text-align:center;
  }

  body[data-page-id="category"] #campCollectionsGrid.collection-grid,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:100% !important;
    grid-template-columns:none !important;
    gap:0 !important;
    width:100% !important;
    padding:2px 0 12px !important;
    margin:0 !important;
    scroll-padding-inline:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  body[data-page-id="category"] #campCollectionsGrid.collection-grid::-webkit-scrollbar,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid::-webkit-scrollbar{
    display:none !important;
    height:0 !important;
  }

  body[data-page-id="category"] #campCollectionsGrid.collection-grid > *,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > *{
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    padding:18px 20px 16px !important;
    box-sizing:border-box !important;
    scroll-snap-align:start !important;
  }

  body[data-page-id="category"] .category-collection-shell .carousel-arrows{
    display:none !important;
  }
}

/* =========================================================
   TOOL PAGE SHELL
   ========================================================= */
body.tool-utility-page{
  padding:0 !important;
  margin:0 !important;
  background:var(--bg) !important;
  color:var(--txt) !important;
}

.tool-site-shell{
  position:relative;
  z-index:20;
}

body.tool-utility-page .tool-shell-content{
  padding:24px 0 36px;
}

body.tool-utility-page .tool-shell-content .hero{
  top:var(--navh);
}

body.tool-utility-page .tool-shell-content > .wrap:first-child,
body.tool-utility-page .tool-shell-content > .pipe-wrap:first-child,
body.tool-utility-page .tool-shell-content > section:first-child{
  margin-top:0;
}

body.tool-utility-page.tool-checklist-page .tool-shell-content .hero{
  position:static !important;
  top:auto !important;
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  place-items:initial !important;
  text-align:left !important;
  overflow:visible !important;
  max-width:960px;
  margin:0 auto 18px;
  padding:18px 20px !important;
  border:1px solid var(--line) !important;
  border-radius:16px;
  background:var(--panel) !important;
  backdrop-filter:none !important;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}

body.tool-utility-page.tool-checklist-page .tool-shell-content .hero-row{
  max-width:none !important;
}

body.tool-utility-page.tool-checklist-page .tool-shell-content .hero::before,
body.tool-utility-page.tool-checklist-page .tool-shell-content .hero::after{
  content:none !important;
}

body.tool-utility-page.tool-checklist-page .tool-shell-content .hero .mark svg{
  fill:var(--accent) !important;
}

body.tool-utility-page.tool-checklist-page .tool-shell-content .hero .btn.primary#closeBtn{
  display:none !important;
}

body.tool-utility-page.tool-checklist-page .tool-shell-content > .wrap:first-child{
  padding-top:0 !important;
}

body.tool-utility-page.tool-reference-page .tool-shell-content > .wrap:first-child{
  padding-top:6px;
}

body[data-page-id="home"] .hero .bg::after{
  background:rgba(0,0,0,.58) !important;
}

/* =========================================================
   HOMEPAGE CARD UNIFICATION
   Keep Projects / Code / Camp / Gear on the same card frame
   and override older conflicting rules above.
   ========================================================= */
body[data-page-id="home"] #projectGrid .project-card,
body[data-page-id="home"] #codeGrid .code-card,
body[data-page-id="home"] #campGrid .camp-card,
body[data-page-id="home"] #gearGrid .gear-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:0 !important;
  padding:14px !important;
}

body[data-page-id="home"] #projectGrid .thumb,
body[data-page-id="home"] #codeGrid .thumb,
body[data-page-id="home"] #campGrid .thumb,
body[data-page-id="home"] #gearGrid .thumb{
  position:relative !important;
  aspect-ratio:1 / 1 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding-top:0 !important;
  overflow:hidden !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:#0d1015 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;
  flex:0 0 auto !important;
}

body[data-page-id="home"] #projectGrid .thumb img,
body[data-page-id="home"] #codeGrid .thumb img,
body[data-page-id="home"] #campGrid .thumb img,
body[data-page-id="home"] #gearGrid .thumb img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
  transform:none !important;
  border-radius:inherit !important;
}

body[data-page-id="home"] #projectGrid .thumb img,
body[data-page-id="home"] #codeGrid .thumb img{
  object-position:center top !important;
}

body[data-page-id="home"] .home-carousel-shell .card:hover .thumb img{
  transform:none !important;
}

body[data-page-id="home"] #projectGrid .card-body,
body[data-page-id="home"] #codeGrid .card-body,
body[data-page-id="home"] #campGrid .card-body,
body[data-page-id="home"] #gearGrid .card-body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  padding:10px 0 0 !important;
  gap:4px !important;
}

body[data-page-id="home"] #projectGrid h4,
body[data-page-id="home"] #codeGrid h4,
body[data-page-id="home"] #campGrid h4,
body[data-page-id="home"] #gearGrid h4{
  margin:0 0 2px !important;
  min-height:0 !important;
  height:auto !important;
  line-height:1.2 !important;
}

body[data-page-id="home"] #projectGrid .desc,
body[data-page-id="home"] #projectGrid .lead,
body[data-page-id="home"] #codeGrid .desc,
body[data-page-id="home"] #codeGrid .lead,
body[data-page-id="home"] #campGrid .desc,
body[data-page-id="home"] #gearGrid .desc,
body[data-page-id="home"] #gearGrid .lead{
  margin:0 !important;
}

body[data-page-id="home"] #projectGrid .card-tags,
body[data-page-id="home"] #codeGrid .card-tags,
body[data-page-id="home"] #campGrid .card-tags,
body[data-page-id="home"] #gearGrid .card-tags{
  margin-top:auto !important;
}


body[data-page-id="home"] .carousel-arrow:hover{
  color:#ff8a3d !important;
  transform:none !important;
}

body[data-page-id="category"] .category-collection-shell .camp-swipe-hint,
body[data-page-id="home"] .category-collection-shell .camp-swipe-hint{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.02em;
  opacity:.75;
  margin-bottom:8px;
}

@media (min-width: 701px){
  body[data-page-id="category"] .category-collection-shell .camp-swipe-hint,
  body[data-page-id="home"] .category-collection-shell .camp-swipe-hint{
    display:none !important;
  }
}

body[data-page-id="category"] .category-collection-shell,
body[data-page-id="home"] .category-collection-shell{
  position:relative;
  overflow:visible;
  padding:0;
  margin:0 0 12px;
}

body[data-page-id="category"] .category-collection-shell .collection-card,
body[data-page-id="home"] .category-collection-shell .collection-card{
  position:relative;
  counter-increment:guide-card;
  min-height:178px;
  gap:10px;
  padding:24px 28px 20px;
  border-radius:10px;
  border:0;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.08), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.065),
    0 14px 34px rgba(0,0,0,.22);
}

body[data-page-id="category"] .category-collection-shell .collection-card::before,
body[data-page-id="home"] .category-collection-shell .collection-card::before{
  content:counter(guide-card, decimal-leading-zero);
  position:absolute;
  right:16px;
  top:12px;
  color:rgba(255,255,255,.055);
  font-size:56px;
  line-height:.8;
  font-weight:800;
  letter-spacing:0;
  pointer-events:none;
}

body[data-page-id="category"] .category-collection-shell .collection-card::after,
body[data-page-id="home"] .category-collection-shell .collection-card::after{
  content:"Open article →";
  position:relative;
  z-index:1;
  display:inline-flex;
  margin-top:auto;
  padding-top:6px;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-page-id="category"] .category-collection-shell .collection-card .section-kicker,
body[data-page-id="home"] .category-collection-shell .collection-card .section-kicker{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(234,88,12,.95);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-page-id="category"] .category-collection-shell .collection-card .section-kicker::before,
body[data-page-id="home"] .category-collection-shell .collection-card .section-kicker::before{
  content:none;
}

body[data-page-id="category"] .category-collection-shell .collection-card h3,
body[data-page-id="home"] .category-collection-shell .collection-card h3{
  position:relative;
  z-index:1;
  max-width:88%;
  color:#fff;
  margin-top:0;
  min-height:2.15em;
  font-size:21px;
  line-height:1.08;
  letter-spacing:0;
}

body[data-page-id="category"] .category-collection-shell .collection-card h3 + p,
body[data-page-id="home"] .category-collection-shell .collection-card h3 + p{
  position:relative;
  z-index:1;
  max-width:88%;
  color:#b8c1ca;
  min-height:3em;
  margin-top:0;
  font-size:14px;
  line-height:1.45;
  -webkit-line-clamp:2;
}

body[data-page-id="category"] .category-collection-shell .collection-card .collection-card-footer,
body[data-page-id="home"] .category-collection-shell .collection-card .collection-card-footer{
  display:inline-flex;
}

body[data-page-id="home"] .category-collection-shell .collection-card .collection-card-footer{
  display:none !important;
}

body[data-page-id="category"] .category-collection-shell .collection-card:hover,
body[data-page-id="home"] .category-collection-shell .collection-card:hover{
  background:
    radial-gradient(circle at 86% 18%, rgba(234,88,12,.16), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.016)),
    var(--panel);
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(234,88,12,.86),
    inset 0 0 0 3px rgba(234,88,12,.12),
    0 18px 38px rgba(0,0,0,.26);
}

body[data-page-id="category"] .category-collection-shell .carousel-arrows,
body[data-page-id="home"] .category-collection-shell .carousel-arrows{
  display:flex !important;
  top:calc(50% - 18px);
  transform:translateY(-50%);
}

@media (max-width: 700px), (hover: none) and (pointer: coarse){
  body[data-page-id="category"] .category-collection-shell .carousel-arrows,
  body[data-page-id="category"] .category-collection-shell .carousel-arrow,
  body[data-page-id="home"] .category-collection-shell .carousel-arrows,
  body[data-page-id="home"] .category-collection-shell .carousel-arrow{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    overflow:hidden !important;
  }

  body[data-page-id="category"] .category-collection-shell,
  body[data-page-id="home"] .category-collection-shell{
    overflow:hidden !important;
    padding:0 12px !important;
  }

  body[data-page-id="category"] .category-collection-shell .camp-swipe-hint,
  body[data-page-id="home"] .category-collection-shell .camp-swipe-hint{
    display:block !important;
    text-align:center;
    font-size:13px;
    color:var(--muted);
    font-weight:600;
    letter-spacing:.02em;
    opacity:.75;
    margin:0 0 8px;
  }
}

body[data-page-id="category"] .category-collection-shell + .section-divider{
  display:none !important;
}

body[data-page-id="category"] #campCollectionsGrid.collection-grid,
body[data-page-id="category"] #gearCollectionsGrid.collection-grid{
  margin:0 0 20px !important;
  padding:6px 10px 18px !important;
}

@media (max-width: 700px), (hover: none) and (pointer: coarse){
  body[data-page-id="category"] #campCollectionsGrid.collection-grid,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid{
    margin:0 !important;
    padding:2px 0 12px !important;
  }
}

body[data-page-id="category"] .category-section{
  padding-top:calc(var(--navh) + 20px);
}

body[data-page-id="category"] .breadcrumbs{
  color:var(--muted);
  font-size:16px;
  margin:0 0 8px;
}

body[data-page-id="category"] .category-headline{
  position:relative;
  display:block;
  padding-right:340px;
  min-height:76px;
}

body[data-page-id="category"] .category-headline .section-kicker{
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 4px;
  font-size:13px;
  font-weight:800;
}

body[data-page-id="category"] .category-headline .title{
  margin:0 0 6px;
  font-size:1.4rem;
  line-height:1.1;
}

@media (min-width:1024px){
  body[data-page-id="category"] .category-headline .title{
    font-size:1.8rem;
  }
}

body[data-page-id="category"] .category-headline .section-intro{
  max-width:none;
  margin:0;
}

body[data-page-id="category"] .category-headline .section-note{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

body[data-page-id="category"] .category-tools{
  position:absolute;
  top:0;
  right:0;
  width:min(300px,30vw);
  margin-top:0;
}

body[data-page-id="category"] .category-tools .input{
  min-height:40px;
}

body[data-page-id="category"] .section-divider{
  height:1px;
  border:0;
  margin:16px 0 24px;
  background:linear-gradient(90deg,var(--accent) 0%, rgba(234,88,12,.45) 42%, rgba(234,88,12,0) 100%);
}

body[data-page-id="category"] .index-grid{
  margin-top:0;
  align-items:stretch;
}

body[data-page-id="category"] .category-card{
  min-height:100%;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body[data-page-id="category"] .category-card:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}

body[data-page-id="category"] .category-card .thumb{
  overflow:hidden;
}

body[data-page-id="category"] .category-card .thumb img{
  transition:transform .22s ease;
}

body[data-page-id="category"] .category-card:hover .thumb img{
  transform:scale(1.02);
}


.camp-badge-new{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.6);
  background:var(--accent);
  color:#000;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}

body[data-page-id="category"] .category-control-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 22px;
}

.camp-breadcrumb-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 2px;
}

.camp-breadcrumb-row .breadcrumbs{
  margin:0;
}

.camp-region-context{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#101318;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.camp-region-context span{
  color:var(--muted);
  font-weight:700;
}

.camp-region-context strong{
  color:var(--accent);
}

.camp-region-context:hover{
  border-color:var(--accent);
  background:rgba(234,88,12,.08);
}

@media (max-width:700px){
  .camp-breadcrumb-row{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
}

body[data-page-id="category"] .category-count{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

body[data-page-id="category"] .camp-sort-row,
body[data-page-id="category"] .gear-sort-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.fc-select{
  position:relative;
  min-width:180px;
  z-index:20;
}

.fc-select-sm{
  min-width:150px;
}

.fc-select-trigger{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--accent);
  border-radius:12px;
  background:#11151b;
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.fc-select-trigger:hover{
  border-color:var(--accent);
  background:#151b23;
}

.fc-select.is-open .fc-select-trigger,
.fc-select-trigger:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(234,88,12,.16);
}

.fc-select-caret{
  color:var(--accent);
  font-size:13px;
  line-height:1;
}

.fc-select-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  display:none;
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#10141a;
  box-shadow:0 16px 34px rgba(0,0,0,.45);
  z-index:40;
}

.fc-select.is-open .fc-select-menu{
  display:block;
}

.fc-select-option{
  width:100%;
  display:block;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.fc-select-option:hover{
  background:rgba(234,88,12,.12);
}

.fc-select-option.is-selected{
  background:rgba(234,88,12,.18);
  color:#fff;
}

.camp-view-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

.camp-view-btn{
  border:1px solid transparent;
  background:transparent;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.camp-view-btn:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}

.camp-view-btn.is-active{
  border-color:var(--accent);
  background:rgba(234,88,12,.18);
  color:#fff;
}

.camp-view-panel{
  display:none;
}

.camp-view-panel.is-active{
  display:block;
}

body[data-page-id="category"] .camp-view-toggle{
  margin-left:auto;
}

body[data-page-id="category"] .camp-map-shell{
  padding:0;
}

body[data-page-id="category"] .camp-map-canvas{
  min-height:620px;
}

.category-shell-contact{
  padding:54px 0 56px;
  border-top:1px solid var(--accent);
}

.category-shell-contact .contact-box{
  margin-top:16px;
  padding:20px;
}

.category-shell-footer{
  padding:40px 0;
  background:var(--panel);
  border-top:1px solid var(--accent);
}

.category-shell-footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
  text-align:left;
}

.category-shell-footer h3{
  color:var(--accent);
  margin-bottom:16px;
  font-size:20px;
}

.category-shell-footer .footer-map{
  width:100%;
  height:200px;
  border:1px solid var(--line);
  border-radius:10px;
  margin-top:10px;
}

.category-shell-footer .footer-links{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.category-shell-footer .footer-copy{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin-top:30px;
  border-top:1px solid var(--line);
  padding-top:20px;
}

footer .btn,
.category-shell-footer .footer-links .btn,
body[data-tool-style="site"] footer .btn{
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), var(--panel) !important;
  color:var(--accent) !important;
  font-weight:800 !important;
  transform:none !important;
}

footer .btn:hover,
.category-shell-footer .footer-links .btn:hover,
body[data-tool-style="site"] footer .btn:hover{
  border-color:rgba(234,88,12,.65) !important;
  background:linear-gradient(180deg, rgba(234,88,12,.12), rgba(255,255,255,.018)), var(--panel) !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}

@media (max-width:800px){
  body[data-page-id="category"] .category-headline{
    padding-right:0;
    min-height:0;
    display:block !important;
  }

  body[data-page-id="category"] .category-tools{
    position:static;
    width:100%;
    max-width:none;
    margin-top:10px;
  }

  body[data-page-id="category"] .category-headline > div:first-child{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  body[data-page-id="category"] .category-headline .section-intro,
  body[data-page-id="category"] .category-headline .section-note{
    width:100% !important;
    max-width:none !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    white-space:normal !important;
  }

  body[data-page-id="category"] .camp-view-toggle{
    margin-left:0;
  }
}

@media (max-width:800px){
  body[data-page-id="category"] .category-headline{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding-right:0 !important;
    min-height:0 !important;
  }

  body[data-page-id="category"] .category-headline > div:first-child{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  body[data-page-id="category"] .category-headline .section-kicker,
  body[data-page-id="category"] .category-headline .title,
  body[data-page-id="category"] .category-headline .section-intro,
  body[data-page-id="category"] .category-headline .section-note{
    width:100% !important;
    max-width:none !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  body[data-page-id="category"] .category-tools{
    position:static !important;
    width:100% !important;
    max-width:none !important;
    justify-items:start !important;
    margin-top:0 !important;
  }

  body[data-page-id="category"] .category-tools .input{
    width:100% !important;
    min-width:0 !important;
  }
}

/* =========================================================
   CATEGORY MOBILE HARD OVERRIDE
   Keep the header text full width and stop the search rail
   from collapsing the intro into a skinny text column.
   ========================================================= */
@media (max-width: 900px){
  body[data-page-id="category"] .category-section{
    padding-top: calc(var(--navh) + 16px) !important;
  }

  body[data-page-id="category"] .category-headline{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-right: 0 !important;
    min-height: 0 !important;
    align-items: start !important;
  }

  body[data-page-id="category"] .category-headline > div:first-child{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-page-id="category"] .category-headline .section-kicker,
  body[data-page-id="category"] .category-headline .title,
  body[data-page-id="category"] .category-headline .section-intro,
  body[data-page-id="category"] .category-headline .section-note,
  body[data-page-id="category"] .category-headline .lead{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: pretty;
  }

  body[data-page-id="category"] .category-tools{
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 8px !important;
    justify-items: stretch !important;
  }

  body[data-page-id="category"] .category-tools .input{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-page-id="category"] .index-count{
    justify-self: start !important;
  }
}

@media (max-width:700px){
  body[data-page-id="category"] .camp-sort-row,
  body[data-page-id="category"] .gear-sort-row{
    width:100%;
  }

  .fc-select,
  .fc-select-sm{
    min-width:0;
    flex:1 1 180px;
  }

  .camp-view-toggle{
    width:100%;
    justify-content:space-between;
  }

  .camp-view-btn{
    flex:1 1 0;
    text-align:center;
  }

  body[data-page-id="category"] .camp-map-canvas{
    min-height:420px;
  }
}
@media (max-width:900px){
  body[data-guide-layout="editorial"] .guide-author{
    position:static;
    display:inline-flex;
    margin:0 0 14px;
  }
}

/* =========================================================
   HOMEPAGE HERO TUNE-UP
   ========================================================= */
body[data-page-id="home"] .hero .bg::after{
  background:rgba(0,0,0,.58) !important;
}

body[data-page-id="home"] .hero > .wrap{
  max-width:920px !important;
  padding:calc(var(--navh) + 6px) 20px 28px !important;
  gap:14px !important;
}

body[data-page-id="home"] .hero h1,
body[data-page-id="home"] .hero h2{
  max-width:820px;
}

body[data-page-id="home"] .hero-lead{
  max-width:700px;
  margin:0 auto;
  color:#c7cdd5;
}

body[data-page-id="home"] .hero-chip-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  max-width:760px;
}

body[data-page-id="home"] .hero-chip-row .chip{
  font-size:12px;
  padding:5px 9px;
  opacity:.92;
}

body[data-page-id="home"] .hero-actions{
  margin-top:14px;
}

body[data-page-id="home"] .hero-actions .btn{
  min-width:170px;
  text-align:center;
}

body[data-page-id="home"] .hero-actions .btn.quiet{
  background:rgba(0,0,0,.22);
  color:var(--accent);
}

body[data-page-id="home"] .hero-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:2px;
}

body[data-page-id="home"] .hero-links a{
  color:#c7cdd5;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}

body[data-page-id="home"] .hero-links a:hover{
  color:var(--accent);
}

body[data-page-id="home"] #gear{
  padding-bottom:34px;
}

body[data-page-id="home"] #tools{
  padding-top:34px;
}

@media (max-width:700px){
  body[data-page-id="home"] #campGuideGrid.collection-grid,
  body[data-page-id="home"] #gearGuideGrid.collection-grid,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid{
    grid-auto-columns:calc(100vw - 40px) !important;
    padding:4px 0 14px !important;
    scroll-padding-inline:0 !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid > .collection-card,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > .collection-card{
    width:calc(100% - 32px) !important;
    min-width:calc(100% - 32px) !important;
    max-width:calc(100% - 32px) !important;
    margin:0 16px !important;
    padding:22px 24px 18px !important;
  }

  body[data-page-id="home"] #projectGrid.grid > *,
  body[data-page-id="home"] #codeGrid.grid > *,
  body[data-page-id="home"] #campGrid.grid > *,
  body[data-page-id="home"] #gearGrid.grid > *{
    max-height:none !important;
    overflow:visible !important;
  }

  body[data-page-id="home"] #codeGrid.grid > *,
  body[data-page-id="home"] #gearGrid.grid > *{
    width:calc(100% - 24px) !important;
    min-width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    margin:0 12px !important;
    padding:0 !important;
  }

  body[data-page-id="home"] #codeGrid.grid > * > .card,
  body[data-page-id="home"] #gearGrid.grid > * > .card,
  body[data-page-id="home"] #codeGrid.grid > .card,
  body[data-page-id="home"] #gearGrid.grid > .card{
    width:100% !important;
    max-width:100% !important;
  }
}

@media (max-width:640px){
  body[data-page-id="home"] .hero{
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
    place-items:start center !important;
  }

  body[data-page-id="home"] .hero > .wrap{
    padding:calc(var(--navh) + 10px) 20px 34px !important;
    gap:10px !important;
  }

  body[data-page-id="home"] .hero img{
    width:128px !important;
    height:128px !important;
  }

  body[data-page-id="home"] .hero h1,
  body[data-page-id="home"] .hero h2{
    font-size:clamp(1.75rem, 8.2vw, 2.15rem) !important;
    line-height:1.08 !important;
  }

  body[data-page-id="home"] .hero-lead{
    max-width:520px;
    font-size:.98rem;
    line-height:1.5;
  }

  body[data-page-id="home"] .hero-chip-row{
    max-width:360px;
    gap:6px;
  }

  body[data-page-id="home"] .hero-chip-row .chip:nth-child(n+5){
    display:none;
  }

  body[data-page-id="home"] .hero-links{
    gap:12px;
  }
}

@media (max-width:700px){
  body[data-page-id="home"] #projectGrid.grid,
  body[data-page-id="home"] #codeGrid.grid,
  body[data-page-id="home"] #campGrid.grid,
  body[data-page-id="home"] #gearGrid.grid,
  body[data-page-id="home"] #store .grid{
    grid-auto-columns:100% !important;
    gap:0 !important;
    padding:2px 0 14px !important;
    scroll-padding-inline:0 !important;
  }

  body[data-page-id="home"] #projectGrid.grid > *,
  body[data-page-id="home"] #codeGrid.grid > *,
  body[data-page-id="home"] #campGrid.grid > *,
  body[data-page-id="home"] #gearGrid.grid > *,
  body[data-page-id="home"] #store .grid > *{
    width:min(340px, calc(100% - 24px)) !important;
    min-width:min(340px, calc(100% - 24px)) !important;
    max-width:340px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }

  body[data-page-id="home"] #projectGrid.grid > *,
  body[data-page-id="home"] #codeGrid.grid > *,
  body[data-page-id="home"] #campGrid.grid > *,
  body[data-page-id="home"] #gearGrid.grid > *,
  body[data-page-id="home"] #store .grid > *{
    padding:0 !important;
  }

  body[data-page-id="home"] #projectGrid.grid > * > .card,
  body[data-page-id="home"] #codeGrid.grid > * > .card,
  body[data-page-id="home"] #campGrid.grid > * > .card,
  body[data-page-id="home"] #gearGrid.grid > * > .card,
  body[data-page-id="home"] #store .grid > * > .card,
  body[data-page-id="home"] #projectGrid.grid > .card,
  body[data-page-id="home"] #codeGrid.grid > .card,
  body[data-page-id="home"] #campGrid.grid > .card,
  body[data-page-id="home"] #gearGrid.grid > .card,
  body[data-page-id="home"] #store .grid > .card{
    width:100% !important;
    max-width:100% !important;
  }

  body[data-page-id="home"] #store .store-badge{
    display:none !important;
  }

  body[data-page-id="home"] #store .store-card .desc{
    -webkit-line-clamp:3 !important;
  }

  body[data-page-id="home"] #store .store-card .card-tags{
    margin-top:auto !important;
  }

  body[data-page-id="home"] #store .store-card .buy-row{
    margin:8px 0 0 !important;
  }

  body[data-page-id="home"] #store .store-card .buy-row .btn{
    min-height:0 !important;
    padding:6px 10px !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  body[data-page-id="home"] #store .grid{
    grid-auto-columns:100% !important;
    scroll-padding-inline:0 !important;
  }

  body[data-page-id="home"] #store .grid > .store-item{
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 12px !important;
    box-sizing:border-box !important;
    display:flex !important;
    justify-content:stretch !important;
  }

  body[data-page-id="home"] #store .grid > .store-item > .store-card{
    width:100% !important;
    max-width:none !important;
  }

}

/* Canonical mobile article cards: one surface, one width, everywhere. */
@media (max-width:700px){
  body[data-page-id="home"] .home-carousel-shell,
  body[data-page-id="category"] .category-collection-shell{
    overflow:visible !important;
  }

  body[data-page-id="category"] .category-collection-shell,
  body[data-page-id="home"] .category-collection-shell{
    padding:0 !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid,
  body[data-page-id="home"] #gearGuideGrid.collection-grid,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:100% !important;
    gap:0 !important;
    width:100% !important;
    margin:0 0 24px !important;
    padding:18px 0 22px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:0 !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    box-sizing:border-box !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid::-webkit-scrollbar,
  body[data-page-id="home"] #gearGuideGrid.collection-grid::-webkit-scrollbar,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid::-webkit-scrollbar,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid::-webkit-scrollbar{
    display:none !important;
    height:0 !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid > .collection-card,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > .collection-card{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    min-height:206px !important;
    margin:0 !important;
    padding:24px 28px 20px !important;
    border:0 !important;
    border-radius:10px !important;
    outline:none !important;
    clip-path:none !important;
    filter:none !important;
    scroll-snap-align:start !important;
    box-sizing:border-box !important;
    transform:none !important;
    background:
      radial-gradient(circle at 86% 18%, rgba(255,255,255,.08), rgba(255,255,255,0) 34%),
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
      var(--panel) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.065),
      0 14px 34px rgba(0,0,0,.22) !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card::before,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card::before,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid > .collection-card::before,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > .collection-card::before{
    right:16px !important;
    top:12px !important;
    font-size:56px !important;
    color:rgba(255,255,255,.055) !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card .section-kicker,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card .section-kicker,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid > .collection-card .section-kicker,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > .collection-card .section-kicker{
    margin:0 !important;
    color:var(--accent) !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card h3,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card h3,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid > .collection-card h3,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > .collection-card h3{
    max-width:88% !important;
    min-height:2.15em !important;
    margin:0 !important;
    font-size:21px !important;
    line-height:1.08 !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card h3 + p,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card h3 + p,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid > .collection-card h3 + p,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > .collection-card h3 + p{
    max-width:88% !important;
    min-height:3em !important;
    margin:0 !important;
    font-size:14px !important;
    line-height:1.45 !important;
    -webkit-line-clamp:2 !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card::after,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card::after,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid > .collection-card::after,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > .collection-card::after{
    margin-top:auto !important;
    padding-top:6px !important;
    color:var(--accent) !important;
  }

  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card:hover,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card:hover,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid > .collection-card:hover,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > .collection-card:hover,
  body[data-page-id="home"] #campGuideGrid.collection-grid > .collection-card:focus-visible,
  body[data-page-id="home"] #gearGuideGrid.collection-grid > .collection-card:focus-visible,
  body[data-page-id="category"] #campCollectionsGrid.collection-grid > .collection-card:focus-visible,
  body[data-page-id="category"] #gearCollectionsGrid.collection-grid > .collection-card:focus-visible{
    transform:none !important;
    border:0 !important;
    outline:none !important;
    background:
      radial-gradient(circle at 86% 18%, rgba(255,255,255,.08), rgba(255,255,255,0) 34%),
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
      var(--panel) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.065),
      0 14px 34px rgba(0,0,0,.22) !important;
  }
}

/* Final home/view-all parity pass for mobile article carousels. */
@media (max-width:700px), (hover:none) and (pointer:coarse){
  html body[data-page-id="home"] section#camp .category-collection-shell,
  html body[data-page-id="home"] section#gear .category-collection-shell,
  html body[data-page-id="category"] .category-collection-shell{
    padding:0 !important;
    overflow:visible !important;
  }

  html body[data-page-id="home"] section#camp .category-collection-shell .camp-swipe-hint,
  html body[data-page-id="home"] section#gear .category-collection-shell .camp-swipe-hint,
  html body[data-page-id="category"] .category-collection-shell .camp-swipe-hint{
    display:block !important;
    margin:0 0 10px !important;
    text-align:center !important;
  }

  html body[data-page-id="home"] section#camp #campGuideGrid.collection-grid,
  html body[data-page-id="home"] section#gear #gearGuideGrid.collection-grid,
  html body[data-page-id="category"] #campCollectionsGrid.collection-grid,
  html body[data-page-id="category"] #gearCollectionsGrid.collection-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:100% !important;
    grid-template-columns:none !important;
    gap:0 !important;
    width:100% !important;
    margin:0 0 24px !important;
    padding:18px 0 22px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:0 !important;
    box-sizing:border-box !important;
  }

  html body[data-page-id="home"] section#camp #campGuideGrid.collection-grid > a.collection-card,
  html body[data-page-id="home"] section#gear #gearGuideGrid.collection-grid > a.collection-card,
  html body[data-page-id="home"] #campGuideGrid.collection-grid > *,
  html body[data-page-id="home"] #gearGuideGrid.collection-grid > *,
  html body[data-page-id="category"] #campCollectionsGrid.collection-grid > a.collection-card,
  html body[data-page-id="category"] #gearCollectionsGrid.collection-grid > a.collection-card{
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    min-height:206px !important;
    margin:0 !important;
    padding:24px 28px 20px !important;
    border:0 !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
    scroll-snap-align:start !important;
    background:
      radial-gradient(circle at 86% 18%, rgba(255,255,255,.08), rgba(255,255,255,0) 34%),
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
      var(--panel) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.065),
      0 14px 34px rgba(0,0,0,.22) !important;
  }
}

/* Final desktop guard: article carousel is 3-up on desktop, never full-width. */
@media (min-width: 1101px){
  html body[data-page-id="home"] section#camp #campGuideGrid.collection-grid,
  html body[data-page-id="home"] section#gear #gearGuideGrid.collection-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:calc((100% - 28px) / 3) !important;
    gap:14px !important;
    width:100% !important;
    padding:10px 10px 18px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-padding-inline:10px !important;
  }

  html body[data-page-id="home"] section#camp #campGuideGrid.collection-grid > a.collection-card,
  html body[data-page-id="home"] section#gear #gearGuideGrid.collection-grid > a.collection-card{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:24px 28px 20px !important;
    box-sizing:border-box !important;
  }
}

/* True final mobile card width/position parity. Keep this at the end of the file. */
@media (max-width:700px){
  html body[data-page-id="home"] #campGrid.grid,
  html body[data-page-id="home"] #gearGrid.grid{
    grid-auto-columns:100% !important;
    gap:0 !important;
    scroll-padding-inline:0 !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:100% !important;
    gap:0 !important;
    width:100% !important;
    margin:0 0 24px !important;
    padding:8px 0 14px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:0 !important;
    box-sizing:border-box !important;
    scrollbar-width:none !important;
  }

  html body[data-page-id="home"] #campGrid.grid > *,
  html body[data-page-id="home"] #gearGrid.grid > *,
  html body[data-page-id="home"] #howToGrid.howto-home-grid > *,
  html body[data-page-id="category"] .index-grid > .category-card-link,
  html body[data-page-id="category"] .howto-index-grid > .category-card-link{
    width:calc(100% - 24px) !important;
    min-width:calc(100% - 24px) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
    scroll-snap-align:start !important;
  }

  html body[data-page-id="home"] #campGrid.grid > * > .card,
  html body[data-page-id="home"] #gearGrid.grid > * > .card,
  html body[data-page-id="home"] #campGrid.grid > .card,
  html body[data-page-id="home"] #gearGrid.grid > .card,
  html body[data-page-id="home"] #howToGrid.howto-home-grid > * > .card,
  html body[data-page-id="category"] .index-grid > .category-card-link > .card,
  html body[data-page-id="category"] .howto-index-grid > .category-card-link > .card{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  html body[data-page-id="category"] .index-grid,
  html body[data-page-id="category"] .howto-index-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
    justify-items:center !important;
    overflow:visible !important;
    padding-top:8px !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid{
    padding:8px 0 14px !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link{
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    margin:0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:stretch !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link > .howto-card{
    width:calc(100% - 24px) !important;
    max-width:none !important;
    margin:0 auto !important;
  }
}

/* Final How-To card parity and hover guard. Keep this last. */
@media (min-width:701px){
  html body[data-page-id="home"] #howToGrid.howto-home-grid,
  html body[data-index-type="how-to"] .howto-index-grid{
    align-items:stretch !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link,
  html body[data-index-type="how-to"] .howto-index-grid > .category-card-link{
    display:flex !important;
    align-items:stretch !important;
    min-height:0 !important;
    height:520px !important;
  }

  html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link > .howto-card,
  html body[data-index-type="how-to"] .howto-index-grid > .category-card-link > .howto-card{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }
}

html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link > .howto-card,
html body[data-index-type="how-to"] .howto-index-grid > .category-card-link > .howto-card{
  border-color:var(--line) !important;
  outline:1px solid transparent !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link:hover > .howto-card,
html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link:focus-visible > .howto-card,
html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link > .howto-card:hover,
html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link > .howto-card:focus-within,
html body[data-index-type="how-to"] .howto-index-grid > .category-card-link:hover > .howto-card,
html body[data-index-type="how-to"] .howto-index-grid > .category-card-link:focus-visible > .howto-card,
html body[data-index-type="how-to"] .howto-index-grid > .category-card-link > .howto-card:hover,
html body[data-index-type="how-to"] .howto-index-grid > .category-card-link > .howto-card:focus-within{
  border-color:var(--accent) !important;
  outline-color:rgba(234,88,12,.9) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.24), 0 0 0 1px rgba(234,88,12,.18) !important;
}

/* Detail page titles should carry category-page weight on mobile. */
@media (max-width:700px){
  .proj-wrap .proj-title{
    font-size:clamp(1.85rem, 8vw, 2.3rem) !important;
    line-height:1.06 !important;
    margin:6px 0 12px !important;
  }
}

/* How-To detail pages: bring article pages into the newer detail-page language. */
body[data-howto-detail="true"] .category-section{
  padding-top:86px;
}

body[data-howto-detail="true"] .guide-author{
  margin:0 0 10px;
}

body[data-howto-detail="true"] .breadcrumbs{
  margin:0 0 6px;
  color:var(--muted);
}

body[data-howto-detail="true"] .category-headline{
  display:block !important;
  padding:0 !important;
  margin:0 0 14px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body[data-howto-detail="true"] .category-headline > div:first-child{
  max-width:820px;
}

body[data-howto-detail="true"] .category-headline .section-kicker{
  color:#fff !important;
  margin:0 0 8px !important;
}

body[data-howto-detail="true"] .category-headline .title{
  color:var(--accent) !important;
  max-width:760px;
  margin:0 0 8px !important;
  font-size:1.72rem !important;
  line-height:1.12 !important;
}

body[data-howto-detail="true"] .category-headline .section-intro{
  max-width:760px;
  color:#d7dde3 !important;
  font-size:1.02rem !important;
  line-height:1.58 !important;
}

body[data-howto-detail="true"] .guide-hero-image{
  aspect-ratio:21/9;
  max-height:440px;
  margin:16px 0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:none;
}

body[data-howto-detail="true"] .roundup-meta{
  margin:0 0 12px;
}

body[data-howto-detail="true"] .section-divider{
  margin:18px 0;
}

body[data-howto-detail="true"] .howto-quick-read{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:12px 0 4px;
}

body[data-howto-detail="true"] .howto-quick-read .info{
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  border-radius:10px;
  padding:11px 12px;
}

body[data-howto-detail="true"] .howto-quick-read .k{
  color:var(--muted);
  font-size:.76rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:4px;
}

body[data-howto-detail="true"] .howto-quick-read .v{
  color:#fff;
  font-weight:700;
  line-height:1.38;
}

body[data-howto-detail="true"] .howto-quick-read .v strong{
  color:var(--accent);
}

body[data-howto-detail="true"] .guide-body{
  gap:12px;
  margin-top:14px;
}

body[data-howto-detail="true"] .guide-panel{
  border-radius:12px;
  background:var(--panel);
  padding:16px;
}

body[data-howto-detail="true"] .guide-panel h2,
body[data-howto-detail="true"] .guide-panel h3{
  color:var(--accent);
  font-size:1.12rem;
  letter-spacing:.01em;
}

body[data-howto-detail="true"] .guide-panel p,
body[data-howto-detail="true"] .guide-panel ul,
body[data-howto-detail="true"] .guide-panel ol{
  color:#d7dde3;
}

body[data-howto-detail="true"] .guide-panel li::marker{
  color:var(--accent);
}

body[data-howto-detail="true"] .guide-check-grid{
  gap:10px;
}

body[data-howto-detail="true"] .guide-check{
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  padding:13px;
}

body[data-howto-detail="true"] .guide-check strong{
  color:var(--accent);
  text-transform:uppercase;
  font-size:.82rem;
  letter-spacing:.05em;
}

body[data-howto-detail="true"] .guide-callout{
  border:2px solid var(--accent);
  background:rgba(234,88,12,.06);
  color:#fff;
  font-weight:700;
}

body[data-howto-detail="true"] .guide-intro-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,320px);
  gap:12px;
  align-items:stretch;
}

body[data-howto-detail="true"] .guide-intro-row .guide-panel{
  min-width:0;
}

body[data-howto-detail="true"] .guide-photo-card{
  width:100%;
  min-width:0;
  margin:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  overflow:hidden;
  align-self:stretch;
}

body[data-howto-detail="true"] .guide-photo-card img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

body[data-howto-detail="true"] .guide-photo-card img.guide-diagram-img,
body[data-howto-detail="true"] .guide-hero-image.guide-diagram-img{
  object-fit:contain;
  background:#080b0f;
}

.howto-card .thumb img[src$=".svg"]{
  object-fit:contain !important;
  padding:8px;
  background:#080b0f;
}

body[data-howto-detail="true"] .guide-photo-card img.guide-diagram-img{
  padding:10px;
}

body[data-howto-detail="true"] .guide-photo-card figcaption{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.45;
  padding:11px 14px 13px;
}

body[data-howto-detail="true"] .guide-mini-nav a{
  background:var(--panel);
}

/* Knot pages need diagrams and instruction density, not the generic article stack. */
body[data-knot-page="true"] .category-headline > div:first-child,
body[data-knot-page="true"] .category-headline .section-intro{
  max-width:900px;
}

body[data-knot-page="true"] .guide-hero-image{
  object-position:center;
}

.knot-guide-body{
  display:grid;
  gap:16px;
}

.knot-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:14px;
  align-items:stretch;
}

.knot-lede{
  min-width:0;
}

.knot-vocab{
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  padding:16px;
}

.knot-vocab h2,
.knot-section-head h2{
  margin:0 0 8px;
  color:var(--accent);
  font-size:1.15rem;
}

.knot-vocab dl{
  margin:0;
  display:grid;
  gap:10px;
}

.knot-vocab div{
  padding:0 0 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.knot-vocab div:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.knot-vocab dt{
  color:#fff;
  font-weight:800;
  margin:0 0 2px;
}

.knot-vocab dd{
  color:var(--muted);
  margin:0;
  line-height:1.42;
}

.knot-section-head{
  max-width:860px;
  margin:0 0 14px;
}

.knot-section-head .section-kicker{
  color:#fff;
  margin:0 0 4px;
}

.knot-section-head p:not(.section-kicker){
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.knot-system-panel{
  overflow:hidden;
}

.knot-system-diagram{
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  overflow:hidden;
  background:#080b0f;
}

.knot-system-diagram svg{
  display:block;
  width:100%;
  height:auto;
}

.knot-system-diagram img{
  display:block;
  width:100%;
  max-height:520px;
  height:auto;
  object-fit:contain;
  background:#080b0f;
}

.knot-system-diagram figcaption{
  border-top:1px solid rgba(255,255,255,.09);
  color:var(--muted);
  font-size:.92rem;
  line-height:1.45;
  padding:11px 14px 13px;
}

.rope-path-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.rope-path-strip div{
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  padding:13px;
  min-width:0;
}

.rope-path-strip strong{
  display:block;
  color:var(--accent);
  font-size:.92rem;
  margin:0 0 6px;
}

.rope-path-strip span{
  display:block;
  color:var(--muted);
  line-height:1.45;
}

/* How-to skill modules: reusable sections for pages that need more than generic panels. */
.skill-sequence{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.skill-sequence li,
.skill-card{
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  padding:13px;
  min-width:0;
}

.skill-sequence strong,
.skill-card strong{
  display:block;
  color:var(--accent);
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 6px;
}

.skill-sequence span,
.skill-card span,
.skill-card p{
  color:var(--muted);
  line-height:1.48;
  margin:0;
}

.skill-table-wrap{
  overflow-x:auto;
  margin-top:12px;
}

.skill-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  color:#d7dde3;
}

.skill-table th,
.skill-table td{
  text-align:left;
  vertical-align:top;
  border:1px solid rgba(255,255,255,.09);
  padding:11px 12px;
  line-height:1.42;
}

.skill-table th{
  color:#fff;
  background:rgba(255,255,255,.04);
}

.skill-table td:first-child{
  color:var(--accent);
  font-weight:800;
}

.skill-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.skill-split .guide-panel{
  margin:0;
}

.skill-warning{
  border-color:rgba(255,90,31,.7) !important;
  background:linear-gradient(135deg,rgba(234,88,12,.12),rgba(255,255,255,.018)) !important;
}

.skill-do-dont{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.skill-do-dont .skill-card:first-child{
  border-color:rgba(94,234,164,.28);
}

.skill-do-dont .skill-card:last-child{
  border-color:rgba(255,90,31,.38);
}

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

  .skill-split,
  .skill-do-dont{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .skill-sequence{
    grid-template-columns:1fr;
  }
}

.knot-rope{
  fill:none;
  stroke:#e8d0a2;
  stroke-width:13;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#soft-shadow);
}

.knot-rope-fixed{
  stroke:#c49b65;
}

.knot-rope-loop{
  stroke:#f1d7a2;
}

.knot-working{
  stroke:#ff7a1a;
}

.knot-svg-label{
  fill:#d7dde3;
  font-size:18px;
  font-weight:800;
  letter-spacing:.02em;
}

.knot-svg-accent{
  fill:#ff7a1a;
}

.knot-step-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.knot-procedure{
  counter-reset:knot-procedure;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.knot-step-card{
  position:relative;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  padding:14px;
  min-width:0;
}

.knot-procedure .knot-step-card{
  padding:18px;
  min-height:178px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  border-color:rgba(255,255,255,.11);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));
}

.knot-step-number{
  position:absolute;
  top:12px;
  right:14px;
  color:rgba(255,255,255,.14);
  font-size:1.8rem;
  font-weight:900;
  line-height:1;
}

.knot-procedure .knot-step-number{
  top:14px;
  right:16px;
  color:rgba(255,90,31,.22);
  font-size:2.35rem;
}

.knot-step-card h3{
  color:#fff !important;
  font-size:1rem !important;
  margin:12px 0 6px;
  padding-right:36px;
}

.knot-procedure .knot-step-card h3{
  margin:0 0 9px;
  font-size:1.08rem !important;
  line-height:1.18;
  padding-right:54px;
}

.knot-step-card p{
  margin:0;
  color:var(--muted) !important;
  line-height:1.5;
}

.knot-mini-diagram{
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  overflow:hidden;
  background:#080b0f;
}

.knot-mini-diagram svg{
  display:block;
  width:100%;
  height:auto;
}

.knot-mini-diagram rect:first-child{
  fill:#080b0f;
}

.knot-mini-diagram .wood{
  fill:#5a341f;
}

.knot-mini-diagram .rope{
  fill:none;
  stroke:#e8d0a2;
  stroke-width:9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.knot-mini-diagram .accent-rope{
  stroke:#ff7a1a;
}

.knot-mini-diagram text{
  fill:#d7dde3;
  font-size:14px;
  font-weight:800;
  text-anchor:middle;
}

.knot-mini-diagram .pull-arrow{
  fill:none;
  stroke:#ff5a1f;
  stroke-width:4;
  stroke-linecap:round;
  marker-end:url(#mini-arrow);
}

.knot-mini-diagram marker path{
  fill:#ff5a1f;
}

.knot-choice-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:12px;
}

.knot-table-wrap{
  overflow-x:auto;
  margin-top:12px;
}

.knot-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  color:#d7dde3;
}

.knot-table th,
.knot-table td{
  text-align:left;
  vertical-align:top;
  border:1px solid rgba(255,255,255,.09);
  padding:11px 12px;
  line-height:1.42;
}

.knot-table th{
  color:#fff;
  background:rgba(255,255,255,.04);
}

.knot-table td:first-child{
  color:var(--accent);
  font-weight:800;
}

.knot-use-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.knot-mistake-grid,
.knot-compare{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.knot-compare{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.knot-mistake-grid article,
.knot-compare div{
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  padding:13px;
}

.knot-mistake-grid h3,
.knot-compare h3{
  color:#fff !important;
  margin:0 0 6px;
  font-size:1rem !important;
}

.knot-mistake-grid p,
.knot-compare p{
  margin:0;
  color:var(--muted) !important;
  line-height:1.48;
}

.knot-checklist{
  margin:0;
  padding-left:22px;
  color:#d7dde3;
}

.knot-checklist li{
  padding-left:4px;
}

.knot-checklist li + li{
  margin-top:10px;
}

.knot-checklist strong{
  color:#fff;
}

.knot-faq details{
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.022);
  padding:12px 14px;
}

.knot-faq details + details{
  margin-top:10px;
}

.knot-faq summary{
  cursor:pointer;
  color:#fff;
  font-weight:800;
}

.knot-faq details p{
  margin:8px 0 0;
  color:var(--muted) !important;
}

@media (max-width:980px){
  .knot-overview,
  .knot-choice-grid{
    grid-template-columns:1fr;
  }

  .knot-step-grid,
  .knot-procedure,
  .knot-use-grid,
  .knot-mistake-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px){
  .knot-step-grid,
  .knot-procedure,
  .knot-use-grid,
  .knot-mistake-grid,
  .knot-compare{
    grid-template-columns:1fr;
  }

  .knot-system-diagram{
    overflow-x:auto;
  }

  .knot-system-diagram svg{
    min-width:820px;
  }

  .rope-path-strip{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  body[data-howto-detail="true"] .howto-quick-read{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-howto-detail="true"] .guide-intro-row{
    grid-template-columns:1fr;
  }

  body[data-howto-detail="true"] .guide-hero-image{
    aspect-ratio:16/9;
  }
}

@media (max-width:640px){
  body[data-howto-detail="true"] .category-section{
    padding-top:74px;
  }

  body[data-howto-detail="true"] .category-headline .title{
    font-size:clamp(1.7rem, 7vw, 2rem) !important;
    line-height:1.06 !important;
  }

  body[data-howto-detail="true"] .howto-quick-read{
    grid-template-columns:1fr;
  }

body[data-howto-detail="true"] .guide-hero-image{
    aspect-ratio:4/3;
    margin-top:12px;
  }
}

/* Homepage card normalization */
html body[data-page-id="home"] #howToGrid.howto-home-grid{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-columns:none !important;
  grid-auto-columns:calc((100% - 36px) / 3) !important;
  gap:18px !important;
  align-items:start !important;
  padding:2px 2px 12px !important;
}

html body[data-page-id="home"] #howToGrid.howto-home-grid > *{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  padding-inline:0 !important;
  margin:0 !important;
}

html body[data-page-id="home"] #howToGrid.howto-home-grid > .category-card-link{
  height:auto !important;
  min-height:0 !important;
  display:flex !important;
  align-items:stretch !important;
}

html body[data-page-id="home"] #howToGrid .howto-card{
  padding:14px !important;
  height:100% !important;
  min-height:0 !important;
}

html body[data-page-id="home"] #howToGrid .thumb{
  aspect-ratio:1 / 1 !important;
  border-radius:12px !important;
}

html body[data-page-id="home"] #howToGrid h4{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
}

html body[data-page-id="home"] #howToGrid .desc{
  -webkit-line-clamp:3 !important;
  min-height:4.35em !important;
}

html body[data-page-id="home"] #howToGrid .card-tags{
  margin-top:auto !important;
  padding-top:0 !important;
}

@media (max-width:1100px){
  html body[data-page-id="home"] #howToGrid.howto-home-grid{
    grid-auto-columns:calc((100% - 18px) / 2) !important;
  }
}

@media (max-width:700px){
  html body[data-page-id="home"] #howToGrid.howto-home-grid{
    grid-auto-columns:100% !important;
    gap:0 !important;
    padding:2px 0 14px !important;
  }
}

/* Mobile visual polish pass */
@media (max-width:700px){
  html,
  body{
    overflow-x:hidden;
  }

  .wrap{
    padding-left:16px;
    padding-right:16px;
  }

  header .nav{
    gap:10px;
  }

  .logo{
    width:38px;
    height:38px;
    border-radius:8px;
    font-size:18px;
  }

  .brand h1,
  .brand-wordmark{
    font-size:19px;
  }

  .mobile-menu .mobile-links{
    left:10px;
    right:10px;
    padding:14px;
    border-radius:12px;
    max-height:calc(100dvh - var(--navh) - 20px);
    overflow:auto;
  }

  .mobile-menu .mobile-links a{
    min-height:48px;
    margin:8px 0;
    padding:13px 14px;
    border-radius:12px;
    font-size:16px;
    line-height:1.15;
  }

  section{
    padding:34px 0;
  }

  .section-headline,
  body[data-page-id="category"] .category-headline{
    gap:10px !important;
    margin-bottom:0;
  }

  .section-kicker,
  body[data-page-id="category"] .category-headline .section-kicker{
    font-size:12px;
    line-height:1.2;
  }

  .title,
  body[data-page-id="category"] .category-headline .title{
    font-size:clamp(1.6rem, 7.5vw, 2.05rem) !important;
    line-height:1.06 !important;
    margin-bottom:8px !important;
  }

  .section-intro,
  body[data-page-id="category"] .category-headline .section-intro,
  body[data-page-id="category"] .category-headline .lead{
    font-size:.98rem !important;
    line-height:1.52 !important;
  }

  .section-divider{
    margin:14px 0 18px !important;
  }

  .section-link-btn{
    width:100%;
    justify-content:space-between;
    min-height:44px;
  }

  .section-link-strip{
    display:grid;
    grid-template-columns:1fr auto;
    gap:4px 12px;
    padding:14px 16px !important;
    margin-top:14px !important;
  }

  .section-link-strip strong,
  .section-link-strip em{
    min-width:0;
  }

  .section-link-strip em{
    font-size:.9rem;
    line-height:1.4;
  }

  .home-carousel-shell{
    margin-top:0;
  }

  .camp-swipe-hint{
    font-size:12px;
    margin:0 0 6px;
  }

  body[data-page-id="category"] .breadcrumbs{
    font-size:14px;
    line-height:1.35;
    margin-bottom:8px;
  }

  body[data-page-id="category"] .category-section{
    padding-top:calc(var(--navh) + 14px) !important;
  }
}

@media (max-width:420px){
  .brand h1,
  .brand-wordmark{
    font-size:18px;
  }

  .mobile-menu .mobile-links{
    left:8px;
    right:8px;
    padding:12px;
  }

  .section-link-strip{
    grid-template-columns:1fr;
  }

  .section-link-strip::after{
    justify-self:start;
  }
}

/* Contact page mobile: keep the portrait as an accent, not a second hero. */
@media (max-width:700px){
  body[data-index-type="contact"],
  body[data-index-type="contact"] .index-page,
  body[data-index-type="contact"] .contact-page-section,
  body[data-index-type="contact"] .contact-page-section .wrap{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  body[data-index-type="contact"] .contact-page-section{
    padding-bottom:42px !important;
  }

  body[data-index-type="contact"] .contact-headline{
    position:relative !important;
    display:block !important;
    width:calc(100vw - 32px) !important;
    max-width:calc(100vw - 32px) !important;
    padding:18px 16px 16px !important;
    border:1px solid rgba(234,88,12,.22);
    border-radius:14px;
    background:
      radial-gradient(circle at 100% 0%, rgba(234,88,12,.22), transparent 42%),
      linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
      #0d0f13;
  }

  body[data-index-type="contact"] .contact-headline::after{
    content:none;
  }

  body[data-index-type="contact"] .contact-headline > div:first-child{
    display:block !important;
    padding-right:112px !important;
  }

  body[data-index-type="contact"] .contact-headline .contact-photo-panel{
    float:none !important;
    position:absolute !important;
    top:22px !important;
    right:16px !important;
    bottom:auto !important;
    width:88px !important;
    height:88px !important;
    min-width:88px !important;
    max-width:88px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
    overflow:hidden !important;
    background:transparent !important;
    box-shadow:0 12px 26px rgba(0,0,0,.35) !important;
  }

  body[data-index-type="contact"] .contact-photo-panel img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border:3px solid var(--accent) !important;
  }

  body[data-index-type="contact"] .contact-headline .section-kicker{
    margin-top:0 !important;
  }

  body[data-index-type="contact"] .contact-headline .title{
    margin-bottom:10px !important;
  }

  body[data-index-type="contact"] .contact-headline .section-intro,
  body[data-index-type="contact"] .contact-headline .section-note{
    font-size:.95rem !important;
    line-height:1.48 !important;
  }

  body[data-index-type="contact"] .contact-page-copy{
    margin-top:18px !important;
  }

  body[data-index-type="contact"] .contact-cue-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
  }

  body[data-index-type="contact"] .contact-cue-card{
    width:100% !important;
    max-width:100% !important;
    padding:14px 14px 14px 16px !important;
  }

  body[data-index-type="contact"] .contact-box{
    width:100% !important;
    max-width:100% !important;
  }
}

@media (max-width:420px){
  body[data-index-type="contact"] .contact-headline > div:first-child{
    padding-right:92px !important;
  }

  body[data-index-type="contact"] .contact-headline .contact-photo-panel{
    width:74px !important;
    height:74px !important;
    min-width:74px !important;
    max-width:74px !important;
  }
}

/* Gear index: product/manufacturer shots need to read as product photos, not
   lifestyle crops. Keep this late so older category-card overrides do not win. */
.gear-card .thumb img[src^="https://m.media-amazon.com"],
.gear-card .thumb img[src^="https://pisces.bbystatic.com"],
.gear-card .thumb img[src^="https://cdn.shopify.com"]{
  object-fit:contain !important;
  padding:10px !important;
  background:
    radial-gradient(circle at 66% 18%, rgba(234,88,12,.10), transparent 34%),
    linear-gradient(145deg, #05070a, #10151c 58%, #080a0d) !important;
}

body[data-index-type="gear"] .gear-card .thumb img{
  object-fit:cover !important;
  padding:0 !important;
  background:#0e0e0e !important;
}

/* Camp index: same category treatment as gear, grouped by region while keeping
   the existing camp cards and map behavior. */
body[data-index-type="camp"] .camp-section-stack{
  display:grid;
  gap:42px;
}

body[data-index-type="camp"] .camp-path-panel{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.45fr);
  gap:12px;
  align-items:stretch;
  margin:20px 0 24px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(234,88,12,.11), rgba(255,255,255,.025) 44%, rgba(0,0,0,.14));
}

body[data-index-type="camp"] .camp-path-head{
  display:grid;
  align-content:center;
  gap:6px;
}

body[data-index-type="camp"] .camp-path-head .section-kicker{
  margin:0;
  color:var(--accent);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-index-type="camp"] .camp-path-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(1.1rem, 2.2vw, 1.45rem);
  line-height:1.08;
}

body[data-index-type="camp"] .camp-path-head p:not(.section-kicker){
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.48;
}

body[data-index-type="camp"] .camp-path-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

body[data-index-type="camp"] .camp-path-grid a{
  position:relative;
  display:grid;
  align-content:start;
  gap:6px;
  min-height:92px;
  padding:12px 38px 12px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(10,12,15,.74);
  color:var(--ink);
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}

body[data-index-type="camp"] .camp-path-grid a::after{
  content:"\2192";
  position:absolute;
  right:16px;
  bottom:13px;
  color:var(--accent);
  font-size:21px;
  font-weight:900;
}

body[data-index-type="camp"] .camp-path-grid a:hover,
body[data-index-type="camp"] .camp-path-grid a:focus-visible{
  border-color:rgba(234,88,12,.85);
  background:rgba(15,17,21,.92);
  transform:translateY(-2px);
  outline:none;
}

body[data-index-type="camp"] .camp-path-grid span{
  color:var(--accent);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-index-type="camp"] .camp-path-grid strong{
  color:#fff;
  font-size:.94rem;
  line-height:1.25;
}

body[data-index-type="camp"] .camp-topic-section{
  display:grid;
  gap:16px;
  padding:0 !important;
}

body[data-index-type="camp"] .camp-topic-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(234,88,12,.55);
}

body[data-index-type="camp"] .camp-topic-head h2{
  margin:0 0 6px;
  font-size:clamp(1.35rem, 2.6vw, 2rem);
  line-height:1.05;
}

body[data-index-type="camp"] .camp-topic-head .section-kicker{
  margin:0 0 8px;
  color:var(--accent);
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-index-type="camp"] .camp-topic-head p{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.55;
}

body[data-index-type="camp"] .camp-section-count{
  flex:0 0 auto;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

body[data-index-type="camp"] .camp-location-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  justify-content:start !important;
  margin-top:0;
}

body[data-index-type="camp"] .camp-location-grid > .category-card-link{
  width:100% !important;
}

/* Search results should behave like a catalog, not stretch one lonely result
   into a billboard. */
body[data-index-type="search"] .search-section-stack{
  display:grid;
  gap:36px;
}

body[data-index-type="search"] .search-result-section{
  display:grid;
  gap:0;
  padding-top:4px !important;
}

body[data-index-type="search"] .search-result-section + .search-result-section{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:30px !important;
}

body[data-index-type="search"] .search-result-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  max-width:none;
  margin:0 0 16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(234,88,12,.55);
}

body[data-index-type="search"] .search-result-head > div{
  max-width:760px;
}

body[data-index-type="search"] .search-result-head .section-kicker{
  margin:0;
  color:var(--accent);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-index-type="search"] .search-result-head h2{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(1.35rem, 3vw, 1.9rem);
  line-height:1.08;
}

body[data-index-type="search"] .search-result-head p{
  margin:0;
  color:var(--muted);
  font-size:1rem !important;
  line-height:1.55 !important;
}

body[data-index-type="search"] .search-section-count{
  display:block;
  flex:0 0 auto;
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

body[data-index-type="search"] .index-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  justify-content:start !important;
  align-items:stretch !important;
  margin:0 0 24px !important;
}

body[data-index-type="search"] .index-grid > .category-card-link{
  width:100% !important;
  min-height:100% !important;
}

body[data-index-type="search"] .index-grid > .category-card-link > .category-card{
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

body[data-index-type="search"] .category-card .thumb{
  aspect-ratio:1 / 1 !important;
  background:#101318;
}

body[data-index-type="search"] .category-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

body[data-index-type="search"] .category-card .card-meta{
  color:var(--accent) !important;
}

body[data-index-type="camp"] .category-card .card-meta,
body[data-index-type="camp"] .camp-card .card-meta{
  color:var(--accent) !important;
}

@media (max-width:700px){
  body[data-index-type="camp"] .camp-path-panel{
    grid-template-columns:1fr;
    padding:14px;
    margin:18px 0 24px;
  }

  body[data-index-type="camp"] .camp-path-grid{
    grid-template-columns:1fr;
  }

  body[data-index-type="camp"] .camp-path-grid a{
    min-height:0;
  }

  body[data-index-type="camp"] .camp-section-stack{
    gap:34px;
  }

  body[data-index-type="camp"] .camp-topic-head{
    display:grid;
    gap:8px;
    align-items:start;
  }

  body[data-index-type="camp"] .camp-location-grid{
    grid-template-columns:1fr !important;
  }

  body[data-index-type="search"] .index-grid{
    grid-template-columns:1fr !important;
  }

  body[data-index-type="search"] .search-section-stack{
    gap:34px;
  }

  body[data-index-type="search"] .search-result-head{
    margin-bottom:14px;
  }
}

/* Global card media rule: card thumbnails should be square everywhere. This is
   intentionally late so older page-specific aspect ratios do not leak through. */
html body .card .thumb,
html body .category-card .thumb,
html body .project-card .thumb,
html body .camp-card .thumb,
html body .gear-card .thumb,
html body .howto-card .thumb{
  aspect-ratio:1 / 1 !important;
}

html body .card .thumb img,
html body .category-card .thumb img,
html body .project-card .thumb img,
html body .camp-card .thumb img,
html body .gear-card .thumb img,
html body .howto-card .thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* How-to detail mobile containment: keep article panels inside the viewport. */
@media (max-width:700px){
  body[data-howto-detail="true"],
  body[data-howto-detail="true"] .index-page,
  body[data-howto-detail="true"] .category-section{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  body[data-howto-detail="true"] .category-section .wrap{
    width:100%;
    max-width:100%;
    min-width:0;
    padding-left:16px !important;
    padding-right:16px !important;
    overflow:hidden;
  }

  body[data-howto-detail="true"] .category-headline,
  body[data-howto-detail="true"] .category-headline > div,
  body[data-howto-detail="true"] .category-headline .title,
  body[data-howto-detail="true"] .category-headline .section-intro,
  body[data-howto-detail="true"] .guide-body,
  body[data-howto-detail="true"] .guide-intro-row,
  body[data-howto-detail="true"] .guide-panel,
  body[data-howto-detail="true"] .guide-callout,
  body[data-howto-detail="true"] .guide-photo-card,
  body[data-howto-detail="true"] .guide-check-grid,
  body[data-howto-detail="true"] .guide-check,
  body[data-howto-detail="true"] .guide-two-col,
  body[data-howto-detail="true"] .guide-mini-nav{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  body[data-howto-detail="true"] .guide-body,
  body[data-howto-detail="true"] .guide-intro-row,
  body[data-howto-detail="true"] .guide-check-grid,
  body[data-howto-detail="true"] .guide-two-col,
  body[data-howto-detail="true"] .guide-mini-nav{
    grid-template-columns:1fr !important;
  }

  body[data-howto-detail="true"] .guide-panel,
  body[data-howto-detail="true"] .guide-callout,
  body[data-howto-detail="true"] .guide-check,
  body[data-howto-detail="true"] .howto-quick-read .info{
    overflow-wrap:anywhere;
    word-break:normal;
  }

  body[data-howto-detail="true"] .guide-callout{
    padding:16px !important;
  }

  body[data-howto-detail="true"] .guide-hero-image,
  body[data-howto-detail="true"] .guide-photo-card img{
    width:100% !important;
    max-width:100% !important;
  }

  body[data-howto-detail="true"] .skill-table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  body[data-howto-detail="true"] .skill-table,
  body[data-howto-detail="true"] .knot-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
  }

  body[data-howto-detail="true"] .skill-table th,
  body[data-howto-detail="true"] .skill-table td,
  body[data-howto-detail="true"] .knot-table th,
  body[data-howto-detail="true"] .knot-table td{
    padding:9px 8px !important;
    font-size:.8rem;
    line-height:1.35;
    overflow-wrap:anywhere;
    word-break:normal;
  }
}

/* Shared injected contact/footer shell: make the form feel intentional on detail pages. */
.category-shell-contact{
  padding:clamp(48px, 6vw, 76px) 0 clamp(56px, 7vw, 84px) !important;
  border-top:1px solid var(--accent);
}

.category-shell-contact > .wrap{
  display:block;
}

.category-shell-contact .title{
  margin:0 0 14px;
}

.category-shell-contact .lead{
  max-width:760px;
}

.category-shell-contact .contact-box{
  margin-top:18px !important;
  padding:clamp(22px, 3vw, 32px) !important;
  gap:22px;
}

.category-shell-contact textarea.input{
  min-height:180px;
}

.category-shell-footer{
  border-top:1px solid var(--accent);
}

@media (max-width:700px){
  .category-shell-contact{
    padding:40px 0 48px !important;
  }

  .category-shell-contact .wrap{
    padding-left:16px;
    padding-right:16px;
  }

  .category-shell-contact .contact-box{
    padding:18px !important;
  }

  .category-shell-contact .row{
    grid-template-columns:1fr;
    gap:12px;
  }

  .category-shell-contact textarea.input{
    min-height:170px;
  }
}

/* Gear detail pages: add breathing room to dense product panels. */
body[data-gear-id] .project-page{
  padding-bottom:22px !important;
}

body[data-gear-id] .project-grid{
  gap:28px !important;
}

body[data-gear-id] .left,
body[data-gear-id] .right,
body[data-gear-id] .two-up-notes{
  gap:18px !important;
}

body[data-gear-id] .below{
  gap:22px !important;
}

body[data-gear-id] .card,
body[data-gear-id] .buy-card{
  padding:20px !important;
}

body[data-gear-id] .section-title{
  margin-bottom:12px !important;
}

body[data-gear-id] .quick-read{
  gap:14px !important;
}

body[data-gear-id] .quick-read .info,
body[data-gear-id] .spec,
body[data-gear-id] .review{
  padding:16px !important;
}

body[data-gear-id] .quick-read .k,
body[data-gear-id] .spec .k{
  margin-bottom:8px !important;
}

body[data-gear-id] .specs,
body[data-gear-id] .reviews{
  gap:12px !important;
}

body[data-gear-id] .my-notes{
  padding:22px !important;
}

body[data-gear-id] .my-notes p{
  margin-top:0;
  line-height:1.65;
}

body[data-gear-id] .my-notes ul{
  gap:12px !important;
  margin-top:14px !important;
}

body[data-gear-id] .support-note{
  margin-bottom:16px !important;
}

body[data-gear-id] .cta-band{
  margin-top:42px !important;
}

body[data-gear-id] .project-page + .related-section{
  margin-top:10px !important;
}

body[data-gear-id] .cta-band .wrap{
  padding-top:54px !important;
  padding-bottom:54px !important;
}

body[data-gear-id] .cta-inner{
  gap:26px !important;
}

@media (max-width:700px){
  body[data-gear-id] .project-page{
    padding-bottom:26px !important;
  }

  body[data-gear-id] .project-grid,
  body[data-gear-id] .below,
  body[data-gear-id] .left,
  body[data-gear-id] .right,
  body[data-gear-id] .two-up-notes{
    gap:18px !important;
  }

  body[data-gear-id] .card,
  body[data-gear-id] .buy-card,
  body[data-gear-id] .my-notes{
    padding:18px !important;
  }

  body[data-gear-id] .quick-read,
  body[data-gear-id] .specs,
  body[data-gear-id] .reviews{
    gap:12px !important;
  }

  body[data-gear-id] .cta-band{
    margin-top:34px !important;
  }

  body[data-gear-id] .cta-band .wrap{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }
}

/* =========================================================
   EDITORIAL GUIDE MOBILE CONTAINMENT
   Keep long guide headings, cards, and decision panels inside
   the viewport on the new gear guide pages.
   ========================================================= */
body[data-guide-layout="editorial"]{
  overflow-x:hidden;
}

body[data-guide-layout="editorial"] .wrap,
body[data-guide-layout="editorial"] .category-section,
body[data-guide-layout="editorial"] .roundup-section,
body[data-guide-layout="editorial"] .decision-card,
body[data-guide-layout="editorial"] .index-grid,
body[data-guide-layout="editorial"] .related-section{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

body[data-guide-layout="editorial"] .wrap{
  max-width:var(--wrap);
}

body[data-guide-layout="editorial"] .title,
body[data-guide-layout="editorial"] h1,
body[data-guide-layout="editorial"] h2,
body[data-guide-layout="editorial"] h3,
body[data-guide-layout="editorial"] p,
body[data-guide-layout="editorial"] li,
body[data-guide-layout="editorial"] span{
  max-width:100%;
  overflow-wrap:anywhere;
}

@media (max-width:700px){
  body[data-guide-layout="editorial"] .category-section{
    padding-inline:0 !important;
  }

  body[data-guide-layout="editorial"] .wrap{
    width:min(100%, 430px) !important;
    max-width:430px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-inline:16px !important;
    overflow:hidden;
  }

  body[data-guide-layout="editorial"] .category-headline .title{
    font-size:2rem !important;
    line-height:1.08 !important;
  }

  body[data-guide-layout="editorial"] .roundup-section{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  body[data-guide-layout="editorial"] .roundup-section .title{
    font-size:1.55rem !important;
    line-height:1.12 !important;
  }

  body[data-guide-layout="editorial"] .decision-card{
    padding:14px !important;
    overflow:hidden;
  }

  body[data-guide-layout="editorial"] .tool-list-grid,
  body[data-guide-layout="editorial"] .decision-head,
  body[data-guide-layout="editorial"] .decision-grid{
    grid-template-columns:1fr !important;
  }

  body[data-guide-layout="editorial"] .index-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    overflow:visible !important;
    padding-inline:0 !important;
  }

  body[data-guide-layout="editorial"] .index-grid > .category-card-link{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* Projects: clear services */
body[data-index-type="projects"] .project-service-lanes{display:grid;gap:14px;align-content:start;border:1px solid var(--line);border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.045),transparent 42%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),var(--panel);padding:18px;box-shadow:0 18px 42px rgba(0,0,0,.22)}
body[data-index-type="projects"] .project-service-lanes-head{border-left:2px solid var(--accent);padding-left:14px}
body[data-index-type="projects"] .project-service-lanes-head .section-kicker{color:var(--accent);margin:0 0 7px}
body[data-index-type="projects"] .project-service-lanes-head h3{color:var(--ink);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.15;margin:0 0 8px}
body[data-index-type="projects"] .project-service-lanes-head p{color:var(--muted);margin:0;max-width:62ch}
body[data-index-type="projects"] .project-service-list{display:grid;gap:10px}
body[data-index-type="projects"] .project-service-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:92px;padding:15px 16px;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:inherit;text-decoration:none;background:linear-gradient(90deg,rgba(234,88,12,.075),rgba(255,255,255,.018) 32%,transparent);transition:transform .18s ease,border-color .18s ease,background .18s ease}
body[data-index-type="projects"] .project-service-row:hover,body[data-index-type="projects"] .project-service-row:focus-visible{transform:translateX(4px);border-color:rgba(234,88,12,.68);background:linear-gradient(90deg,rgba(234,88,12,.14),rgba(255,255,255,.03) 38%,transparent);outline:none}
body[data-index-type="projects"] .project-service-num{color:var(--accent);font-size:24px;font-weight:900;line-height:1}
body[data-index-type="projects"] .project-service-text{display:grid;gap:5px}
body[data-index-type="projects"] .project-service-text strong{color:var(--ink);font-size:17px;line-height:1.2}
body[data-index-type="projects"] .project-service-text em{color:var(--muted);font-size:14px;line-height:1.45;font-style:normal}
body[data-index-type="projects"] .project-service-action{color:var(--accent);font-size:13px;font-weight:800;white-space:nowrap}

/* Service detail pages: editorial layout */
.service-story,.service-proof-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:18px;margin-top:18px}
.service-story-main,.service-story-aside,.service-process,.service-proof-band,.service-lane-panel{border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--panel)}
.service-story-main,.service-story-aside,.service-process{padding:24px}
.service-story-main{border-left:2px solid rgba(234,88,12,.75)}
.service-story-main h2,.service-story-aside h2,.service-process h2,.service-proof-copy h2{color:var(--ink);font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.16;margin:0 0 12px}
.service-story-main p,.service-story-aside p,.service-process p,.service-proof-copy p{color:var(--muted);line-height:1.62}
.service-story-aside{background:radial-gradient(circle at top right,rgba(234,88,12,.12),transparent 46%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012)),var(--panel)}
.service-check-list{list-style:none;display:grid;gap:11px;margin:18px 0 0;padding:0}
.service-check-list li{position:relative;padding-left:22px;color:#c8d5e6;line-height:1.55}
.service-check-list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(234,88,12,.12)}
.service-process{margin-top:18px}
.service-process-list{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.08)}
.service-process-list li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.service-process-list span,.service-proof-link span{color:var(--accent);font-weight:900;letter-spacing:.08em}
.service-process-list strong,.service-proof-link strong{color:var(--ink);display:block;font-size:17px;line-height:1.2;margin:0 0 5px}
.service-process-list p{margin:0}
.service-proof-band{padding:24px;align-items:start}
.service-proof-list{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.08)}
.service-proof-link{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);color:inherit;text-decoration:none}
.service-proof-link:hover strong,.service-proof-link:focus-visible strong{color:var(--accent)}
.service-proof-link em{color:var(--muted);display:block;font-style:normal;line-height:1.5}
.service-lane-panel{margin-top:18px;padding:18px}
.service-lane-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.service-lane-strip a{border:1px solid rgba(234,88,12,.5);border-radius:999px;color:var(--accent);font-weight:800;padding:9px 12px;text-decoration:none}
.service-lane-strip a:hover,.service-lane-strip a:focus-visible{background:rgba(234,88,12,.12);outline:none}
@media (max-width:900px){body[data-index-type="projects"] .project-service-row,.service-story,.service-proof-band{grid-template-columns:1fr}body[data-index-type="projects"] .project-service-action{justify-self:start}}
@media (max-width:620px){body[data-index-type="projects"] .project-service-lanes{padding:14px}body[data-index-type="projects"] .project-service-row{min-height:0;padding:14px}.service-story-main,.service-story-aside,.service-process,.service-proof-band{padding:18px}.service-process-list li,.service-proof-link{grid-template-columns:1fr;gap:6px}}

/* Homepage: service cards inside Projects carousel */
body[data-page-id="home"] #projectGrid .home-service-project-link{
  color:inherit;
  display:block;
  text-decoration:none;
}

body[data-page-id="home"] #projectGrid .home-service-project-card{
  min-height:100%;
  padding:22px;
  border-left:2px solid rgba(234,88,12,.75);
  background:
    linear-gradient(135deg, rgba(234,88,12,.12), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    var(--panel);
}

body[data-page-id="home"] #projectGrid .home-service-project-card::after{
  content:"Open service";
}

body[data-page-id="home"] #projectGrid .home-service-project-card h3{
  color:var(--ink);
  font-size:22px;
  line-height:1.1;
  margin:10px 0 12px;
}

body[data-page-id="home"] #projectGrid .home-service-project-card p:not(.section-kicker){
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
  margin:0;
}

/* Homepage Projects: services use the same article-card carousel pattern */
body[data-page-id="home"] .home-project-services-shell{
  position:relative;
  margin:0 0 18px;
}

body[data-page-id="home"] #projectServiceCards.collection-grid{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-columns:none !important;
  grid-auto-columns:calc((100% - 28px) / 3) !important;
  gap:14px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:10px;
  padding:10px 10px 18px !important;
  scrollbar-width:none;
}

body[data-page-id="home"] #projectServiceCards.collection-grid::-webkit-scrollbar{
  display:none;
}

body[data-page-id="home"] #projectServiceCards.collection-grid > .collection-card{
  scroll-snap-align:start;
}

body[data-page-id="home"] #projectServiceCards.collection-grid > .collection-card::after{
  content:"Open service";
}

@media (max-width:1100px){
  body[data-page-id="home"] #projectServiceCards.collection-grid{
    grid-auto-columns:calc((100% - 14px) / 2) !important;
  }
}

@media (max-width:700px){
  body[data-page-id="home"] #projectServiceCards.collection-grid{
    grid-auto-columns:100% !important;
    gap:0 !important;
    padding:10px 0 18px !important;
    scroll-padding-inline:0;
  }
}

/* Projects page: service cards */
body[data-index-type="projects"] .project-service-list{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

body[data-index-type="projects"] .project-service-row{
  grid-template-columns:1fr;
  align-items:start;
  min-height:190px;
  padding:18px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    var(--panel);
}

body[data-index-type="projects"] .project-service-row:hover,
body[data-index-type="projects"] .project-service-row:focus-visible{
  transform:translateY(-2px);
}

body[data-index-type="projects"] .project-service-text strong{
  font-size:20px;
  max-width:90%;
}

body[data-index-type="projects"] .project-service-action{
  margin-top:auto;
  text-transform:uppercase;
  letter-spacing:.08em;
}

@media (max-width:760px){
  body[data-index-type="projects"] .project-service-list{
    grid-template-columns:1fr;
  }
}

/* Service detail pages: make the existing content read less like box grids */
body[data-index-type="services"] .service-detail-grid.service-detail-grid-wide{
  gap:0;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)), var(--panel);
}

body[data-index-type="services"] .service-detail-grid.service-detail-grid-wide .service-panel{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

body[data-index-type="services"] .service-detail-grid.service-detail-grid-wide .service-panel + .service-panel{
  border-left:1px solid rgba(255,255,255,.08);
}

body[data-index-type="services"] .service-ready-panel{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(280px, .75fr);
  gap:24px;
  margin-top:22px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:10px;
  background:
    linear-gradient(135deg, rgba(234,88,12,.1), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    var(--panel);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}

body[data-index-type="services"] .service-ready-copy h2{
  color:var(--ink);
  font-size:clamp(1.45rem, 2.2vw, 2rem);
  line-height:1.08;
  margin:0 0 12px;
}

body[data-index-type="services"] .service-ready-copy p:last-child{
  color:var(--muted);
  line-height:1.65;
  margin:0;
}

body[data-index-type="services"] .service-ready-list{
  align-self:start;
  border-left:2px solid rgba(234,88,12,.68);
  padding-left:18px;
}

body[data-index-type="services"] .service-ready-list strong{
  display:block;
  color:var(--ink);
  font-size:16px;
  margin-bottom:10px;
}

body[data-index-type="services"] .service-ready-list ul{
  display:grid;
  gap:9px;
  color:var(--muted);
  line-height:1.45;
  margin:0;
  padding-left:18px;
}

body[data-index-type="services"] .service-story-block,
body[data-index-type="services"] .service-workbench,
body[data-index-type="services"] .service-scenario-band{
  margin-top:22px;
  border:1px solid var(--line);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    var(--panel);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}

body[data-index-type="services"] .service-story-block{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(260px, .62fr);
  overflow:hidden;
}

body[data-index-type="services"] .service-story-copy{
  padding:26px;
}

body[data-index-type="services"] .service-story-copy h2,
body[data-index-type="services"] .service-workbench h2,
body[data-index-type="services"] .service-scenario-band h2{
  color:var(--ink);
  font-size:clamp(1.55rem, 2.2vw, 2.2rem);
  line-height:1.08;
  margin:0 0 12px;
}

body[data-index-type="services"] .service-story-copy p,
body[data-index-type="services"] .service-workbench p,
body[data-index-type="services"] .service-scenario-band p{
  color:var(--muted);
  line-height:1.65;
  margin:0;
}

body[data-index-type="services"] .service-story-copy p + p{
  margin-top:12px;
}

body[data-index-type="services"] .service-story-aside{
  display:grid;
  align-content:start;
  gap:12px;
  padding:24px;
  border-left:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 92% 10%, rgba(234,88,12,.13), transparent 38%),
    rgba(255,255,255,.018);
}

body[data-index-type="services"] .service-story-aside strong{
  color:var(--ink);
  font-size:16px;
}

body[data-index-type="services"] .service-story-aside ul{
  display:grid;
  gap:9px;
  color:var(--muted);
  line-height:1.45;
  margin:0;
  padding-left:18px;
}

body[data-index-type="services"] .service-workbench{
  display:grid;
  grid-template-columns:minmax(260px, .55fr) minmax(0, 1fr);
  overflow:hidden;
}

body[data-index-type="services"] .service-workbench-intro{
  padding:26px;
  border-right:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(234,88,12,.1), transparent 44%);
}

body[data-index-type="services"] .service-output-list{
  display:grid;
}

body[data-index-type="services"] .service-output-item{
  display:grid;
  grid-template-columns:150px minmax(0, 1fr);
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

body[data-index-type="services"] .service-output-item:last-child{
  border-bottom:0;
}

body[data-index-type="services"] .service-output-item span{
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-index-type="services"] .service-output-item strong{
  display:block;
  color:var(--ink);
  font-size:18px;
  line-height:1.18;
  margin-bottom:5px;
}

body[data-index-type="services"] .service-output-item p{
  line-height:1.5;
}

body[data-index-type="services"] .service-scenario-band{
  padding:24px;
}

body[data-index-type="services"] .service-scenario-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}

body[data-index-type="services"] .service-scenario{
  padding:16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.018);
}

body[data-index-type="services"] .service-scenario strong{
  display:block;
  color:var(--ink);
  font-size:17px;
  line-height:1.2;
  margin-bottom:8px;
}

body[data-index-type="services"] .service-step-grid{
  display:block;
  margin-top:22px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel);
}

body[data-index-type="services"] .service-step-grid::before{
  content:"How this usually works";
  display:block;
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  margin-bottom:8px;
  text-transform:uppercase;
}

body[data-index-type="services"] .service-step{
  display:grid;
  grid-template-columns:54px minmax(0, 1fr);
  gap:16px;
  padding:16px 0;
  border:0;
  border-radius:0;
  border-top:1px solid rgba(255,255,255,.08);
  background:transparent;
  box-shadow:none;
}

body[data-index-type="services"] .service-step span{
  font-size:16px;
}

body[data-index-type="services"] .service-step strong,
body[data-index-type="services"] .service-step p{
  grid-column:2;
}

body[data-index-type="services"] .service-step span{
  grid-row:1 / span 2;
}

body[data-index-type="services"] .service-proof-grid{
  display:block;
  margin-top:18px;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)), var(--panel);
}

body[data-index-type="services"] .service-proof-grid::before{
  content:"Related proof";
  display:block;
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  margin-bottom:4px;
  text-transform:uppercase;
}

body[data-index-type="services"] .service-proof-card{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  gap:10px 14px;
  padding:14px 0;
  border:0;
  border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:transparent;
  box-shadow:none;
}

body[data-index-type="services"] .service-proof-card:last-child{
  border-bottom:0;
}

body[data-index-type="services"] .service-proof-card span{
  grid-row:1 / span 2;
}

body[data-index-type="services"] .service-proof-card strong{
  margin:0;
}

body[data-index-type="services"] .service-next-panel{
  padding:20px 24px;
  border-left:2px solid rgba(234,88,12,.62);
}

body[data-index-type="services"] .service-next-panel .service-proof-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  padding:0;
  border:0;
  background:transparent;
}

body[data-index-type="services"] .service-next-panel .service-proof-grid::before{
  content:none;
}

body[data-index-type="services"] .service-next-panel .service-proof-card{
  display:inline-flex;
  width:auto;
  align-items:center;
  padding:9px 12px;
  border:1px solid rgba(234,88,12,.45);
  border-radius:999px;
  color:var(--accent);
}

body[data-index-type="services"] .service-next-panel .service-proof-card span,
body[data-index-type="services"] .service-next-panel .service-proof-card p{
  display:none;
}

body[data-index-type="services"] .service-next-panel .service-proof-card strong{
  color:var(--accent);
  font-size:14px;
}

@media (max-width:760px){
  body[data-index-type="services"] .service-ready-panel{
    grid-template-columns:1fr;
    padding:20px;
  }

  body[data-index-type="services"] .service-story-block,
  body[data-index-type="services"] .service-workbench,
  body[data-index-type="services"] .service-scenario-list{
    grid-template-columns:1fr;
  }

  body[data-index-type="services"] .service-story-aside,
  body[data-index-type="services"] .service-workbench-intro{
    border-left:0;
    border-right:0;
    border-top:1px solid rgba(255,255,255,.08);
  }

  body[data-index-type="services"] .service-output-item{
    grid-template-columns:1fr;
    gap:7px;
  }

  body[data-index-type="services"] .service-ready-list{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.08);
    padding-left:0;
    padding-top:18px;
  }

  body[data-index-type="services"] .service-detail-grid.service-detail-grid-wide .service-panel + .service-panel{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.08);
  }

  body[data-index-type="services"] .service-step,
  body[data-index-type="services"] .service-proof-card{
    grid-template-columns:1fr;
  }
}

/* Service detail pages: second pass, less spreadsheet and more page */
body[data-index-type="services"] .service-detail-grid.service-detail-grid-wide{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, .92fr);
}

body[data-index-type="services"] .service-ready-panel{
  align-items:start;
}

body[data-index-type="services"] .service-step-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(180px, .35fr) minmax(0, 1fr);
  gap:0 22px;
  padding:24px;
}

body[data-index-type="services"] .service-step-grid::before{
  grid-column:1;
  grid-row:1 / span 4;
  align-self:start;
  margin:0;
}

body[data-index-type="services"] .service-step{
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0, 1fr);
  align-content:start;
  gap:4px 16px;
  min-height:0;
  padding:0 0 22px;
  border:0;
  border-radius:0;
  border-left:1px solid rgba(234,88,12,.32);
  background:transparent;
  box-shadow:none;
}

body[data-index-type="services"] .service-step span,
body[data-index-type="services"] .service-step strong,
body[data-index-type="services"] .service-step p{
  position:relative;
}

body[data-index-type="services"] .service-step span{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin-left:-18px;
  border:1px solid rgba(234,88,12,.65);
  border-radius:999px;
  background:#15171d;
  box-shadow:0 0 0 6px rgba(234,88,12,.08);
  font-size:13px;
  grid-row:1 / span 2;
}

body[data-index-type="services"] .service-step strong{
  align-self:center;
  font-size:18px;
}

body[data-index-type="services"] .service-step p{
  grid-column:2;
  max-width:58ch;
}

body[data-index-type="services"] .service-step:last-child{
  padding-bottom:0;
}

body[data-index-type="services"] .service-proof-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr);
  gap:12px;
  padding:0;
  border:0;
  background:transparent;
}

body[data-index-type="services"] .service-proof-grid::before{
  grid-column:1 / -1;
  margin:0 0 2px;
}

body[data-index-type="services"] .service-proof-card{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  min-height:0;
  padding:16px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 48%),
    var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

body[data-index-type="services"] .service-proof-grid > .service-proof-card:first-of-type{
  grid-row:span 3;
  min-height:220px;
  padding:22px;
  align-content:start;
  background:
    radial-gradient(circle at 88% 18%, rgba(234,88,12,.15), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 48%),
    var(--panel);
}

body[data-index-type="services"] .service-proof-grid > .service-proof-card:first-of-type p{
  margin-top:8px;
}

body[data-index-type="services"] .service-proof-grid > .service-proof-card:not(:first-of-type){
  min-height:0;
}

body[data-index-type="services"] .service-proof-card span{
  grid-row:auto;
}

body[data-index-type="services"] .service-proof-card strong{
  font-size:18px;
}

body[data-index-type="services"] .service-proof-card p{
  margin-top:auto;
}

body[data-index-type="services"] .service-next-panel{
  border-left:0;
  border-top:2px solid rgba(234,88,12,.62);
  background:
    linear-gradient(135deg, rgba(234,88,12,.08), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    var(--panel);
}

body[data-index-type="services"] .service-next-panel .service-proof-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

body[data-index-type="services"] .service-next-panel .service-proof-card{
  display:inline-flex;
  align-items:center;
  min-height:0;
  width:auto;
  padding:9px 12px;
  border-color:rgba(234,88,12,.45);
  border-radius:999px;
  color:var(--accent);
  background:transparent;
}

body[data-index-type="services"] .service-next-panel .service-proof-card span,
body[data-index-type="services"] .service-next-panel .service-proof-card p{
  display:none;
}

body[data-index-type="services"] .service-next-panel .service-proof-card strong{
  color:var(--accent);
  font-size:14px;
}

@media (max-width:980px){
  body[data-index-type="services"] .service-step-grid{
    grid-template-columns:1fr;
  }

  body[data-index-type="services"] .service-step-grid::before{
    grid-column:1;
    grid-row:auto;
    margin-bottom:12px;
  }

  body[data-index-type="services"] .service-proof-grid{
    grid-template-columns:1fr;
  }

  body[data-index-type="services"] .service-proof-grid > .service-proof-card:first-of-type{
    grid-row:auto;
    min-height:0;
  }
}

@media (max-width:620px){
  body[data-index-type="services"] .service-detail-grid.service-detail-grid-wide,
  body[data-index-type="services"] .service-step-grid,
  body[data-index-type="services"] .service-proof-grid,
  body[data-index-type="services"] .service-next-panel .service-proof-grid{
    grid-template-columns:1fr;
  }

  body[data-index-type="services"] .service-step,
  body[data-index-type="services"] .service-proof-card{
    min-height:0;
  }

  body[data-index-type="services"] .service-step{
    grid-template-columns:44px minmax(0, 1fr);
  }
}

@media (max-width:1000px){
  body[data-index-type="services"] .category-section > .wrap{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  body[data-index-type="services"] .service-detail-hero,
  body[data-index-type="services"] .service-detail-grid.service-detail-grid-wide,
  body[data-index-type="services"] .service-ready-panel,
  body[data-index-type="services"] .service-step-grid,
  body[data-index-type="services"] .service-proof-grid,
  body[data-index-type="services"] .service-cta-panel,
  body[data-index-type="services"] .service-next-panel{
    width:100% !important;
    max-width:100% !important;
  }

  body[data-index-type="services"] .service-pill{
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

@media (max-width:700px){
  body[data-index-type="services"],
  body[data-index-type="services"] .index-page,
  body[data-index-type="services"] .service-page-section{
    max-width:100vw;
    overflow-x:hidden;
  }

  body[data-index-type="services"] .service-page-section > .wrap{
    display:block;
    width:100% !important;
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
    overflow:hidden;
  }

  body[data-index-type="services"] .service-detail-hero,
  body[data-index-type="services"] .service-detail-grid.service-detail-grid-wide,
  body[data-index-type="services"] .service-ready-panel,
  body[data-index-type="services"] .service-story-block,
  body[data-index-type="services"] .service-workbench,
  body[data-index-type="services"] .service-scenario-band,
  body[data-index-type="services"] .service-step-grid,
  body[data-index-type="services"] .service-proof-grid,
  body[data-index-type="services"] .service-cta-panel,
  body[data-index-type="services"] .related-section-inline{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body[data-index-type="services"] .service-detail-hero > *,
  body[data-index-type="services"] .service-story-block > *,
  body[data-index-type="services"] .service-workbench > *,
  body[data-index-type="services"] .service-ready-panel > *,
  body[data-index-type="services"] .service-scenario,
  body[data-index-type="services"] .service-output-item,
  body[data-index-type="services"] .service-step,
  body[data-index-type="services"] .service-proof-card{
    min-width:0 !important;
    max-width:100% !important;
  }
}