/* ==========================================================================
   FUNMETAL C.A. - home-v2 (elevated editorial layer)
   Sits on top of funmetal.css. Same monochrome system as the commercial
   proposal: Switzer 200/300 display, IBM Plex Mono labels, hairline rails,
   dark/light splits, spec grids. Gold (--accent) appears exactly once:
   the 99.98 figure in the Quality section.
   ========================================================================== */

:root{
    --hair: rgba(0,0,0,.12);
    --hair-soft: rgba(0,0,0,.07);
    --hair-inv: rgba(255,255,255,.14);
    --hair-inv-soft: rgba(255,255,255,.08);
}
/* accessibility utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nav-links-wrap{ display:contents; }

/* How to buy - FAQ (native <details>, no JS, keyboard-accessible) */
.hm-faq{ border-top:1px solid var(--hair); }
.hm-faq details{ border-bottom:1px solid var(--hair); }
.hm-faq summary{
    list-style:none; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
    padding:1.35rem 0; font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; color:var(--black);
}
.hm-faq summary::-webkit-details-marker{ display:none; }
.hm-faq summary::after{ content:"+"; font-family:var(--mono); font-weight:400; font-size:1.4rem; line-height:1; color:var(--gray-400); flex-shrink:0; }
.hm-faq details[open] summary::after{ content:"\2212"; }
.hm-faq__body{ padding:0 0 1.5rem; }
.hm-faq__body p{ font-size:.95rem; line-height:1.65; color:var(--gray-500); max-width:64ch; margin:0; }

/* --- shared rhythm ------------------------------------------------------ */
.hm-section{ padding: clamp(4.5rem, 8vw, 8rem) 0; }
.hm-section--dark{ background: var(--black); color: var(--white); }
.hm-section--ground{ background: var(--gray-bg); }
.hm-narrow{ max-width: 1180px; }

.hm-lead{
    font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
    line-height: 1.55; color: var(--gray-500); font-weight: 400;
    max-width: 40rem; text-wrap: pretty;
}
.hm-section--dark .hm-lead{ color: rgba(255,255,255,.72); }

.hm-body{ font-size: 1rem; line-height: 1.7; color: var(--gray-400); }
.hm-section--dark .hm-body{ color: var(--gray-300); }

.hm-h2{
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    font-weight: 300; letter-spacing: -.035em; line-height: 1.02;
    text-wrap: balance; margin: 0;
}
.hm-h2 em{ font-style: normal; font-weight: 200; }
.hm-section--dark .hm-h2{ color: var(--white); }

.hm-thin{ font-weight: 200; letter-spacing: -.04em; }

/* --- running rail (echoes the deck chrome-t) --------------------------- */
.hm-rail{
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem 2rem; flex-wrap: wrap;
    border-top: 1px solid var(--hair);
    padding-top: 1.1rem; margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.hm-section--dark .hm-rail{ border-top-color: var(--hair-inv); }
.hm-rail__idx, .hm-rail__tag{
    font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gray-400);
}
.hm-section--dark .hm-rail__idx, .hm-section--dark .hm-rail__tag{ color: var(--gray-300); }
.hm-rail__idx b{ color: var(--black); font-weight: 500; }
.hm-section--dark .hm-rail__idx b{ color: var(--white); }

.hm-head{ display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem 3rem; align-items: end; }
.hm-head .hm-lead{ align-self: end; }
@media (max-width: 820px){ .hm-head{ grid-template-columns: 1fr; gap: 1.25rem; } }

.hm-more{
    display: inline-flex; align-items: center; gap: .55rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    font-family: var(--mono); font-size: .6875rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--black);
    border-bottom: 1px solid var(--gray-300); padding-bottom: .35rem;
    transition: color .18s, border-color .18s;
}
.hm-more:hover{ color: var(--gray-500); border-color: var(--gray-500); }
.hm-section--dark .hm-more{ color: var(--white); border-color: rgba(255,255,255,.3); }
.hm-section--dark .hm-more:hover{ border-color: var(--white); }

/* =======================================================================
   HERO
   ======================================================================= */
