/* ==========================================================================
   Spider Veins page — scoped under .page-spider so nothing leaks.
   Reuses brand tokens (--blue, --serif, --cyan-50, etc.) and the same
   `.section` / `.container` / `.pill` / `.btn` components used across the
   site — but with a fresh component set so the layout doesn't visually
   duplicate PAD Treatments / Conditions / Cardiology.
   ========================================================================== */

/* ---------- Banner — text left + side image right (same as About Us 519px) */
.page-spider .spider-banner{min-height:519px;display:flex;align-items:center}
.page-spider .spider-banner > .container{width:100%}
.page-spider .spider-banner h1{
	max-width:none;
	display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.page-spider .spider-banner p{max-width:54ch}
.page-spider .spider-banner__media{
	border-radius:var(--radius);overflow:hidden;
	box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
	aspect-ratio:4/3;max-height:380px;width:100%;
}
.page-spider .spider-banner__media img{
	display:block;width:100%;height:100%;object-fit:cover;
}

/* ---------- Centered section header ---------- */
.page-spider .spider-head{
	display:flex;flex-direction:column;align-items:center;text-align:center;
	gap:6px;margin-bottom:34px;max-width:780px;margin-inline:auto;
}
.page-spider .spider-head .pill{margin-bottom:8px}
.page-spider .spider-head__h{
	font-family:var(--serif);font-weight:600;color:var(--ink);
	font-size:clamp(1.6rem,2.4vw,2.15rem);line-height:1.2;letter-spacing:-.005em;
	margin:14px 0 10px;max-width:30ch;
}
.page-spider .spider-head .lead{margin:0 auto;max-width:62ch}

/* ==========================================================================
   WHAT & WHY — editorial 2-col: pill + heading + ghost CTA (left)
                                ·   body paragraph + icon-chip tags (right).
   Mirrors the site's editorial intro pattern but differentiates with the
   small SVG-icon chip tags (no plain pills) so the section feels distinct
   from the PAD / Cardiology Overview blocks.
   ========================================================================== */
.page-spider .spider-what__grid{
	display:grid;grid-template-columns:1fr 1.25fr;gap:72px;align-items:start;
}
.page-spider .spider-what__lead{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.page-spider .spider-what__lead .pill{margin-bottom:14px}
.page-spider .spider-what__h{
	font-family:var(--serif);font-weight:600;color:var(--ink);
	font-size:clamp(1.85rem,3vw,2.5rem);line-height:1.18;letter-spacing:-.01em;
	margin:0 0 28px;max-width:24ch;  /* fits "Tiny vessels, with a few common triggers" in 2 lines */
}
.page-spider .spider-what__cta{padding:12px 22px}
.page-spider .spider-what__cta .ar{
	display:inline-flex;align-items:center;justify-content:center;
	width:22px;height:22px;border-radius:999px;background:var(--cyan-50);
	color:var(--blue);transition:background .15s ease,color .15s ease;
}
.page-spider .spider-what__cta:hover .ar{background:var(--blue);color:#fff}

/* Right column ---------------------------------------------------------- */
.page-spider .spider-what__body{display:flex;flex-direction:column;gap:26px}
.page-spider .spider-what__p{
	margin:0;color:var(--body);font-size:1.02rem;line-height:1.75;max-width:58ch;
}
.page-spider .spider-tags{
	list-style:none;margin:0;padding:0;
	display:flex;flex-wrap:wrap;gap:10px 12px;
}
.page-spider .spider-tag{
	display:inline-flex;align-items:center;gap:10px;
	background:var(--cyan-50);border:1px solid var(--cyan-200);
	color:var(--ink);font-family:var(--sans);font-size:.92rem;font-weight:500;
	padding:10px 16px 10px 12px;border-radius:999px;line-height:1;
	transition:transform .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.page-spider .spider-tag:hover{
	transform:translateY(-1px);border-color:var(--blue);color:var(--blue);
	box-shadow:0 8px 18px -10px rgba(16,40,80,.18);
}
.page-spider .spider-tag__ic{
	display:inline-flex;align-items:center;justify-content:center;
	width:24px;height:24px;border-radius:999px;
	background:#fff;color:var(--blue);
	box-shadow:0 0 0 1px var(--cyan-200);flex:0 0 24px;
}
.page-spider .spider-tag:hover .spider-tag__ic{
	background:var(--blue);color:#fff;box-shadow:0 0 0 1px var(--blue);
}
.page-spider .spider-tag__ic svg{width:13px;height:13px;display:block}

/* ==========================================================================
   TREATMENT OPTIONS — side-by-side comparison cards.
   ========================================================================== */
.page-spider .spider-tx-grid{
	display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px;
}
.page-spider .spider-tx{
	background:#fff;border:1px solid var(--cyan-200);border-radius:var(--radius);
	padding:32px 30px;display:flex;flex-direction:column;gap:18px;
	box-shadow:0 12px 28px -22px rgba(16,40,80,.18);
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.page-spider .spider-tx:hover{
	transform:translateY(-3px);border-color:var(--blue);
	box-shadow:0 22px 40px -22px rgba(16,40,80,.25);
}
.page-spider .spider-tx__head{display:flex;align-items:center;gap:16px}
.page-spider .spider-tx__ic{
	flex:0 0 56px;width:56px;height:56px;border-radius:14px;
	display:inline-flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,var(--cyan-50) 0%,var(--cyan-100) 100%);
	color:var(--blue);
}
.page-spider .spider-tx__ic svg{width:30px;height:30px;display:block}
.page-spider .spider-tx__badge{
	display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;
	letter-spacing:.10em;text-transform:uppercase;color:var(--blue);
	background:var(--cyan-50);padding:.4em .9em;border-radius:999px;
}
.page-spider .spider-tx__name{
	font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--ink);
	margin:6px 0 0;line-height:1.25;
}
.page-spider .spider-tx__lead{
	margin:0;color:var(--body);font-size:.95rem;line-height:1.6;
}
.page-spider .spider-tx__rows{margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.page-spider .spider-tx__row{
	display:grid;grid-template-columns:9rem 1fr;gap:18px;
	padding:14px 0;border-top:1px solid var(--cyan-200);
}
.page-spider .spider-tx__row:first-child{border-top:0}
.page-spider .spider-tx__row dt{
	font-family:var(--sans);font-size:.78rem;font-weight:600;
	letter-spacing:.06em;text-transform:uppercase;color:var(--body);
	margin:0;align-self:start;padding-top:2px;
}
.page-spider .spider-tx__row dd{
	margin:0;color:var(--ink);font-family:var(--sans);font-size:.93rem;
	line-height:1.5;font-weight:500;
}

/* ==========================================================================
   YOUR VISIT — 5-step card grid (DVC Treatment-Process pattern).
   Each card: white surface + cyan-200 border, rounded-square icon tile
   (gradient cyan-50→cyan-100, brand-blue glyph) top-left, uppercase
   "Step 01" pill badge top-right, serif H3, body paragraph.
   Section bg is cyan-soft (set via `.section--cyan-soft` on the section).
   ========================================================================== */
.page-spider .spider-steps{
	list-style:none;margin:40px 0 0;padding:0;
	display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.page-spider .spider-step{
	position:relative;background:#fff;border:1px solid var(--cyan-200);border-radius:var(--radius);
	padding:28px 24px 26px;display:flex;flex-direction:column;gap:12px;
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.page-spider .spider-step:hover{
	transform:translateY(-3px);border-color:var(--blue);
	box-shadow:0 18px 36px -22px rgba(16,40,80,.22);
}
.page-spider .spider-step__head{
	display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;
}
.page-spider .spider-step__ic{
	flex:0 0 56px;width:56px;height:56px;border-radius:14px;
	background:linear-gradient(135deg,var(--cyan-50) 0%,var(--cyan-100) 100%);
	color:var(--blue);display:inline-flex;align-items:center;justify-content:center;
}
.page-spider .spider-step__ic svg{width:30px;height:30px;display:block}
.page-spider .spider-step__num{
	font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--blue);background:#fff;
	border:1px solid var(--cyan-200);border-radius:999px;padding:5px 12px;
	line-height:1;white-space:nowrap;
}
.page-spider .spider-step__h{
	font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);
	margin:6px 0 4px;line-height:1.25;
}
.page-spider .spider-step__p{
	margin:0;color:var(--body);font-size:.92rem;line-height:1.6;
	display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ==========================================================================
   RESULTS TIMELINE — 3 stage cards with a brand-blue progress bar.
   ========================================================================== */
.page-spider .spider-results{
	display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;
}
.page-spider .spider-result{
	background:#fff;border:1px solid var(--cyan-200);border-radius:var(--radius);
	padding:26px 26px 22px;display:flex;flex-direction:column;gap:8px;
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.page-spider .spider-result:hover{
	transform:translateY(-3px);border-color:var(--blue);
	box-shadow:0 18px 36px -22px rgba(16,40,80,.22);
}
.page-spider .spider-result__when{
	font-family:var(--sans);font-size:.78rem;font-weight:600;
	letter-spacing:.08em;text-transform:uppercase;color:var(--blue);
}
.page-spider .spider-result__h{
	font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--ink);
	margin:2px 0 4px;line-height:1.25;
}
.page-spider .spider-result__p{
	margin:0 0 14px;color:var(--body);font-size:.93rem;line-height:1.55;
}
.page-spider .spider-result__bar{
	display:block;height:6px;background:var(--cyan-100);border-radius:999px;
	overflow:hidden;margin-top:auto;
}
.page-spider .spider-result__bar i{
	display:block;height:100%;background:var(--blue);border-radius:999px;
	transition:width .4s ease;
}

/* ==========================================================================
   BEFORE & AFTER — full-width brand-blue panel + horizontal scroll-snap
   slider on the right. LEFT: serif headline (white) + body + light CTA.
   RIGHT: track of "split" cards (each card is two stacked halves with
   BEFORE / AFTER pill labels at the top). Prev/next arrow buttons live
   over the bottom-left of the stage area.
   ========================================================================== */
.page-spider .spider-ba{
	background:#0059A6;color:#fff;border-radius:24px;
	padding:56px 56px 60px;
	display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;
	box-shadow:0 30px 60px -30px rgba(6,46,90,.45);overflow:hidden;
}
.page-spider .spider-ba__lead{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.page-spider .spider-ba__h{
	font-family:var(--serif);font-weight:600;color:#fff;
	font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1.18;letter-spacing:-.01em;
	margin:0 0 16px;max-width:18ch;
}
.page-spider .spider-ba__p{
	margin:0 0 26px;color:rgba(255,255,255,.86);font-size:1rem;line-height:1.65;max-width:46ch;
}
.page-spider .spider-ba__cta{
	display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
	background:#fff;color:#0059A6;
	font-family:var(--sans);font-weight:600;font-size:.95rem;
	padding:12px 22px;border-radius:999px;line-height:1;
	transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
	box-shadow:0 12px 24px -10px rgba(0,0,0,.30);
}
.page-spider .spider-ba__cta:hover{
	background:#e9f2fb;color:#0059A6;transform:translateY(-1px);
	box-shadow:0 16px 28px -10px rgba(0,0,0,.35);
}

/* Slider stage on the right --------------------------------------------- */
.page-spider .spider-ba__stage{position:relative;min-width:0}
.page-spider .spider-ba__track{
	display:flex;gap:28px;  /* clear separation between case pairs */
	overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x mandatory;scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	padding:4px 4px 8px;margin:-4px -4px -8px;
	scrollbar-width:none;
}
.page-spider .spider-ba__track::-webkit-scrollbar{display:none}
.page-spider .spider-ba__track:focus-visible{
	outline:2px solid #fff;outline-offset:3px;border-radius:14px;
}
/* A "card" = one before/after pair. Halves butt up edge-to-edge with a
   single hairline white divider so the pair reads as ONE unit, while the
   28px track gap clearly separates pair-to-pair. */
.page-spider .spider-ba__card{
	flex:0 0 calc((100% - 28px * 2) / 2.5);  /* shows ~2.5 cards on desktop */
	scroll-snap-align:start;
	display:grid;grid-template-columns:1fr 1fr;gap:0;
	border-radius:14px;overflow:hidden;background:#fff;
	box-shadow:0 10px 24px -12px rgba(0,0,0,.35);
}
.page-spider .spider-ba__half{
	position:relative;margin:0;overflow:hidden;background:#1a4f8a;
	aspect-ratio:1/1.5;
}
.page-spider .spider-ba__half + .spider-ba__half{
	box-shadow:inset 2px 0 0 #fff;  /* hairline divider between before/after */
}
.page-spider .spider-ba__half img{
	display:block;width:100%;height:100%;object-fit:cover;object-position:center;
}
.page-spider .spider-ba__tag{
	position:absolute;left:10px;top:10px;
	background:#fff;color:#1c2f4a;
	font-family:var(--sans);font-size:.65rem;font-weight:700;letter-spacing:.10em;
	text-transform:uppercase;line-height:1;
	padding:5px 10px;border-radius:999px;
	box-shadow:0 6px 14px -8px rgba(0,0,0,.4);
}
/* Arrow controls (over the slider area) */
.page-spider .spider-ba__nav{
	position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
	display:flex;justify-content:space-between;pointer-events:none;
	padding:0 -20px;
}
.page-spider .spider-ba__arrow{
	pointer-events:auto;cursor:pointer;
	width:44px;height:44px;border-radius:999px;
	display:inline-flex;align-items:center;justify-content:center;
	background:#fff;color:#0059A6;border:0;
	box-shadow:0 12px 24px -8px rgba(0,0,0,.35);
	transition:background .15s ease,transform .15s ease,opacity .15s ease;
	margin:0 -22px; /* nudge slightly off the card edge */
}
.page-spider .spider-ba__arrow svg{width:18px;height:18px;display:block}
.page-spider .spider-ba__arrow:hover:not(:disabled){
	background:#e9f2fb;transform:translateY(-1px);
}
.page-spider .spider-ba__arrow:active:not(:disabled){transform:translateY(0)}
.page-spider .spider-ba__arrow:disabled{opacity:.35;cursor:not-allowed}
.page-spider .spider-ba__arrow:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ==========================================================================
   CANDIDATE CHECK — 2-column chip list inside a soft rounded panel.
   ========================================================================== */
.page-spider .spider-cand{
	background:var(--cyan-50);border:1px solid var(--cyan-200);
	border-radius:var(--radius);padding:48px;
}
.page-spider .spider-cand__head{text-align:center;margin-bottom:26px;max-width:680px;margin-inline:auto}
.page-spider .spider-cand__head .pill{margin-bottom:14px}
.page-spider .spider-cand__list{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;
}
.page-spider .spider-cand__item{
	display:flex;align-items:center;gap:14px;
	background:#fff;border:1px solid var(--cyan-200);
	border-radius:14px;padding:14px 18px;
	color:var(--ink);font-family:var(--sans);font-size:.95rem;
	line-height:1.4;
	transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.page-spider .spider-cand__item:hover{
	transform:translateY(-1px);border-color:var(--blue);
	box-shadow:0 8px 18px -10px rgba(16,40,80,.18);
}
.page-spider .spider-cand__ic{
	flex:0 0 26px;width:26px;height:26px;border-radius:999px;
	display:inline-flex;align-items:center;justify-content:center;
	color:#fff;background:var(--blue);
	box-shadow:0 0 0 3px rgba(4,100,203,.10);
}
.page-spider .spider-cand__ic svg{width:13px;height:13px;display:block}

/* ==========================================================================
   PRICING TRANSPARENCY — single rounded card with definition rows.
   ========================================================================== */
.page-spider .spider-price{
	margin:8px 0 0;padding:0;
	background:#fff;border:1px solid var(--cyan-200);border-radius:var(--radius);
	box-shadow:0 12px 28px -22px rgba(16,40,80,.18);
}
.page-spider .spider-price__row{
	display:grid;grid-template-columns:14rem 1fr;gap:24px;
	padding:22px 32px;border-top:1px solid var(--cyan-200);
	align-items:start;
}
.page-spider .spider-price__row:first-child{border-top:0}
.page-spider .spider-price__row dt{
	font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink);
	margin:0;
}
.page-spider .spider-price__row dd{
	margin:0;color:var(--body);font-size:.95rem;line-height:1.6;
}
.page-spider .spider-price__note{
	margin:18px auto 0;color:var(--body);font-size:.85rem;line-height:1.55;
	max-width:60ch;text-align:center;
}

/* ==========================================================================
   CTA — boxed navy panel (matches About Us / PAD pattern).
   ========================================================================== */
.page-spider .spider-cta{
	background:#0059A6;color:#fff;border-radius:24px;padding:60px 64px;text-align:center;
	box-shadow:0 30px 60px -30px rgba(6,46,90,.45);
}
.page-spider .spider-cta .pill{background:rgba(255,255,255,.14);color:#fff;border-color:transparent}
.page-spider .spider-cta h2{color:#fff;margin:0 0 14px;max-width:24ch;margin-inline:auto}
.page-spider .spider-cta .lead{color:rgba(255,255,255,.92);max-width:62ch;margin:0 auto 30px}
.page-spider .spider-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.page-spider .spider-cta__ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.page-spider .spider-cta__ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.page-spider .spider-cta__meta{margin:24px 0 0;font-size:.82rem;color:rgba(255,255,255,.75)}

/* ==========================================================================
   FAQ — split layout (heading left, accordion right) — mirrors PAD/Cardiology.
   ========================================================================== */
.page-spider .spider-faqwrap{display:grid;grid-template-columns:.95fr 1.2fr;gap:48px;align-items:start}
.page-spider .spider-faqhead h2{margin-top:0}
.page-spider .spider-faqhead .lead{max-width:38ch}
.page-spider .spider-faqlist{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.page-spider .spider-faq{
	background:#fff;border:1px solid var(--cyan-200);border-radius:14px;
	padding:6px 6px;transition:border-color .15s ease,box-shadow .15s ease;
}
.page-spider .spider-faq[open]{border-color:var(--blue);box-shadow:0 12px 28px -22px rgba(16,40,80,.20)}
.page-spider .spider-faq summary{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:16px 18px;cursor:pointer;list-style:none;
	font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--ink);
	line-height:1.35;
}
.page-spider .spider-faq summary::-webkit-details-marker{display:none}
.page-spider .spider-faq__ic{
	flex:0 0 28px;width:28px;height:28px;border-radius:999px;
	background:var(--cyan-50);border:1px solid var(--cyan-200);position:relative;
	transition:background .15s ease,border-color .15s ease,transform .2s ease;
}
.page-spider .spider-faq__ic::before,
.page-spider .spider-faq__ic::after{
	content:"";position:absolute;background:var(--blue);left:50%;top:50%;transform:translate(-50%,-50%);
}
.page-spider .spider-faq__ic::before{width:12px;height:2px}
.page-spider .spider-faq__ic::after{width:2px;height:12px;transition:transform .2s ease}
.page-spider .spider-faq[open] .spider-faq__ic{background:var(--blue);border-color:var(--blue)}
.page-spider .spider-faq[open] .spider-faq__ic::before{background:#fff}
.page-spider .spider-faq[open] .spider-faq__ic::after{background:#fff;transform:translate(-50%,-50%) scaleY(0)}
.page-spider .spider-faq__body{padding:0 18px 16px;color:var(--body);line-height:1.65;font-size:.95rem}
.page-spider .spider-faq__body p{margin:0}

/* ==========================================================================
   Responsive ---------------------------------------------------------------
   ========================================================================== */
@media (max-width:1180px){
	.page-spider .spider-faqwrap{grid-template-columns:1fr;gap:30px}
}
@media (max-width:980px){
	.page-spider .spider-what__grid{grid-template-columns:1fr;gap:34px}
	.page-spider .spider-what__visual svg{max-width:300px}
	.page-spider .spider-tx-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
	.page-spider .spider-steps{grid-template-columns:repeat(2,1fr);gap:18px}
	.page-spider .spider-ba{grid-template-columns:1fr;gap:30px;padding:40px 32px 44px}
	.page-spider .spider-ba__card{flex-basis:calc((100% - 28px) / 1.5)}
	.page-spider .spider-ba__arrow{margin:0}
	.page-spider .spider-results{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
	.page-spider .spider-cand__list{grid-template-columns:1fr}
	.page-spider .spider-cand{padding:34px 24px}
	.page-spider .spider-price__row{grid-template-columns:1fr;gap:6px;padding:18px 24px}
	.page-spider .spider-cta{padding:48px 32px}
}
@media (max-width:560px){
	.page-spider .spider-steps{grid-template-columns:1fr;max-width:520px;margin-inline:auto;gap:16px}
	.page-spider .spider-step{padding:22px 20px}
	.page-spider .spider-tx{padding:26px 24px}
	.page-spider .spider-tx__row{grid-template-columns:1fr;gap:2px;padding:12px 0}
	.page-spider .spider-cta{padding:40px 24px;border-radius:18px}
	.page-spider .spider-cta h2{font-size:clamp(1.6rem,5vw,2rem)}
	.page-spider .spider-cta__btns .btn{width:100%;justify-content:center}
}