/* ==========================================================================
   Taller Creativo Mochila — Landing
   Paleta real de marca: teal, mostaza, slate profundo, navy y crema.
   Motivo de firma: el camino/ruta (journey) y el corchete {M} del logo.
   ========================================================================== */

:root{
    --teal: #5FA0A5;
    --teal-deep: #3A6467;
    --slate: #2E4A4A;
    --navy: #10191D;
    --navy-soft: #17242A;
    --mustard: #E5C169;
    --mustard-deep: #C99A3C;
    --coral: #D2503C;
    --cream: #F7F4D3;
    --paper: #FBFAF4;
    --ink: #16211F;
    --text-muted: #5B6764;

    --font-display: 'Anton', sans-serif;
    --font-slab: 'Zilla Slab', Georgia, serif;
    --font-sans: 'Work Sans', system-ui, -apple-system, sans-serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --header-h: 82px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior: smooth; font-size: 16px; }

body{
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.container{ max-width: 1240px; margin: 0 auto; padding: 0 2rem; }

section[id]{ scroll-margin-top: var(--header-h); }

.eyebrow{
    display:inline-block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin-bottom: 1rem;
}
.eyebrow-light{ color: var(--mustard); }

h1, h2, h3, h4{
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--ink);
}

.section-header{ max-width: 680px; margin-bottom: 3rem; }
.section-header.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-header h2{ font-size: 2.4rem; margin-bottom: 1rem; }
.section-sub{ font-family: var(--font-sans); color: var(--text-muted); font-size: 1.05rem; font-weight: 400; text-transform:none; letter-spacing:0; }