.hm-hero{
    position: relative; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden; background: var(--black);
    padding: 7rem 0 clamp(2.5rem, 5vw, 4rem);
}
.hm-hero__bg{ position: absolute; inset: 0; z-index: 0; }
.hm-hero__bg img{ width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.hm-hero__bg::after{
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 32%,
        rgba(0,0,0,.45) 72%, rgba(0,0,0,.86) 100%);
}
.hm-hero .container{ position: relative; z-index: 1; }

.hm-hero__eyebrow{
    display: flex; gap: 1rem 1.4rem; flex-wrap: wrap;
    font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
    padding-bottom: 1.4rem; border-bottom: 1px solid var(--hair-inv);
    margin-bottom: 2rem;
}
.hm-hero__eyebrow .sep{ color: rgba(255,255,255,.25); }

.hm-hero__title{
    font-size: clamp(2.85rem, 8.2vw, 6.5rem);
    font-weight: 300; letter-spacing: -.045em; line-height: .95;
    color: var(--white); max-width: 16ch; text-wrap: balance;
}
.hm-hero__title b{ font-weight: 200; }

.hm-hero__row{
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 2.5rem; flex-wrap: wrap; margin-top: clamp(1.75rem, 3vw, 2.75rem);
}
.hm-hero__row p{
    font-size: 1rem; color: rgba(255,255,255,.72);
    line-height: 1.7; max-width: 34rem;
}
.hm-hero__cta{ display: flex; gap: .75rem; flex-wrap: wrap; flex-shrink: 0; }

.hm-hero__meta{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
    border-top: 1px solid var(--hair-inv);
    margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
}
.hm-hero__meta span{
    display: block; font-family: var(--mono); font-size: .625rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.5); margin-bottom: .6rem;
}
.hm-hero__meta b{
    display: block; font-weight: 500; color: var(--white);
    font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: -.01em;
}
@media (max-width: 720px){
    .hm-hero__meta{ grid-template-columns: 1fr 1fr; gap: 1.4rem 1.25rem; }
    .hm-hero__cta{ width: 100%; }
    .hm-hero__cta .btn{ flex: 1; }
}

/* =======================================================================
   PRODUCER AT A GLANCE  (stat grid)
   ======================================================================= */
.hm-stats{
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--hair); background: var(--white);
    border-radius: var(--radius-sm); overflow: hidden;
}
.hm-stat{
    padding: clamp(1.75rem, 3vw, 2.6rem);
    border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
    display: flex; flex-direction: column; gap: .5rem;
}
.hm-stat__num{
    font-size: clamp(2.4rem, 4.2vw, 3.4rem); font-weight: 300;
    letter-spacing: -.04em; line-height: .95; color: var(--black);
}
.hm-stat__num s{ text-decoration: none; font-size: .42em; font-weight: 400; letter-spacing: .02em; }
.hm-stat__lbl{
    font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gray-400); margin-top: auto;
}
.hm-stat__note{ font-size: .8125rem; color: var(--gray-400); line-height: 1.5; }
.hm-stats > .hm-stat:nth-child(3n){ border-right: none; }
.hm-stats > .hm-stat:nth-last-child(-n+3){ border-bottom: none; }
@media (max-width: 760px){
    .hm-stats{ grid-template-columns: 1fr 1fr; }
    .hm-stats > .hm-stat:nth-child(3n){ border-right: 1px solid var(--hair); }
    .hm-stats > .hm-stat:nth-child(2n){ border-right: none; }
    .hm-stats > .hm-stat:nth-last-child(-n+3){ border-bottom: 1px solid var(--hair); }
    .hm-stats > .hm-stat:nth-last-child(-n+2){ border-bottom: none; }
}
@media (max-width: 460px){
    .hm-stats{ grid-template-columns: 1fr; }
    .hm-stats > .hm-stat{ border-right: none !important; border-bottom: 1px solid var(--hair) !important; }
    .hm-stats > .hm-stat:last-child{ border-bottom: none !important; }
}

/* =======================================================================
   PRODUCTS  (editorial spec cards)
   ======================================================================= */
