/* Isolated component styles for the Carbon Rigging redesign.
   `.pc-iso` scope + #top prefix outrank the Enfold theme's #top rules. */

#top .pc-iso, #top .pc-iso * {
	margin:0; padding:0; border:0; background:none; box-shadow:none;
	font:inherit; color:inherit; letter-spacing:normal; text-transform:none;
	line-height:normal; text-align:left; list-style:none; box-sizing:border-box;
	float:none; text-decoration:none; outline:none;
}
#top .pc-iso {
	font-family:Arial,Helvetica,"Helvetica Neue",sans-serif;
	color:#353A3F; font-size:15px; -webkit-font-smoothing:antialiased;
	--accent:#EC5A24; --ink:#2c3034; --muted:#5c636a; --muted2:#6a7178; --label:#6e757c; --line:#d9dde1;
}
#top .pc-iso img { max-width:100%; height:auto; display:block; }
#top .pc-iso a { cursor:pointer; }

#top .pc-page { max-width:1228px; margin:0 auto; padding:20px 24px 40px; }
#top .pc-sec { margin:0 0 60px; }

/* Section label with trailing rule */
#top .pc-iso .pc-eyebrow { display:flex; align-items:center; text-transform:uppercase; color:var(--label); font-weight:600; font-size:19px; letter-spacing:2.47px; margin:0 0 22px; }
#top .pc-iso .pc-eyebrow::after { content:''; flex:1; height:1px; background:rgb(199,205,210); margin-left:20px; }
#top .pc-iso .pc-eyebrow-lg { font-size:30px; letter-spacing:3.9px; margin-bottom:30px; }

/* Hero */
#top .pc-iso .pc-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
#top .pc-iso .pc-hero-text h1 { font-size:40px; line-height:44px; letter-spacing:-.4px; font-weight:700; color:var(--ink); margin:0 0 18px; }
#top .pc-iso .pc-hero-text p { font-size:15px; line-height:25.5px; color:var(--muted); margin:0 0 16px; }
#top .pc-iso .pc-hero-text p:last-child { margin-bottom:0; }
/* Perspective on the outer wrapper, 3D tilt + preserve-3d on the inner box,
   oversized absolutely-positioned img (inset:-15%) so mouse-drift never shows an edge. */
#top .pc-iso .pc-hero-img-wrap { position:relative; perspective:1100px; }
#top .pc-iso .pc-hero-img { position:relative; overflow:hidden; aspect-ratio:4/5; background:rgb(234,238,244); transform-style:preserve-3d; }
#top .pc-iso .pc-hero-img img { position:absolute; inset:-15%; width:130%; height:130%; object-fit:cover; }

#top .pc-iso .pc-video { background:#000; position:relative; aspect-ratio:16/9; overflow:hidden; }
#top .pc-iso .pc-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Feature cards */
#top .pc-iso .pc-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
#top .pc-iso .pc-card { background:#fff; padding:24px; }
#top .pc-iso .pc-card h4 { font-size:15px; line-height:19.5px; font-weight:700; color:var(--ink); margin:0 0 8px; }
#top .pc-iso .pc-card p { font-size:13px; line-height:20.8px; color:var(--muted2); }

/* Spec stats: white bar, 3 columns, dividers */
#top .pc-iso .pc-stats { display:grid; grid-template-columns:repeat(3,1fr); background:#fff; }
#top .pc-iso .pc-stat { padding:34px 30px; border-right:1px solid rgb(231,235,238); }
#top .pc-iso .pc-stat:last-child { border-right:0; }
#top .pc-iso .pc-num { display:block; font-size:clamp(30px,3.6vw,46px); line-height:1; font-weight:700; color:var(--accent); }
#top .pc-iso .pc-stat p { margin:10px 0 0; font-size:13px; line-height:1.5; font-weight:600; color:var(--ink); }
#top .pc-iso .pc-stat p span { font-weight:400; color:var(--muted2); }

