/* ==========================================================================
   Alpaca Fiber Hub
   ========================================================================== */

:root{
  --fiber-ink:#24211d;
  --fiber-copy:#5e5952;
  --fiber-muted:#8a837a;
  --fiber-rule:#d8d2c8;
  --fiber-canvas:#ffffff;
  --fiber-soft:#f7f4ed;
  --fiber-deep:#173f47;
  --fiber-accent:#1f5c6b;
  --fiber-accent-2:#9a7557;
  --fiber-display:"Fraunces",Georgia,"Times New Roman",serif;
  --fiber-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fiber-shell:80rem;
}

.fiber-page{padding:0;background:var(--fiber-canvas);color:var(--fiber-ink)}
.fiber-shell{width:min(calc(100% - 3rem),var(--fiber-shell));margin-inline:auto}
.fiber-page img{width:100%;display:block}
.fiber-page button{font:inherit}
.fiber-page h1,.fiber-page h2,.fiber-page h3{color:var(--fiber-ink)}
.fiber-page h2{margin:0;font-family:var(--fiber-display);font-variation-settings:"SOFT" 35,"WONK" 0,"opsz" 72;font-size:clamp(3rem,5.5vw,5.5rem);line-height:.95;letter-spacing:-.04em}
.fiber-page h3{margin:.5rem 0 .7rem;font-family:var(--fiber-display);font-size:clamp(1.55rem,2.4vw,2.25rem);line-height:1.1}
.fiber-kicker,.fiber-number,.detail-label{font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.fiber-number,.detail-label,.fiber-kicker{color:var(--fiber-accent)}
.fiber-section{padding:clamp(6rem,9vw,9rem) 0}
.fiber-section:nth-of-type(even){background:var(--fiber-soft)}
.fiber-section:nth-of-type(odd){background:#fff}

.fiber-hero{padding:clamp(3.5rem,6vw,6.5rem) 0 0;background:#fff}
.fiber-hero-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(3rem,6vw,6.5rem);align-items:center}
.fiber-hero h1{margin:.8rem 0 1.5rem;font-family:var(--fiber-display);font-variation-settings:"SOFT" 35,"WONK" 0,"opsz" 96;font-size:clamp(4.5rem,8vw,8rem);line-height:.88;letter-spacing:-.055em}
.fiber-hero-copy p{max-width:39rem}
.fiber-lede{font-size:clamp(1.08rem,1.35vw,1.24rem);line-height:1.72;color:var(--fiber-ink)}
.fiber-hero-copy p:not(.fiber-kicker):not(.fiber-lede){line-height:1.72;color:var(--fiber-copy)}
.fiber-hero-media{margin:0;position:relative}
.fiber-hero-media::after{content:"";position:absolute;left:-1.2rem;bottom:-1.2rem;width:35%;height:1px;background:var(--fiber-accent)}
.fiber-index{display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(3.5rem,5vw,5.5rem);border-top:1px solid var(--fiber-ink);border-bottom:1px solid var(--fiber-rule)}
.fiber-index a{padding:1.25rem 1rem 1.3rem;text-decoration:none;color:var(--fiber-ink);border-right:1px solid var(--fiber-rule)}
.fiber-index a:first-child{padding-left:0}.fiber-index a:last-child{border-right:0}
.fiber-index span{display:block;margin-bottom:.35rem;color:var(--fiber-muted);font-size:.66rem;letter-spacing:.12em}
.fiber-index strong{font-family:var(--fiber-display);font-size:1.18rem;font-weight:600}
.fiber-index a:hover{color:var(--fiber-accent)}

.fiber-heading-grid{display:grid;grid-template-columns:.26fr .9fr .84fr;gap:clamp(1.5rem,4vw,4rem);align-items:start;margin-bottom:clamp(4rem,6vw,6rem)}
.fiber-number{margin:0;padding-top:.8rem;border-top:1px solid currentColor}
.fiber-intro-copy{max-width:34rem}
.fiber-intro-copy p{margin:0 0 1rem;line-height:1.75;color:var(--fiber-copy)}
.fiber-intro-copy p:first-child{color:var(--fiber-ink)}

.micron-visual{position:relative;min-height:clamp(17rem,30vw,24rem);display:flex;align-items:center;border-top:1px solid var(--fiber-ink);border-bottom:1px solid var(--fiber-ink)}
.micron-scale{position:absolute;inset:1rem 0 auto;display:flex;justify-content:space-between;color:var(--fiber-muted);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.micron-visual svg{width:100%;overflow:visible}
.micron-guide,.micron-strand{fill:none;stroke-linecap:round}
.micron-guide{stroke:#e1dcd3;stroke-width:34}
.micron-strand{stroke:var(--fiber-accent);stroke-width:10;transition:stroke-width .35s cubic-bezier(.2,.7,.3,1)}
.micron-readout{position:absolute;right:0;bottom:1rem;display:flex;align-items:flex-start}
.micron-readout span{font-family:var(--fiber-display);font-size:clamp(4.5rem,8vw,7.8rem);line-height:.75;letter-spacing:-.055em}
.micron-readout small{margin-top:.2rem;color:var(--fiber-accent);font-weight:600}
.micron-buttons{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--fiber-ink)}
.micron-buttons button{min-height:6.5rem;padding:1.2rem;border:0;border-right:1px solid var(--fiber-rule);background:transparent;text-align:left;cursor:pointer}
.micron-buttons button:last-child{border-right:0}
.micron-buttons strong{display:block;font-family:var(--fiber-display);font-size:2.1rem}
.micron-buttons span{display:block;margin-top:.35rem;color:var(--fiber-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.micron-buttons button.is-active{background:var(--fiber-accent);color:#fff}
.micron-buttons button.is-active span{color:#d6e6e8}
.dynamic-copy{display:grid;grid-template-columns:.26fr 1fr;gap:clamp(1.5rem,4vw,4rem);padding-top:2rem}
.dynamic-copy>span{color:var(--fiber-accent);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.dynamic-copy p{max-width:50rem;margin:0;font-family:var(--fiber-display);font-size:clamp(1.5rem,2.8vw,2.35rem);line-height:1.3}
.fiber-bridge{max-width:48rem;margin:5rem 0 0;padding-top:1.4rem;border-top:1px solid var(--fiber-rule);color:var(--fiber-copy);line-height:1.72}

.quality-layout{display:grid;grid-template-columns:1.05fr .55fr .8fr;gap:clamp(1.5rem,3vw,3rem);align-items:stretch}
.quality-media{margin:0}.quality-media img{height:100%;object-fit:cover}
.quality-controls{display:flex;flex-direction:column;border-top:1px solid var(--fiber-ink)}
.quality-controls button,.uses-rail button{display:grid;grid-template-columns:2.2rem 1fr;gap:.7rem;align-items:center;padding:1.15rem 0;border:0;border-bottom:1px solid var(--fiber-rule);background:transparent;text-align:left;cursor:pointer;color:var(--fiber-ink)}
.quality-controls button span,.uses-rail button span{color:var(--fiber-muted);font-size:.66rem}
.quality-controls button.is-active,.uses-rail button.is-active{color:var(--fiber-accent);font-weight:600}
.quality-detail{align-self:end;padding-top:1.5rem;border-top:1px solid var(--fiber-ink)}
.quality-detail>p:not(.detail-label){font-family:var(--fiber-display);font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.35}

.fiber-cta{display:inline-flex;gap:.4rem;align-items:center;margin-top:1.5rem;color:var(--fiber-accent);font-weight:600;text-decoration:none}
.fiber-cta span{transition:transform .18s ease}.fiber-cta:hover span{transform:translateX(.25rem)}

.comparison-media{margin:0 0 2.5rem}.comparison-media img{max-height:34rem;object-fit:cover}
.comparison-tabs{display:flex;flex-wrap:wrap;border-top:1px solid var(--fiber-ink);border-bottom:1px solid var(--fiber-ink)}
.comparison-tabs button{padding:1rem 1.25rem;border:0;border-right:1px solid var(--fiber-rule);background:transparent;cursor:pointer}
.comparison-tabs button.is-active{background:var(--fiber-deep);color:#fff}
.comparison-columns{display:grid;grid-template-columns:1fr 1fr}
.comparison-columns article{padding:2rem 2rem 2rem 0;border-bottom:1px solid var(--fiber-rule)}
.comparison-columns article+article{padding-left:2rem;border-left:1px solid var(--fiber-rule)}
.comparison-columns article>p:not(.detail-label){font-family:var(--fiber-display);font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.4}

.process-track{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--fiber-ink);border-bottom:1px solid var(--fiber-rule)}
.process-track button{min-width:0;padding:1rem .8rem;border:0;border-right:1px solid var(--fiber-rule);background:transparent;text-align:left;cursor:pointer}
.process-track button:last-child{border-right:0}
.process-track span{display:block;margin-bottom:.35rem;color:var(--fiber-muted);font-size:.63rem}
.process-track button.is-active{background:var(--fiber-accent);color:#fff}.process-track button.is-active span{color:#d8e7e8}
.process-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:2.5rem}
.process-stage figure{margin:0}.process-stage img{aspect-ratio:3/2;object-fit:cover}
.process-stage>div>p:not(.detail-label){font-family:var(--fiber-display);font-size:clamp(1.5rem,2.5vw,2.2rem);line-height:1.35}

.color-explorer{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.color-media{margin:0}.color-media img{aspect-ratio:3/2;object-fit:cover}
.color-swatches{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--fiber-ink)}
.color-swatches button{display:flex;align-items:center;gap:.7rem;padding:.9rem 0;border:0;border-bottom:1px solid var(--fiber-rule);background:transparent;text-align:left;cursor:pointer}
.color-swatches button:nth-child(odd){padding-right:1rem}.color-swatches button:nth-child(even){padding-left:1rem}
.color-swatches span{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--swatch);border:1px solid rgba(0,0,0,.12)}
.color-swatches button.is-active{color:var(--fiber-accent);font-weight:600}
.color-detail{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--fiber-ink)}
.color-detail>p:not(.detail-label){font-family:var(--fiber-display);font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.35}

.uses-explorer{display:grid;grid-template-columns:.42fr 1.58fr;gap:clamp(2rem,4vw,4rem)}
.uses-rail{border-top:1px solid var(--fiber-ink)}
.uses-stage{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.uses-stage figure{margin:0}.uses-stage img{aspect-ratio:3/2;object-fit:cover}
.uses-stage>div>p:not(.detail-label){font-family:var(--fiber-display);font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.35}
.uses-explorer>.fiber-cta{grid-column:2}

.breed-spread{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.breed-spread article{min-width:0}
.breed-spread figure{margin:0 0 1.5rem}.breed-spread img{aspect-ratio:3/2;object-fit:cover}
.breed-spread article p:last-child{color:var(--fiber-copy);line-height:1.72}

.fiber-follow{padding:clamp(6rem,9vw,9rem) 0;background:var(--fiber-deep);color:#fff}
.fiber-follow .fiber-number{color:#a7c7cd;border-top-color:#a7c7cd;max-width:12rem}
.fiber-follow h2{margin:1.3rem 0 1.4rem;color:#fff;font-family:var(--fiber-display);font-size:clamp(3.6rem,6vw,6rem);letter-spacing:-.04em}
.follow-copy{max-width:54rem;color:#d9e3e4;line-height:1.75}
.follow-path{display:grid;grid-template-columns:repeat(5,1fr);margin-top:3.5rem;border-top:1px solid rgba(255,255,255,.45)}
.follow-path a{padding:1.4rem 1.2rem 1.4rem 0;color:#fff;text-decoration:none;border-right:1px solid rgba(255,255,255,.2)}
.follow-path a:not(:first-child){padding-left:1.2rem}.follow-path a:last-child{border-right:0}
.follow-path span,.follow-path strong,.follow-path small{display:block}
.follow-path span{color:#8fb4ba;font-size:.66rem;letter-spacing:.1em}
.follow-path strong{margin:.55rem 0 .4rem;font-family:var(--fiber-display);font-size:1.25rem}
.follow-path small{color:#c6d6d8;line-height:1.4}

@media (max-width:64rem){
  .fiber-hero-grid{grid-template-columns:1fr}
  .fiber-hero-copy{max-width:50rem}
  .fiber-heading-grid{grid-template-columns:.28fr 1fr}.fiber-intro-copy{grid-column:2}
  .quality-layout{grid-template-columns:1fr 1fr}.quality-media{grid-column:1/-1}.quality-detail{align-self:start}
  .process-track{grid-template-columns:repeat(4,1fr)}
  .process-track button:nth-child(4){border-right:0}
  .process-track button:nth-child(-n+4){border-bottom:1px solid var(--fiber-rule)}
  .uses-explorer{grid-template-columns:1fr}.uses-rail{display:grid;grid-template-columns:repeat(4,1fr)}
  .uses-rail button{display:block;padding:1rem}.uses-stage{grid-template-columns:1fr 1fr}.uses-explorer>.fiber-cta{grid-column:auto}
}

@media (max-width:46rem){
  .fiber-shell{width:min(calc(100% - 2rem),var(--fiber-shell))}
  .fiber-hero h1{font-size:clamp(4rem,18vw,6rem)}
  .fiber-index{grid-template-columns:repeat(2,1fr)}
  .fiber-index a{border-bottom:1px solid var(--fiber-rule)}.fiber-index a:nth-child(2n){border-right:0}.fiber-index a:last-child{grid-column:1/-1;border-bottom:0}
  .fiber-heading-grid{grid-template-columns:1fr;gap:1.4rem}.fiber-intro-copy{grid-column:auto}.fiber-number{max-width:12rem}
  .micron-visual{min-height:14rem}.micron-buttons{grid-template-columns:repeat(2,1fr)}.micron-buttons button:nth-child(2){border-right:0}.micron-buttons button:nth-child(-n+2){border-bottom:1px solid var(--fiber-rule)}
  .dynamic-copy{grid-template-columns:1fr;gap:.7rem}
  .quality-layout{grid-template-columns:1fr}.quality-media{grid-column:auto}
  .comparison-tabs{display:grid;grid-template-columns:repeat(2,1fr)}.comparison-tabs button{border-bottom:1px solid var(--fiber-rule)}
  .comparison-columns{grid-template-columns:1fr}.comparison-columns article+article{padding-left:0;border-left:0}
  .process-track{grid-template-columns:repeat(2,1fr)}.process-track button{border-bottom:1px solid var(--fiber-rule)}
  .process-stage,.color-explorer,.uses-stage,.breed-spread{grid-template-columns:1fr}
  .color-swatches{grid-template-columns:1fr}.color-swatches button:nth-child(n){padding-left:0;padding-right:0}
  .uses-rail{grid-template-columns:repeat(2,1fr)}
  .follow-path{grid-template-columns:1fr}.follow-path a{padding:1.1rem 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
}

@media (prefers-reduced-motion:reduce){
  .micron-strand,.fiber-cta span{transition:none}
}