.hm-prods{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.hm-prod{
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--hair);
    border-radius: var(--radius-sm);
    padding: clamp(1.75rem, 2.6vw, 2.4rem);
    transition: box-shadow .22s ease, transform .22s ease;
}
.hm-prod:hover{ box-shadow: 0 18px 48px -28px rgba(0,0,0,.4); transform: translateY(-3px); }
.hm-prod__tag{
    font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gray-400);
    padding-bottom: 1.4rem; border-bottom: 1px solid var(--hair-soft);
}
.hm-prod__name{
    font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 300;
    letter-spacing: -.03em; line-height: 1.02; margin: 1.5rem 0 .75rem;
}
.hm-prod__desc{ font-size: .875rem; line-height: 1.6; color: var(--gray-400); margin-bottom: 1.75rem; }
.hm-prod__spec{
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem;
    border-top: 1px solid var(--hair); padding-top: 1.5rem; margin-top: auto;
}
.hm-prod__spec b{ display: block; font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; }
.hm-prod__spec s{
    display: block; text-decoration: none;
    font-family: var(--mono); font-size: .5625rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gray-400); margin-top: .25rem;
}
.hm-prod__link{
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem;
    font-family: var(--mono); font-size: .6875rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--black);
    transition: gap .18s ease, color .18s ease;
}
.hm-prod__link:hover{ gap: .85rem; color: var(--gray-500); }
@media (max-width: 900px){ .hm-prods{ grid-template-columns: 1fr; } }

/* =======================================================================
   PROCESS  (7-stage stepper)
   ======================================================================= */
/* Timeline: una unica linea continua con nodos. Sin divisores verticales
   por columna (esos "colgaban" al vacio); la linea es un solo pseudo-elemento
   que no puede quedar ragged con textos de distinta longitud. */
.hm-steps{
    position: relative;
    display: grid; grid-template-columns: repeat(7, 1fr);
    column-gap: 1.5rem;
    padding-top: 2.4rem;                 /* zona de linea + nodos */
}
.hm-steps::before{                       /* la linea continua */
    content: ""; position: absolute;
    left: 0; right: 0; top: 4px; height: 1px;
    background: var(--hair);
}
.hm-step{
    position: relative;
    display: flex; flex-direction: column; gap: .55rem;
    padding: 0; border: none;
}
.hm-step::before{                        /* el nodo, subido a la linea (top negativo = -padding-top) */
    content: ""; position: absolute; top: -2.4rem; left: 0;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--white); border: 1.5px solid var(--black);
}
.hm-step__idx{
    font-family: var(--mono); font-size: 1.35rem; font-weight: 500;
    letter-spacing: -.03em; line-height: 1; color: var(--black);
}
.hm-step__idx span{
    display: block; font-size: .6rem; font-weight: 400; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gray-400); margin-bottom: .4rem;
}
.hm-step h3{ font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; margin: .15rem 0 0; }
.hm-step p{ font-size: .75rem; line-height: 1.55; color: var(--gray-400); margin: 0; }
/* <=1024px: el mismo timeline pero VERTICAL (robusto a cualquier ancho) */
@media (max-width: 1024px){
    .hm-steps{
        display: flex; flex-direction: column; gap: 1.6rem;
        grid-template-columns: none;
        padding-top: 0; padding-left: 1.75rem;
    }
    .hm-steps::before{
        left: 4px; right: auto; top: .3rem; bottom: .3rem;
        width: 1px; height: auto;
    }
    .hm-step{ padding-left: 0; }
    .hm-step::before{ top: .35rem; left: -1.75rem; }
    .hm-step__idx{ font-size: 1.15rem; }
    .hm-step__idx span{ display: inline; margin: 0 .5rem 0 0; }
    .hm-step h3{ font-size: 1rem; }
    .hm-step p{ font-size: .85rem; max-width: 42ch; }
}

/* =======================================================================
   QUALITY  (dark hero-stat, the single gold figure)
   ======================================================================= */
.hm-quality{ display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px){ .hm-quality{ grid-template-columns: 1fr; gap: 2.75rem; } }

.hm-purity__num{
    font-size: clamp(4.75rem, 15vw, 12rem); font-weight: 200;
    letter-spacing: -.055em; line-height: .82; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.hm-purity__num s{ text-decoration: none; font-weight: 300; font-size: .26em; vertical-align: .95em; letter-spacing: 0; }
.hm-purity__cap{
    font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gray-300);
    margin-top: 1.5rem; max-width: 24rem; line-height: 1.7;
}
.hm-el{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--hair-inv); border: 1px solid var(--hair-inv);
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.hm-el__cell{ background: var(--black); padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .2rem; }
.hm-el__sym{ font-size: 1.75rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--white); }
.hm-el__name{ font-family: var(--mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-300); }
.hm-el__val{ font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-300); margin-top: .5rem; }
@media (max-width: 520px){ .hm-el{ grid-template-columns: 1fr 1fr; } }