/* Galleries: own grid, fixed-ratio cells */
#top .pc-iso .pc-gal { display:grid; grid-template-columns:repeat(3,1fr); }
#top .pc-iso .pc-gal.dark { gap:14px; }
#top .pc-iso .pc-gal.light { gap:12px; }
#top .pc-iso .pc-gal .cell { aspect-ratio:4/3; overflow:hidden; }
#top .pc-iso .pc-gal.light .cell { aspect-ratio:3/4; }
#top .pc-iso .pc-gal.dark .cell { background:rgb(14,16,18); }
#top .pc-iso .pc-gal.light .cell { background:rgb(234,238,244); }
#top .pc-iso .pc-gal img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
#top .pc-iso .pc-gal .cell:hover img { transform:scale(1.05); }

/* Retrofit CTA: dark gradient + orange diagonal stripes */
#top .pc-iso .pc-cta-dark { position:relative; overflow:hidden; background:linear-gradient(135deg,rgb(22,25,27),rgb(38,41,44)); padding:48px 44px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; }
#top .pc-iso .pc-cta-dark::before { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg,rgba(236,90,36,.06) 0,rgba(236,90,36,.06) 1px,transparent 1px,transparent 11px); pointer-events:none; }
#top .pc-iso .pc-cta-eyebrow { text-transform:uppercase; letter-spacing:2.5px; font-size:12px; font-weight:700; color:var(--accent); margin:0 0 10px; }
#top .pc-iso .pc-cta-dark h2 { font-size:28px; line-height:34px; font-weight:700; color:#fff; margin:0 0 8px; }
#top .pc-iso .pc-cta-dark p { font-size:14px; line-height:22px; color:#c7ccd1; max-width:560px; }
#top .pc-iso .pc-cta-dark .pc-btn { position:relative; white-space:nowrap; }

/* Buttons */
#top .pc-iso .pc-btn { display:inline-block; background:var(--accent); color:#fff; font-size:15px; font-weight:600; padding:15px 30px; }
#top .pc-iso .pc-btn:hover { background:#d64d1c; }
#top .pc-iso .pc-btn.ghost { background:none; border:1px solid var(--accent); color:var(--accent); }
#top .pc-iso .pc-btn.ghost:hover { background:var(--accent); color:#fff; }

/* What is next */
#top .pc-iso .pc-fork-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
#top .pc-iso .pc-fork { background:#fff; padding:30px 28px; border-left:3px solid var(--accent); }
#top .pc-iso .pc-fork h3 { font-size:18px; line-height:1.3; font-weight:700; color:var(--ink); margin:0 0 8px; }
#top .pc-iso .pc-fork p { font-size:13.5px; line-height:25.6px; color:var(--muted2); margin:0 0 18px; }
#top .pc-iso .pc-fork .pc-btn { padding:13px 20px; font-size:13px; }