.section{ padding: 6rem 0; }
.section-navy{ background: var(--navy); color: #EAF0EE; }
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4{ color:#fff; }
.section-navy .section-sub{ color: rgba(234,240,238,0.7); }
.section-cream{ background: var(--cream); }

/* ---------- Buttons ---------- */
.btn{
    display:inline-block;
    padding: 0.95rem 2rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration:none;
    cursor:pointer;
    border-radius: 4px;
    border: 1.5px solid transparent;
    transition: all 0.3s var(--ease);
}
.btn-primary{ background: var(--mustard); color: var(--navy); }
.btn-primary:hover{ background: var(--mustard-deep); transform: translateY(-2px); }
.btn-ghost{ background: transparent; border-color: rgba(16,25,29,0.25); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink); background: rgba(16,25,29,0.05); }
.hero .btn-ghost{ border-color: rgba(234,240,238,0.4); color: #EAF0EE; }
.hero .btn-ghost:hover{ border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-sm{ padding: 0.7rem 1.4rem; font-size: 0.78rem; }
.btn-full{ width:100%; text-align:center; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
    position: fixed; top:0; left:0; width:100%; z-index: 1000;
    background: rgba(251,250,244,0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(16,25,29,0.07);
    transition: box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgba(16,25,29,0.10); }
.header-inner{
    max-width: 1240px; margin:0 auto; padding: 1rem 2rem;
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.brand-mark{ width:38px; height:38px; color: var(--teal-deep); flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-eyebrow{ font-size:0.6rem; letter-spacing:2px; text-transform:uppercase; color: var(--text-muted); }
.brand-title{ font-family: var(--font-slab); font-weight:700; font-size:1.35rem; color: var(--ink); }

.main-nav{ display:flex; gap: 2rem; }
.main-nav a{
    text-decoration:none; color: var(--ink); font-size:0.86rem; font-weight:600;
    position:relative; padding-bottom:4px;
}
.main-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background: var(--mustard); transform: scaleX(0); transform-origin:left;
    transition: transform 0.25s var(--ease);
}
.main-nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:1.2rem; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span{ width:24px; height:2px; background: var(--ink); border-radius:2px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
    position:relative;
    padding: calc(var(--header-h) + 4rem) 0 5rem;
    background: var(--navy);
    color: #EAF0EE;
    overflow:hidden;
}
.hero-road{ position:absolute; inset:0; z-index:0; opacity:0.5; }
.hero-road svg{ width:100%; height:100%; }
.road-path{
    fill:none; stroke: var(--teal-deep); stroke-width: 26; stroke-linecap: round;
}
.road-pin{
    position:absolute; width:14px; height:14px; border-radius:50%;
    background: var(--mustard); box-shadow: 0 0 0 5px rgba(229,193,105,0.18);
    transform: translate(-50%,-50%);
}

.hero-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items:center;
}
.hero-copy .eyebrow{ color: var(--mustard); }
.hero-copy h1{
    font-size: 3.1rem; color:#fff; margin: 0.6rem 0 1.4rem; max-width: 640px;
}
.hero-desc{
    font-family: var(--font-sans); color: rgba(234,240,238,0.78);
    font-size: 1.1rem; max-width: 500px; margin-bottom: 2.2rem;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero-quote-card{
    position:relative;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 2.6rem 2rem;
}
.hero-quote-card p{
    font-family: var(--font-slab);
    font-size: 1.25rem;
    line-height: 1.55;
    color: #EAF0EE;
}
.hero-quote-card em{ color: var(--mustard); font-style: normal; }
.quote-mark{
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--teal);
    line-height:1;
    display:block;
}
.quote-mark-close{ text-align:right; margin-top: 0.6rem; }

/* ==========================================================================
   SPLIT / QUIÉNES SOMOS
   ========================================================================== */
.split{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items:center; }
.split-copy h2{ font-size: 2.3rem; margin-bottom: 1.4rem; }
.split-copy p{ font-family: var(--font-sans); color: var(--text-muted); margin-bottom: 1.1rem; font-size: 1.02rem; }
.split-copy strong{ color: var(--ink); }
.split-copy em{ font-style: italic; color: var(--teal-deep); }
.bracket-word{ color: var(--teal-deep); }

.split-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.stat-card{
    background: var(--cream);
    border-radius: 14px;
    padding: 1.8rem 1.5rem;
    display:flex; flex-direction:column; gap:0.4rem;
}
.stat-card-alt{ background: var(--navy); }
.stat-card-alt .stat-number{ color: var(--mustard); }
.stat-card-alt .stat-label{ color: rgba(234,240,238,0.75); }
.stat-number{ font-family: var(--font-display); font-size: 2.2rem; color: var(--teal-deep); }
.stat-label{ font-family: var(--font-sans); font-size: 0.85rem; color: var(--text-muted); }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.services-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem;
}
.service-card{
    background: var(--navy-soft);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 2.2rem;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.service-card:hover{ transform: translateY(-6px); border-color: var(--teal); }
.service-index{
    font-family: var(--font-display); font-size: 1rem; color: var(--mustard);
    display:block; margin-bottom: 1rem;
}
.service-card h3{ color:#fff; font-size: 1.3rem; margin-bottom: 0.8rem; }
.service-card p{ font-family: var(--font-sans); color: rgba(234,240,238,0.72); font-size: 0.94rem; text-transform:none; }

/* ==========================================================================
   INDUSTRIA AUTOMOTRIZ / CLIENTES
   ========================================================================== */
.clients-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem;
}
.client-badge{
    background: var(--paper);
    border: 1.5px solid rgba(16,25,29,0.12);
    border-radius: 12px;
    padding: 2rem 1.8rem;
    height: 120px;
    display:flex; align-items:center; justify-content:center;
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.client-badge:hover{ border-color: var(--teal); transform: translateY(-4px); }
.client-badge img{
    max-width: 100%; max-height: 100%; width:auto; height:auto; object-fit: contain;
}
.client-badge-dark{ background: var(--navy); border-color: var(--navy); }
.client-badge-dark:hover{ border-color: var(--mustard); }

/* ==========================================================================
   METODOLOGÍA
   ========================================================================== */
.steps-row{
    display:grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem;
}
.step-item{
    background: var(--paper);
    border-radius: 14px;
    padding: 1.8rem 1.4rem;
    border-top: 4px solid var(--teal-deep);
}
.step-item:nth-child(2){ border-top-color: var(--mustard-deep); }
.step-item:nth-child(3){ border-top-color: var(--coral); }
.step-item:nth-child(4){ border-top-color: var(--teal-deep); }
.step-item:nth-child(5){ border-top-color: var(--mustard-deep); }
.step-num{ font-family: var(--font-display); font-size: 1.6rem; color: var(--text-muted); }
.step-item h4{ font-size: 1.05rem; margin: 0.6rem 0 0.6rem; }
.step-item p{ font-family: var(--font-sans); font-size: 0.88rem; color: var(--text-muted); text-transform:none; }

/* ==========================================================================
   CASOS DE ÉXITO
   ========================================================================== */
.case-study{
    display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:center;
    margin-bottom: 3.5rem;
}
.case-media{ border-radius: 16px; overflow:hidden; box-shadow: 0 30px 60px -30px rgba(16,25,29,0.4); }
.case-media img{ width:100%; height:auto; display:block; }
.case-tag{
    display:inline-block; font-family: var(--font-sans); font-size:0.75rem; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase; color: var(--teal-deep); margin-bottom:0.8rem;
}
.case-copy h3{ font-size: 2rem; margin-bottom: 1.2rem; }
.case-copy p{ font-family: var(--font-sans); color: var(--text-muted); margin-bottom: 1rem; text-transform:none; font-size:0.98rem; }
.case-problem{ background: var(--cream); padding: 1rem 1.2rem; border-radius: 8px; }
.case-problem strong{ color: var(--ink); }

.case-stats{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(16,25,29,0.12);
}
.case-stat{ display:flex; flex-direction:column; font-family: var(--font-sans); font-size: 0.78rem; color: var(--text-muted); }
.case-stat span{ font-family: var(--font-display); font-size: 1.6rem; color: var(--teal-deep); }

.case-secondary{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.5rem; align-items:center;
    background: var(--cream); border-radius: 18px; padding: 2rem; overflow:hidden;
}
.case-secondary-media{ border-radius: 12px; overflow:hidden; }
.case-secondary-copy h3{ font-size: 1.5rem; margin-bottom: 0.8rem; }
.case-secondary-copy p{ font-family: var(--font-sans); color: var(--text-muted); text-transform:none; font-size:0.95rem; }

/* ==========================================================================
   TRAYECTORIA / HITOS
   ========================================================================== */
.timeline{ position:relative; display:grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.timeline-track{
    position:absolute; top:14px; left:0; right:0; height:2px;
    background: repeating-linear-gradient(to right, var(--teal) 0 10px, transparent 10px 18px);
}
.timeline-item{ position:relative; padding-top: 2.2rem; }
.timeline-item::before{
    content:""; position:absolute; top:0; left:0; width:14px; height:14px; border-radius:50%;
    background: var(--mustard); box-shadow: 0 0 0 5px rgba(229,193,105,0.15);
}
.timeline-year{ font-family: var(--font-display); font-size: 1.3rem; color: var(--mustard); display:block; margin-bottom:0.5rem; }
.timeline-item p{ font-family: var(--font-sans); font-size: 0.85rem; color: rgba(234,240,238,0.75); text-transform:none; line-height:1.5; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-section{ background: var(--cream); }
.split-contact{ align-items:start; gap: 4rem; }
.contact-form-wrap h2{ font-size: 2.2rem; margin-bottom: 0.8rem; }
.contact-intro{ font-family: var(--font-sans); color: var(--text-muted); margin-bottom: 1.8rem; text-transform:none; }

.form-row{ margin-bottom: 1.2rem; }
.form-row-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.form-row-2 .form-row{ margin-bottom:0; }
.form-row input, .form-row select, .form-row textarea,
.form-row-2 input{
    width:100%; padding: 0.9rem 1rem;
    background: #fff; border: 1.5px solid rgba(16,25,29,0.15); border-radius: 8px;
    color: var(--ink); font-family: var(--font-sans); font-size: 0.92rem;
    transition: border-color 0.25s var(--ease);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus,
.form-row-2 input:focus{ outline:none; border-color: var(--teal-deep); }
.form-note{ margin-top:1rem; font-family: var(--font-sans); font-size: 0.88rem; color: var(--teal-deep); min-height:1.2em; }

.contact-info-wrap{
    background: var(--navy); color: #EAF0EE; border-radius: 18px; padding: 2.6rem;
}
.contact-info-wrap h3{ color:#fff; font-size: 1.4rem; margin-bottom: 1.6rem; }
.info-block{ display:flex; flex-direction:column; padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,0.1); }
.info-block:first-of-type{ border-top:none; padding-top:0; }
.info-label{ font-family: var(--font-sans); font-size:0.68rem; letter-spacing:1.6px; text-transform:uppercase; color: var(--mustard); margin-bottom:0.35rem; }
.info-value{ font-family: var(--font-sans); font-size: 1.02rem; color:#fff; text-decoration:none; font-weight:500; display:block; }
.info-hint{ font-family: var(--font-sans); font-size:0.82rem; color: rgba(234,240,238,0.55); margin-top:0.2rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--navy); border-top: 1px solid rgba(255,255,255,0.08); padding: 2.2rem 0; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; color: rgba(234,240,238,0.65); font-size:0.85rem; }
.footer-brand{ font-family: var(--font-slab); font-weight:700; color:#fff; font-size:1.05rem; }
.footer-links{ display:flex; gap:1.6rem; }
.footer-links a{ text-decoration:none; color: rgba(234,240,238,0.65); transition: color 0.25s var(--ease); }
.footer-links a:hover{ color: var(--mustard); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-quote-card{ max-width: 560px; }
    .split{ grid-template-columns: 1fr; }
    .split-contact{ grid-template-columns: 1fr; }
    .case-study{ grid-template-columns: 1fr; }
    .case-secondary{ grid-template-columns: 1fr; }
    .steps-row{ grid-template-columns: repeat(3, 1fr); }
    .timeline{ grid-template-columns: repeat(3, 1fr); row-gap: 2.4rem; }
    .timeline-track{ display:none; }
}

@media (max-width: 860px){
    .main-nav{
        position: fixed; top: var(--header-h); left:0; right:0;
        background: var(--paper); flex-direction:column; gap:0;
        padding: 1rem 2rem 1.5rem; border-bottom: 1px solid rgba(16,25,29,0.08);
        transform: translateY(-8px); opacity:0; visibility:hidden;
        transition: all 0.3s var(--ease);
    }
    .main-nav.is-open{ transform: translateY(0); opacity:1; visibility:visible; }
    .main-nav a{ padding: 0.85rem 0; border-bottom: 1px solid rgba(16,25,29,0.06); }
    .nav-toggle{ display:flex; }
    .header-actions .btn-sm{ display:none; }
    .hero-copy h1{ font-size: 2.3rem; }
    .steps-row{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
    .container{ padding: 0 1.25rem; }
    .section{ padding: 4.2rem 0; }
    .split-stats{ grid-template-columns: 1fr 1fr; }
    .case-stats{ grid-template-columns: 1fr 1fr; }
    .steps-row{ grid-template-columns: 1fr 1fr; }
    .timeline{ grid-template-columns: 1fr 1fr; }
    .form-row-2{ grid-template-columns: 1fr; }
    .hero-copy h1{ font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ==========================================================================
   CURSOR PERSONALIZADO
   ========================================================================== */
.custom-cursor{
    position: fixed; top:0; left:0; width:34px; height:34px;
    border: 1.5px solid var(--mustard); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%,-50%);
    transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
    opacity: 0;
}
.cursor-dot{
    position: fixed; top:0; left:0; width:6px; height:6px;
    background: var(--teal); border-radius:50%;
    pointer-events:none; z-index:9999;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: opacity 0.25s var(--ease), background 0.25s var(--ease);
}
.has-custom-cursor .custom-cursor,
.has-custom-cursor .cursor-dot{ opacity: 1; }
.custom-cursor.is-active{ width:56px; height:56px; border-color: var(--teal); background: rgba(95,160,165,0.08); }
.has-custom-cursor{ cursor: none; }
.has-custom-cursor a, .has-custom-cursor button{ cursor: none; }

/* ==========================================================================
   TEXTURA DE GRANO
   ========================================================================== */
.grain-overlay{
    position: fixed; inset:0; width:100%; height:100%;
    z-index: 3000; pointer-events:none;
    opacity: 0.035; mix-blend-mode: overlay;
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
    background: var(--mustard);
    overflow: hidden;
    white-space: nowrap;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(16,25,29,0.1);
}
.marquee-track{
    display: inline-flex;
    align-items: center;
    animation: marquee-scroll 32s linear infinite;
}
.marquee-track span{
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    color: var(--navy);
    padding: 0 1.2rem;
    text-transform: uppercase;
}
.marquee-track i{
    font-style: normal;
    font-family: var(--font-slab);
    color: rgba(16,25,29,0.45);
    font-size: 1rem;
}
@keyframes marquee-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}

/* ==========================================================================
   MAGNETIC BUTTONS
   ========================================================================== */
.magnetic{ transition: transform 0.25s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); will-change: transform; }

/* ==========================================================================
   HERO GHOST WORDMARK
   ========================================================================== */
.hero-ghost{
    position:absolute; z-index:0;
    top: 50%; left:50%; transform: translate(-50%,-52%);
    font-family: var(--font-display);
    font-size: clamp(6rem, 18vw, 15rem);
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.06);
    white-space: nowrap;
    pointer-events:none;
    user-select:none;
    letter-spacing: 4px;
}

/* road draw-in */
.road-path{ stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw-road 2.6s var(--ease) 0.3s forwards; }
@keyframes draw-road{ to{ stroke-dashoffset: 0; } }

/* ==========================================================================
   SERVICIOS — LISTA EDITORIAL
   ========================================================================== */
.services-list{ border-top: 1px solid rgba(255,255,255,0.12); }
.service-row{
    display:grid;
    grid-template-columns: 70px 1fr 2fr 40px;
    align-items: center;
    gap: 2rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}
.service-row:hover{ background: rgba(255,255,255,0.03); padding-left: 1rem; padding-right: 1rem; }
.service-row .service-index{
    font-family: var(--font-display); font-size: 1.1rem; color: var(--mustard); margin:0;
}
.service-row h3{
    color:#fff; font-size: 1.5rem; margin:0; transition: color 0.3s var(--ease);
}
.service-row:hover h3{ color: var(--mustard); }
.service-row p{
    font-family: var(--font-sans); color: rgba(234,240,238,0.68); font-size: 0.95rem;
    text-transform:none; margin:0;
}
.service-arrow{
    font-size: 1.4rem; color: var(--teal); text-align:right;
    transform: translateX(-8px); opacity:0;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.service-row:hover .service-arrow{ transform: translateX(0); opacity:1; }

/* ==========================================================================
   BIG CTA
   ========================================================================== */
.big-cta{
    background: var(--paper);
    padding: 6rem 0;
    text-align:center;
}
.big-cta-link{
    display:block;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 8vw, 5.5rem);
    line-height: 1.05;
    color: var(--ink);
    text-decoration:none;
    margin: 1.2rem 0 1.4rem;
    transition: color 0.3s var(--ease);
}
.big-cta-link:hover{ color: var(--teal-deep); }
.big-cta-hint{
    font-family: var(--font-sans); font-weight:600; color: var(--text-muted); font-size: 0.95rem;
}

@media (max-width: 860px){
    .service-row{ grid-template-columns: 50px 1fr; row-gap: 0.6rem; }
    .service-row p{ grid-column: 1 / -1; }
    .service-arrow{ display:none; }
}
@media (max-width: 620px){
    .marquee-track span{ font-size: 0.9rem; padding: 0 0.8rem; }
}