.hm-points{ display: flex; flex-direction: column; }
.hm-point{ padding: 1.6rem 0; border-top: 1px solid var(--hair-inv); }
.hm-point:first-child{ border-top: none; padding-top: 0; }
.hm-point__k{
    font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gray-300); margin-bottom: .6rem;
}
.hm-point h3{ font-size: 1.125rem; font-weight: 400; letter-spacing: -.01em; margin-bottom: .5rem; color: var(--white); }
.hm-point p{ font-size: .875rem; line-height: 1.65; color: var(--gray-300); }

/* =======================================================================
   LOGISTICS
   ======================================================================= */
.hm-log{ display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 1.25rem; }
@media (max-width: 900px){ .hm-log{ grid-template-columns: 1fr; } }

.hm-log__port{
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--black); color: var(--white);
    border-radius: var(--radius-sm);
    padding: clamp(2rem, 3.2vw, 2.75rem);
    display: flex; flex-direction: column;
}
.hm-log__port img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; z-index: -1; }
.hm-log__port::after{ content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.82)); }
.hm-log__k{ font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hm-log__port h3{ font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -.03em; margin: 1rem 0 .5rem; }
.hm-log__port p{ font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.65); max-width: 24rem; }
.hm-log__docs{ list-style: none; margin-top: auto; padding-top: 1.75rem; border-top: 1px solid var(--hair-inv); }
.hm-log__docs li{ font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; color: rgba(255,255,255,.6); padding: .3rem 0; }
.hm-log__docs li::before{ content: '\2713\00a0\00a0'; color: rgba(255,255,255,.35); }

.hm-log__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 480px){ .hm-log__grid{ grid-template-columns: 1fr; } }
.hm-log__tile{
    background: var(--white); border: 1px solid var(--hair);
    border-radius: var(--radius-sm); padding: clamp(1.5rem, 2.4vw, 2rem);
    display: flex; flex-direction: column; justify-content: flex-end; min-height: 8.5rem;
}
.hm-log__val{ font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--black); }
.hm-log__lbl{ font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); margin-top: .65rem; }

/* =======================================================================
   SUSTAINABILITY  (two-col)
   ======================================================================= */
.hm-two{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px){ .hm-two{ grid-template-columns: 1fr; gap: 2.25rem; } }
.hm-two__img{ border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.hm-two__img img{ width: 100%; height: 100%; object-fit: cover; }
.hm-two__metrics{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.25rem; border-top: 1px solid var(--hair); padding-top: 1.75rem; }
.hm-two__metrics .n{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.hm-two__metrics .l{ font-family: var(--mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); margin-top: .5rem; line-height: 1.4; }

/* =======================================================================
   CLOSING CTA
   ======================================================================= */
.hm-cta{ text-align: center; }
.hm-cta .hm-rail{ text-align: left; }
.hm-cta__eyebrow{ font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-300); }
.hm-cta__h{ font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--white); margin: 1.5rem auto .5rem; max-width: 18ch; text-wrap: balance; }
.hm-cta__p{ font-size: 1rem; line-height: 1.65; color: var(--gray-300); max-width: 34rem; margin: 0 auto; }
.hm-cta__stats{
    display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(2rem, 6vw, 4.5rem);
    margin: clamp(2.5rem, 4vw, 3.25rem) auto;
    padding: 1.75rem 0; border-top: 1px solid var(--hair-inv); border-bottom: 1px solid var(--hair-inv);
    max-width: 46rem;
}
.hm-cta__stats .n{ display: block; font-size: 1.75rem; font-weight: 300; letter-spacing: -.02em; color: var(--white); }
.hm-cta__stats .l{ display: block; font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-300); margin-top: .5rem; }
.hm-cta__actions{ display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }

/* =======================================================================
   MOTION  (sober fade-up; disabled for reduced-motion)
   ======================================================================= */
@media (prefers-reduced-motion: reduce){
    .fade-up{ opacity: 1 !important; transform: none !important; transition: none !important; }
    .hm-prod, .hm-more, .hm-prod__link{ transition: none !important; }
    html{ scroll-behavior: auto !important; }
}