/* Right card: video thumb + text, flex row */
#top .pc-iso .pc-fork-media { padding:22px; border-left:3px solid rgb(185,192,198); display:flex; gap:22px; align-items:center; }
#top .pc-iso .pc-fork-media p { margin-bottom:16px; }
#top .pc-iso .pc-3d-thumb { flex:0 0 130px; position:relative; aspect-ratio:3/4; background:rgb(234,238,244); overflow:hidden; }
#top .pc-iso .pc-3d-thumb video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.3); }
#top .pc-iso .pc-3d-thumb .badge { position:absolute; right:8px; bottom:8px; font-size:9px; font-weight:600; letter-spacing:.16em; color:#aab0b6; text-transform:uppercase; }
#top .pc-iso .pc-fork-media .pc-btn.ghost { border-color:rgb(185,192,198); color:var(--ink); padding:12px 18px; }
@media (max-width:560px){ #top .pc-iso .pc-fork-media { flex-direction:column; align-items:flex-start; } #top .pc-iso .pc-3d-thumb { flex-basis:auto; width:100%; aspect-ratio:16/10; } }

/* Refs grid (overlay caption) */
#top .pc-iso .pc-refs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
#top .pc-iso .pc-ref { position:relative; aspect-ratio:1/1; overflow:hidden; background:rgb(234,238,244); }
#top .pc-iso .pc-ref img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
#top .pc-iso .pc-ref:hover img { transform:scale(1.05); }
#top .pc-iso .pc-ref .cap { position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(to top,rgba(0,0,0,.55),transparent 60%); color:#fff; }
#top .pc-iso .pc-ref .cap b { display:block; font-size:16px; font-weight:600; }
#top .pc-iso .pc-ref .cap i { font-style:normal; font-size:12px; opacity:.85; }

/* Reveal + parallax */
#top .pc-iso .reveal, #top .pc-iso .reveal-r, #top .pc-iso .reveal-l { opacity:0; }
#top .pc-iso .reveal.in   { animation:pcRevUp    .7s cubic-bezier(.16,1,.3,1) forwards; }
#top .pc-iso .reveal-r.in { animation:pcRevRight .7s cubic-bezier(.16,1,.3,1) forwards; }
#top .pc-iso .reveal-l.in { animation:pcRevLeft  .7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes pcRevUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes pcRevRight { from{opacity:0;transform:translateX(26px)} to{opacity:1;transform:none} }
@keyframes pcRevLeft  { from{opacity:0;transform:translateX(-26px)} to{opacity:1;transform:none} }
#top .pc-iso .pc-float { transition:transform .3s ease-out; will-change:transform; }
@media (prefers-reduced-motion:reduce){ #top .pc-iso .reveal,#top .pc-iso .reveal-r,#top .pc-iso .reveal-l{opacity:1!important;animation:none!important;} }

/* --- Mast References page --- */

/* Hero (monospace eyebrow variant, used only on this page) */
#top .pc-iso .pc-mr-eyebrow { display:inline-block; font:700 11px/1 ui-monospace,monospace; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; margin-bottom:14px; }
#top .pc-iso .pc-mr-hero h1 { font-size:clamp(30px,4vw,46px); line-height:1.06; font-weight:700; letter-spacing:-.01em; color:var(--ink); max-width:22ch; margin:0 0 16px; }
#top .pc-iso .pc-mr-hero p { font-size:16px; line-height:1.7; color:var(--muted); max-width:64ch; margin:0; }

/* "Choose your range" bento grid: one tall featured card + 4 regular cards */
#top .pc-iso .pc-mr-cards { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:auto auto; gap:14px; }
#top .pc-iso .pc-mr-card { position:relative; overflow:hidden; background:rgb(14,16,18); min-height:173px; }
#top .pc-iso .pc-mr-card.featured { grid-row:span 2; min-height:360px; }
#top .pc-iso .pc-mr-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
#top .pc-iso .pc-mr-card:hover img { transform:scale(1.05); }
#top .pc-iso .pc-mr-card::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 52%); }
#top .pc-iso .pc-mr-card .txt { position:absolute; left:20px; right:20px; bottom:18px; z-index:1; }
#top .pc-iso .pc-mr-card .size { margin:0 0 5px; font-size:30px; line-height:1; font-weight:800; letter-spacing:-.01em; color:#fff; }
#top .pc-iso .pc-mr-card .size small { font-size:15px; font-weight:700; color:#d4d8dc; }
#top .pc-iso .pc-mr-card .go { margin:0; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--accent); }

/* 3D mast-profile CTA: video thumb + text + button stack */
#top .pc-iso .pc-mr-3d { background:#fff; padding:32px 34px; display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center; }
#top .pc-iso .pc-mr-3d .pc-3d-thumb { width:150px; flex:none; }
#top .pc-iso .pc-mr-3d h2 { margin:12px 0; font-size:clamp(22px,2.8vw,32px); line-height:1.1; font-weight:700; color:var(--ink); }
#top .pc-iso .pc-mr-3d p { margin:0; font-size:14px; line-height:1.6; color:var(--muted); max-width:50ch; }
#top .pc-iso .pc-mr-btns { display:flex; flex-direction:column; gap:10px; min-width:230px; }
#top .pc-iso .pc-mr-btns .pc-btn { text-align:center; white-space:nowrap; padding:17px 26px; }
#top .pc-iso .pc-mr-btns .pc-btn.ghost { padding:16px 26px; border-color:rgb(185,192,198); color:var(--ink); }
#top .pc-iso .pc-mr-btns .pc-btn.link { background:none; color:#8a9097; font-weight:600; font-size:13px; padding:4px 6px; }

@media (max-width:782px){
	#top .pc-iso .pc-mr-cards { grid-template-columns:1fr; }
	#top .pc-iso .pc-mr-card.featured { grid-column:auto; min-height:260px; }
	#top .pc-iso .pc-mr-3d { grid-template-columns:1fr; text-align:center; }
	#top .pc-iso .pc-mr-3d .pc-3d-thumb { margin:0 auto; }
}

/* --- Reference subpage template (shared by all 5 size-range pages) --- */
#top .pc-iso .pc-rs-hero h1 { font-size:clamp(24px,3.4vw,38px); line-height:1.08; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#4a5157; margin:0 0 14px; }
#top .pc-iso .pc-rs-hero p { font-size:15px; line-height:1.7; color:var(--muted); max-width:70ch; margin:0 0 20px; }
#top .pc-iso .pc-rs-btns { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
/* exact mockup values for this specific CTA row (kept separate from the shared .pc-btn used elsewhere) */
#top .pc-iso .pc-rs-btns .pc-btn { font:700 13px/1 Arial; padding:14px 22px; }
#top .pc-iso .pc-rs-btns .pc-btn.link { display:inline-flex; background:none; color:#6a7178; font:600 13px/1 Arial; padding:6px 4px; }

/* Tab-bar: real links between the 5 size-range pages (page navigation, not JS toggling) */
#top .pc-iso .pc-rs-tabs { display:flex; gap:4px; flex-wrap:wrap; align-items:center; border-bottom:1px solid rgb(199,205,210); margin:0 0 30px; }
#top .pc-iso .pc-rs-tab { position:relative; font:700 13px/1 Arial; letter-spacing:.02em; color:var(--ink); padding:12px 16px; }
#top .pc-iso .pc-rs-tab.active::after { content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--accent); }

/* Rig-photo gallery: 5-cell bento (1 featured + 4) + a plain 3-col row below, no captions */
#top .pc-iso .pc-rig-bento { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:auto auto; gap:14px; }
#top .pc-iso .pc-rig-row2 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
#top .pc-iso .pc-rig-cell { position:relative; overflow:hidden; background:rgb(14,16,18); min-height:173px; }
#top .pc-iso .pc-rig-cell.featured { grid-row:span 2; min-height:360px; }
#top .pc-iso .pc-rig-row2 .pc-rig-cell { min-height:0; aspect-ratio:3/2; }
#top .pc-iso .pc-rig-cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; cursor:zoom-in; }

/* Load-more: images arrive in chunks (matches the original gallery's 12-per-page behaviour),
   each chunk fades in after a short simulated loading delay; the button hides once exhausted */
#top .pc-iso .pc-rig-chunk { display:none; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; opacity:0; transition:opacity .45s ease; }
#top .pc-iso .pc-rig-chunk.shown { display:grid; }
#top .pc-iso .pc-rig-chunk.shown.in { opacity:1; }
#top .pc-iso .pc-load-more { display:flex; align-items:center; justify-content:center; gap:8px; width:fit-content; margin:18px auto 0; background:none; border:1px solid #e3c3b3; color:var(--accent); font:700 12px/1 Arial; letter-spacing:.08em; text-transform:uppercase; padding:12px 20px; cursor:pointer; }
#top .pc-iso .pc-load-more.is-hidden { display:none; }
#top .pc-iso .pc-load-more .pc-label { text-transform:uppercase; }
#top .pc-iso .pc-load-more .pc-spin { display:none; width:14px; height:14px; border-radius:50%; background:var(--accent); animation:pc-pulse .8s ease-in-out infinite; }
#top .pc-iso .pc-load-more.is-loading { opacity:.85; cursor:default; }
#top .pc-iso .pc-load-more.is-loading .pc-spin { display:inline-block; }
@keyframes pc-pulse { 0%,100% { opacity:.3; transform:scale(.7); } 50% { opacity:1; transform:scale(1); } }

/* Lightbox gallery viewer: click any rig-photo to browse the full set with prev/next
   (the original masonry gallery had this too). Attached directly to <body> (not .pc-iso)
   with a maximum z-index, so it always paints above the theme's fixed header regardless
   of any stacking-context the page's own wrappers might create. Fully self-contained CSS
   since it lives outside the .pc-iso reset scope. */
.pc-lightbox, .pc-lightbox * { box-sizing:border-box; margin:0; padding:0; border:0; }
.pc-lightbox { position:fixed; inset:0; background:rgba(10,11,12,.92); display:none; align-items:center; justify-content:center; z-index:2147483647; padding:40px; }
.pc-lightbox.open { display:flex; }
.pc-lightbox img { max-width:92vw; max-height:88vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:default; display:block; }
.pc-lightbox button { font-family:Arial,Helvetica,sans-serif; }
.pc-lightbox-close { position:absolute; top:24px; right:28px; width:40px; height:40px; border:1px solid rgba(255,255,255,.3); background:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.pc-lightbox-prev, .pc-lightbox-next { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border:1px solid rgba(255,255,255,.3); background:none; color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pc-lightbox-prev { left:16px; }
.pc-lightbox-next { right:16px; }
.pc-lightbox-count { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font:400 13px/1 Arial; }
@media (max-width:600px){
	.pc-lightbox { padding:16px; }
	.pc-lightbox-prev, .pc-lightbox-next { width:38px; height:38px; font-size:20px; }
	.pc-lightbox-prev { left:6px; }
	.pc-lightbox-next { right:6px; }
}

@media (max-width:782px){
	#top .pc-iso .pc-rig-bento, #top .pc-iso .pc-rig-row2, #top .pc-iso .pc-rig-chunk { grid-template-columns:1fr; }
	#top .pc-iso .pc-rig-cell.featured { grid-row:auto; min-height:220px; }
}

/* Testimonial card */
#top .pc-iso .pc-testimonial { background:#fff; border-left:3px solid var(--accent); padding:34px 36px; }
#top .pc-iso .pc-testimonial p.quote { font-size:17px; line-height:1.65; color:#3a4045; max-width:74ch; margin:0 0 16px; }
#top .pc-iso .pc-testimonial p.attr { font-size:13px; font-weight:700; color:var(--ink); margin:0; }
/* only .role is de-emphasised/orange — the name (not given this class) keeps the bold/ink base style */
#top .pc-iso .pc-testimonial p.attr .role { font-weight:400; color:var(--accent); }

/* Boats grid: same overlay-caption card as Carbon Rigging refs, 4:3 here */
#top .pc-iso .pc-refs.ratio43 .pc-ref { aspect-ratio:4/3; }

@media (max-width:782px){
	#top .pc-iso .pc-rs-hero h1 { font-size:26px; }
}

/* Admin content-source area (.pc-source): a plain, WYSIWYG-editable zone that
   pc-bridge.js copies into the locked .pc-iso layout, then hides via JS (so it
   still shows as a safe fallback if JS fails). Independent of .pc-iso reset. */
#top .pc-source { max-width:900px; margin:0 auto 40px; padding:20px 24px; background:#fffbea; border:1px solid #e8d98a; font-family:Arial,Helvetica,sans-serif; }
#top .pc-source p { margin:0 0 16px; font-size:13px; line-height:1.6; color:#6b5a1a; }
#top .pc-src-h { margin:24px 0 10px; font-size:15px; font-weight:700; color:#2c3034; border-top:1px solid #e8d98a; padding-top:16px; }
#top .pc-src-h:first-of-type { border-top:0; margin-top:8px; padding-top:0; }
#top .pc-field-row { margin:0 0 12px; }
#top .pc-field-row small { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#9a8a3a; margin-bottom:3px; }
#top .pc-field-row div, #top .pc-field-row img { font-size:14px; color:#2c3034; }

/* Responsive — single breakpoint at 782px (Avia/Enfold's own "medium" cutoff,
   confirmed against the plan: it jumps straight from 3/2 columns to 1, no
   intermediate 2-column stage). */
@media (max-width:782px){
	#top .pc-iso .pc-hero-grid, #top .pc-iso .pc-fork-grid { grid-template-columns:1fr; gap:28px; }
	#top .pc-iso .pc-grid3, #top .pc-iso .pc-stats, #top .pc-iso .pc-gal, #top .pc-iso .pc-refs { grid-template-columns:1fr; }
	#top .pc-iso .pc-cta-dark { grid-template-columns:1fr; }
	#top .pc-iso .pc-stat { border-right:0; border-top:1px solid rgb(231,235,238); }
	#top .pc-iso .pc-stat:first-child { border-top:0; }
	#top .pc-iso .pc-hero-text h1 { font-size:30px; line-height:1.15; }
	#top .pc-iso .pc-eyebrow-lg { font-size:22px; }
}