/* Hideworks Glove Co. — site styles */

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bone:#F4F1EA;
      --bone-alt:#EBE7DD;
      --white:#FFFFFF;
      --ink:#1C1C2E;
      --ink-soft:#26263B;
      --blue:#3E6F94;
      --blue-light:#7FB3D5;
      --blue-deep:#2C5473;
      --muted:#5C6169;
      --muted-light:#8A8F97;
      --brass:#8A6D3B;
      --line:rgba(28,28,46,0.12);
      --line-soft:rgba(28,28,46,0.07);
    }
    html{scroll-behavior:smooth}
    body{background-color:var(--bone);color:var(--ink);font-family:'Crimson Pro',Georgia,serif;font-weight:300;overflow-x:hidden}
    body::before{content:'';position:fixed;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(28,28,46,0.012) 3px,rgba(28,28,46,0.012) 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(28,28,46,0.012) 3px,rgba(28,28,46,0.012) 4px);pointer-events:none;z-index:0}

    /* NAV */
    nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1rem 3rem;background:rgba(244,241,234,0.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);animation:fadeDown 0.8s ease both}
    .nav-logo{text-decoration:none;line-height:1}
    .nav-logo-word{font-family:'Barlow','Arial Black',Arial,sans-serif;font-weight:900;font-size:1.25rem;display:flex;align-items:baseline}
    .nav-hide{color:var(--blue);position:relative;z-index:1}
    .nav-works{color:var(--ink);margin-left:-0.27em;position:relative;z-index:2}
    .nav-sub{font-family:'Crimson Pro',serif;font-weight:400;font-size:0.5rem;letter-spacing:0.4em;color:var(--muted-light);text-transform:uppercase;margin-top:1px}
    .nav-links{display:flex;gap:2rem;list-style:none}
    .nav-links a{color:var(--muted);text-decoration:none;font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;transition:color 0.2s}
    .nav-links a:hover{color:var(--blue)}

    /* HERO */
    .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:8rem 2rem 4rem;overflow:hidden}
    .hero::after{content:'';position:absolute;width:700px;height:700px;border-radius:50%;border:1px solid rgba(62,111,148,0.1);box-shadow:0 0 0 40px rgba(62,111,148,0.05),0 0 0 80px rgba(62,111,148,0.035),0 0 0 130px rgba(62,111,148,0.02);pointer-events:none;animation:pulse 8s ease-in-out infinite}
    .hero-eyebrow{font-weight:400;font-family:'Crimson Pro',serif;margin-top:0;font-size:0.8rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--blue);margin-bottom:1.5rem;animation:fadeUp 0.9s 0.3s ease both}
    .hero-title{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:clamp(3rem,8vw,6.5rem);line-height:1.05;color:var(--ink);max-width:800px;animation:fadeUp 0.9s 0.5s ease both}
    .hero-title span{color:var(--blue);display:block}
    .hero-sub{margin-top:1.8rem;font-size:1.2rem;color:var(--muted);max-width:480px;line-height:1.7;animation:fadeUp 0.9s 0.7s ease both}
    .hero-divider{margin:2.5rem auto;width:60px;height:1px;background:var(--blue);position:relative;animation:fadeUp 0.9s 0.9s ease both}
    .hero-divider::before,.hero-divider::after{content:'';position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:var(--blue);transform:translateY(-50%)}
    .hero-divider::before{left:-8px}
    .hero-divider::after{right:-8px}
    .hero-cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;animation:fadeUp 0.9s 1.1s ease both}

    /* BUTTONS */
    .btn{padding:0.85rem 2.2rem;font-family:'Crimson Pro',serif;font-size:0.85rem;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:all 0.25s;cursor:pointer;border:none}
    .btn-primary{background:var(--ink);color:var(--bone);font-weight:400}
    .btn-primary:hover{background:var(--blue);transform:translateY(-1px);box-shadow:0 6px 18px rgba(28,28,46,0.18)}
    .btn-outline{background:transparent;color:var(--ink);border:1px solid rgba(28,28,46,0.3)}
    .btn-outline:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}

    /* SECTIONS */
    section{position:relative;z-index:1;padding:7rem 2rem}
    .si{max-width:1100px;margin:0 auto}
    .slabel{font-size:0.75rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--blue);margin-bottom:0.8rem}
    .stitle{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--ink);margin-bottom:1rem}
    .stitle em{font-style:italic;color:var(--blue)}
    .srule{width:50px;height:2px;background:var(--blue);margin-bottom:3rem}

    /* SERVICES */
    #services{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .spgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
    .spc{position:relative;overflow:hidden;border:1px solid var(--line);transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s}
    .spc:hover{border-color:rgba(62,111,148,0.5);transform:translateY(-3px);box-shadow:0 10px 28px rgba(28,28,46,0.1)}
    .spc picture{display:block}
    .spc img{width:100%;height:260px;object-fit:cover;display:block;filter:saturate(1.02);transition:filter 0.4s,transform 0.4s}
    .spc:hover img{filter:saturate(1.1) brightness(1.05);transform:scale(1.03)}
    .spl{position:absolute;bottom:0;left:0;right:0;padding:2.2rem 1.5rem 1.2rem;background:linear-gradient(to top,rgba(18,14,10,0.94) 0%,rgba(18,14,10,0.55) 45%,transparent 100%)}
    .spl h3{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:#FFFFFF;margin-bottom:0.25rem}
    .spl p{font-size:0.9rem;color:#DCD7CC}
    .ssg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
    .sc{background:var(--bone);padding:2rem 1.5rem;transition:background 0.3s;text-align:center}
    .sc:hover{background:var(--bone-alt)}
    .sc-icon{font-size:1.8rem;margin-bottom:0.8rem}
    .sc-name{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:0.4rem}
    .sc-desc{font-size:0.9rem;color:var(--muted);line-height:1.5}

    /* PRICING */
    #pricing{background:var(--bone)}
    .p-intro{font-size:1.05rem;color:var(--muted);line-height:1.75;max-width:620px;margin-bottom:3rem}
    .p-intro strong{color:var(--ink);font-weight:500}
    .p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:3rem}
    .pc{background:var(--white);padding:2rem;transition:background 0.3s;position:relative}
    .pc:hover{background:#FBFAF7}
    .pc-name{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:0.3rem}
    .pc-tag{font-size:0.9rem;color:var(--muted);margin-bottom:1.2rem;line-height:1.5;font-style:italic}
    .pc-price{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:700;color:var(--blue);margin-bottom:0.2rem;line-height:1}
    .pc-price span{font-size:1rem;color:var(--muted-light);font-family:'Crimson Pro',serif;font-weight:300}
    .pc-eta{font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--brass);margin-bottom:1.2rem}
    .pc-rule{width:30px;height:1px;background:var(--line);margin-bottom:1.2rem}
    .pc-list{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
    .pc-list li{font-size:0.92rem;color:var(--muted);padding-left:1.2rem;position:relative;line-height:1.45}
    .pc-list li::before{content:'—';position:absolute;left:0;color:var(--blue);font-size:0.8rem}
    /* Featured card — inverted for emphasis */
    .pc.featured{background:var(--ink)}
    .pc.featured:hover{background:var(--ink-soft)}
    .pc-badge{display:inline-block;font-size:0.65rem;letter-spacing:0.25em;text-transform:uppercase;background:var(--blue);color:#FFFFFF;padding:0.22rem 0.65rem;margin-bottom:1rem;font-weight:500}
    .pc.featured .pc-name{color:var(--bone)}
    .pc.featured .pc-tag{color:#A9AEB8}
    .pc.featured .pc-price{color:var(--blue-light)}
    .pc.featured .pc-price span{color:#8A8F97}
    .pc.featured .pc-eta{color:#C4A265}
    .pc.featured .pc-rule{background:rgba(255,255,255,0.2)}
    .pc.featured .pc-list li{color:#B4B9C2}
    .pc.featured .pc-list li::before{color:var(--blue-light)}

    /* ADD-ONS */
    .ao-wrap{margin-bottom:3rem}
    .ao-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:1.5rem}
    .ao-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line)}
    .ao-table th{font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--blue);text-align:left;padding:0.8rem 1rem;border-bottom:1px solid var(--line)}
    .ao-table td{font-size:0.95rem;color:var(--muted);padding:0.75rem 1rem;border-bottom:1px solid var(--line-soft)}
    .ao-table tr:last-child td{border-bottom:none}
    .ao-table tr:hover td{color:var(--ink);background:#FBFAF7}
    .ao-price{color:var(--ink);font-family:'Playfair Display',serif;white-space:nowrap}
    .ao-note{margin-top:1rem;font-size:0.9rem;color:var(--muted)}

    /* PRICING NOTES */
    .pn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-bottom:3rem}
    .pn{border:1px solid var(--line);background:var(--white);padding:1.8rem;position:relative}
    .pn-icon{font-size:1.5rem;margin-bottom:0.8rem}
    .pn-title{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:0.5rem}
    .pn-body{font-size:0.92rem;color:var(--muted);line-height:1.6}
    .pn-body strong{color:var(--blue);font-weight:500}

    .pn.jays{border-color:rgba(62,111,148,0.35);background:rgba(62,111,148,0.05)}
    .pn.jays .pn-intro{font-size:0.88rem;color:var(--muted);font-style:italic;margin-bottom:1rem;line-height:1.55}
    .pn.jays .pn-tracks{display:flex;flex-direction:column;gap:0.7rem;margin-bottom:0.9rem}
    .pn.jays .pn-track{font-size:0.9rem;color:var(--muted);padding-left:1.1rem;position:relative;line-height:1.45}
    .pn.jays .pn-track::before{content:'—';position:absolute;left:0;color:var(--blue);font-size:0.8rem}
    .pn.jays .pn-track strong{color:var(--ink);font-weight:500}
    .pn.jays .pn-limit{font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--brass);margin-top:0.5rem}

    .p-tax{font-size:0.85rem;color:var(--muted-light);text-align:center;margin-top:1rem;letter-spacing:0.05em}

    /* PRODUCTS */
    #products{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-top:1rem}
    .prod-photo{margin:-3rem -2.5rem 2rem;border-bottom:1px solid var(--line)}
    .prod-photo img{width:100%;height:230px;object-fit:cover;display:block}
    .prod-card{border:1px solid var(--line);padding:3rem 2.5rem;position:relative;overflow:hidden;transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s;background:var(--bone)}
    .prod-card:hover{border-color:rgba(62,111,148,0.45);transform:translateY(-3px);box-shadow:0 10px 28px rgba(28,28,46,0.08)}
    .prod-badge{display:inline-block;font-size:0.7rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--blue);border:1px solid rgba(62,111,148,0.4);padding:0.25rem 0.75rem;margin-bottom:1.5rem}
    .prod-name{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--ink);margin-bottom:0.4rem}
    .prod-type{font-size:0.85rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--brass);margin-bottom:1.5rem}
    .prod-desc{font-size:1.05rem;color:var(--muted);line-height:1.75}
    .prod-corner{position:absolute;bottom:1.5rem;right:1.5rem;font-size:3rem;opacity:0.08}

    /* FAQ */
    #glovecare{background:var(--bone-alt)}
    .gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
    .gc-card{border:1px solid var(--line);background:var(--white);text-decoration:none;display:flex;flex-direction:column;transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s}
    .gc-card:hover{border-color:rgba(62,111,148,0.5);transform:translateY(-3px);box-shadow:0 10px 28px rgba(28,28,46,0.08)}
    .gc-card img{width:100%;height:170px;object-fit:cover;display:block}
    .gc-body{padding:1.4rem}
    .gc-body h3{font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:0.5rem;line-height:1.3}
    .gc-body p{font-size:0.92rem;color:var(--muted);line-height:1.55}
    .gc-all{display:inline-block;margin-top:2.5rem;font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(62,111,148,0.35);padding-bottom:3px}
    .gc-all:hover{border-color:var(--blue)}
    #faq{background:var(--bone)}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;background:var(--white);border:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);overflow:hidden}
    .faq-item:nth-child(even){border-right:none}
    .faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;padding:1.7rem 1.9rem;gap:1rem;text-align:left;color:var(--ink);font-family:'Playfair Display',serif;font-size:1.02rem;font-weight:700;transition:color 0.2s}
    .faq-q:hover{color:var(--blue)}
    .faq-icon{flex-shrink:0;font-size:1.2rem;color:var(--blue);transition:transform 0.3s;line-height:1}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s ease;padding:0 1.9rem;font-size:1rem;color:var(--muted);line-height:1.75}
    .faq-item.open .faq-a{max-height:320px;padding:0 1.9rem 1.7rem}
    .faq-a a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(62,111,148,0.35)}
    .faq-a a:hover{border-color:var(--blue)}

    /* ABOUT — inverted band */
    #about{background:var(--ink);padding:5.5rem 2rem;text-align:center}
    #about .slabel{color:var(--blue-light)}
    #about .stitle{color:var(--bone)}
    #about .stitle em{color:var(--blue-light)}
    #about .srule{margin:1rem auto 0;background:var(--blue-light)}
    .about-text{max-width:650px;margin:2rem auto 0;font-size:1.15rem;line-height:1.85;color:#B4B9C2}

    /* CONTACT */
    #contact{background:var(--bone)}
    .cl{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start}
    .c-blurb{font-size:1.1rem;color:var(--muted);line-height:1.75;margin-bottom:2rem}
    .c-email{display:inline-block;font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(62,111,148,0.35);padding-bottom:2px;transition:border-color 0.2s}
    .c-email:hover{border-color:var(--blue)}
    .cf{border:1px solid var(--line);background:var(--white);padding:2.5rem;position:relative;box-shadow:0 4px 20px rgba(28,28,46,0.04)}
    .cf::before,.cf::after{content:'';position:absolute;width:20px;height:20px;border-color:var(--blue);border-style:solid;opacity:0.55}
    .cf::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
    .cf::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
    .frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
    .fg{margin-bottom:1.2rem;display:flex;flex-direction:column}
    .fg label{font-size:0.72rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--blue);margin-bottom:0.4rem}
    .rs{color:var(--brass)}
    .fg input,.fg select,.fg textarea{background:var(--bone);border:1px solid var(--line);color:var(--ink);font-family:'Crimson Pro',serif;font-size:1rem;padding:0.65rem 0.9rem;border-radius:1px;outline:none;transition:border-color 0.2s,background 0.2s;width:100%}
    .fg input::placeholder,.fg textarea::placeholder{color:var(--muted-light)}
    .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);background:var(--white)}
    .fg select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233E6F94' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.9rem center;padding-right:2.5rem}
    .fg textarea{resize:vertical;min-height:100px}
    .fnote{font-size:0.8rem;color:var(--muted-light);margin-bottom:1.5rem}
    .fsub{width:100%;padding:0.9rem;background:var(--ink);color:var(--bone);font-family:'Crimson Pro',serif;font-size:0.85rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;border:none;border-radius:2px;cursor:pointer;transition:background 0.2s,transform 0.2s,box-shadow 0.2s}
    .fsub:hover{background:var(--blue);transform:translateY(-1px);box-shadow:0 6px 18px rgba(28,28,46,0.18)}
    .fsucc{display:none;text-align:center;padding:2rem}
    .fsucc .ck{font-size:2.5rem;margin-bottom:1rem}
    .fsucc p{color:var(--muted);font-size:1.05rem;line-height:1.7}
    .fsucc strong{color:var(--blue)}

    /* FOOTER */
    footer{position:relative;z-index:1;background:var(--ink);padding:2.2rem 4rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
    .fl{font-family:'Barlow',sans-serif;font-weight:900;font-size:1rem;display:flex;align-items:baseline}
    .fl-h{color:var(--blue-light)}
    .fl-w{color:var(--bone);margin-left:-0.18em}
    .footer-offer{background:none;border:1px solid rgba(244,241,234,0.3);color:var(--bone);font-family:'Crimson Pro',serif;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;padding:0.5rem 1.1rem;border-radius:2px;cursor:pointer;transition:all 0.2s}
    .footer-offer:hover{border-color:var(--blue-light);color:var(--blue-light)}
    .fc{font-size:0.8rem;letter-spacing:0.1em;color:#8A8F97}

    /* POPUP */
    .popup-overlay{position:fixed;inset:0;background:rgba(28,28,46,0.55);z-index:999;opacity:0;pointer-events:none;transition:opacity 0.4s ease;backdrop-filter:blur(4px)}
    .popup-overlay.active{opacity:1;pointer-events:all}
    .popup-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-54%);z-index:1000;background:var(--white);border:1px solid var(--line);box-shadow:0 24px 60px rgba(28,28,46,0.25);padding:2.6rem 2.6rem 2.2rem;max-width:500px;width:92%;max-height:90vh;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.4s ease,transform 0.4s ease}
    .popup-box::before,.popup-box::after{content:'';position:absolute;width:22px;height:22px;border-color:var(--blue);border-style:solid;opacity:0.7}
    .popup-box::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
    .popup-box::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
    .popup-box.active{opacity:1;pointer-events:all;transform:translate(-50%,-50%)}
    .popup-tag{display:inline-block;font-size:0.65rem;letter-spacing:0.28em;text-transform:uppercase;background:var(--blue);color:#FFFFFF;padding:0.32rem 0.8rem;font-weight:500;margin-bottom:1.1rem}
    .popup-title{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--ink);margin-bottom:0.5rem;line-height:1.25}
    .popup-intro{font-size:0.92rem;color:var(--muted);font-style:italic;margin-bottom:1.6rem;line-height:1.55}
    .popup-tracks{display:flex;flex-direction:column;gap:0.9rem;margin-bottom:1.4rem}
    .popup-offer{border:1px solid rgba(62,111,148,0.3);background:rgba(62,111,148,0.06);padding:1.1rem 1.2rem}
    .popup-offer-head{font-family:'Playfair Display',serif;font-size:1.12rem;font-weight:700;color:var(--blue);line-height:1.25;margin-bottom:0.35rem}
    .popup-offer-body{font-size:0.88rem;color:var(--muted);line-height:1.5}
    .popup-offer-body strong{color:var(--ink);font-weight:500}
    .popup-limit{font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--brass);margin-bottom:1.6rem;text-align:center}
    .popup-actions{display:flex;gap:0.7rem}
    .popup-actions .btn{flex:1;text-align:center;font-size:0.78rem;padding:0.8rem 1rem}
    .popup-close-x{position:absolute;top:0.9rem;right:1.1rem;background:none;border:none;color:var(--muted-light);font-size:1.4rem;cursor:pointer;line-height:1;transition:color 0.2s}
    .popup-close-x:hover{color:var(--ink)}

    @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeDown{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}
    @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:0.7}}
    .reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease}
    .reveal.visible{opacity:1;transform:translateY(0)}

    @media(max-width:900px){.cl{grid-template-columns:1fr;gap:2.5rem}.faq-grid{grid-template-columns:1fr}.faq-item{border-right:none}}
    @media(max-width:800px){nav{padding:1rem 1.5rem}.nav-links{gap:1rem;font-size:0.75rem}.spgrid{grid-template-columns:1fr}.spc img{height:220px}.frow{grid-template-columns:1fr}.p-grid{grid-template-columns:1fr}footer{flex-direction:column;text-align:center;padding:2rem}}
  
    /* ── PAGE SHELL ── */
    .wrap{max-width:1100px;margin:0 auto;padding:0 2rem}
    .page-head{padding:9rem 2rem 3rem;border-bottom:1px solid var(--line);background:var(--white)}
    .crumb{font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted-light);margin-bottom:1.2rem}
    .crumb a{color:var(--blue);text-decoration:none}
    .crumb a:hover{text-decoration:underline}
    .crumb span{margin:0 0.5rem;opacity:0.5}
    .page-title{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;color:var(--ink);max-width:20ch;animation:fadeUp 0.7s ease both}
    .page-lede{margin-top:1.4rem;font-size:1.2rem;line-height:1.7;color:var(--muted);max-width:60ch;animation:fadeUp 0.7s 0.15s ease both}

    /* ── ARTICLE ── */
    .article-shell{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:4rem;padding:4rem 2rem 6rem;max-width:1100px;margin:0 auto;align-items:start}
    .prose{max-width:68ch;font-size:1.08rem;line-height:1.8;color:var(--muted)}
    .prose > *:first-child{margin-top:0}
    .prose h2{font-family:'Playfair Display',serif;font-weight:700;font-size:1.75rem;color:var(--ink);margin:3rem 0 1rem;line-height:1.25}
    .prose h3{font-family:'Playfair Display',serif;font-weight:700;font-size:1.2rem;color:var(--ink);margin:2.2rem 0 0.7rem}
    .prose p{margin-bottom:1.3rem}
    .prose strong{color:var(--ink);font-weight:500}
    .prose em{font-style:italic}
    .prose ul,.prose ol{margin:0 0 1.5rem 0;padding-left:0;list-style:none}
    .prose ol{counter-reset:n}
    .prose li{position:relative;padding-left:1.6rem;margin-bottom:0.6rem}
    .prose ul li::before{content:'';position:absolute;left:0.15rem;top:0.72em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
    .prose ol li{counter-increment:n}
    .prose ol li::before{content:counter(n) '.';position:absolute;left:0;color:var(--blue);font-weight:500}
    .prose table{width:100%;border-collapse:collapse;margin:1.8rem 0;background:var(--white);border:1px solid var(--line);font-size:0.97rem}
    .prose th{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--blue);text-align:left;padding:0.8rem 1rem;border-bottom:1px solid var(--line);font-weight:500}
    .prose td{padding:0.75rem 1rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
    .prose tbody tr:last-child td{border-bottom:none}
    .prose tbody tr:hover td{background:#FBFAF7;color:var(--ink)}
    .prose hr{border:none;border-top:1px solid var(--line);margin:3rem 0}
    .prose a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(62,111,148,0.35)}
    .prose a:hover{border-color:var(--blue)}
    .prose blockquote{border-left:2px solid var(--blue);padding-left:1.2rem;margin:1.8rem 0;font-style:italic;color:var(--ink)}

    .hero-figure{margin:0 0 3rem;border:1px solid var(--line);overflow:hidden;background:var(--white)}
    .hero-figure img{width:100%;height:340px;object-fit:cover;display:block}

    /* ── SIDEBAR ── */
    .aside{position:sticky;top:6.5rem;font-size:0.92rem}
    .aside-box{border:1px solid var(--line);background:var(--white);padding:1.5rem;margin-bottom:1.5rem}
    .aside-title{font-size:0.68rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem}
    .aside-links{list-style:none;display:flex;flex-direction:column;gap:0.75rem}
    .aside-links a{color:var(--muted);text-decoration:none;line-height:1.4;transition:color 0.2s;display:block}
    .aside-links a:hover{color:var(--blue)}
    .aside-links a.current{color:var(--ink);font-weight:500;border-left:2px solid var(--blue);padding-left:0.7rem;margin-left:-0.7rem}
    .aside-cta{border:1px solid rgba(62,111,148,0.3);background:rgba(62,111,148,0.05);padding:1.5rem}
    .aside-cta p{color:var(--muted);line-height:1.6;margin-bottom:1rem;font-size:0.92rem}
    .aside-cta .btn{display:block;text-align:center;font-size:0.72rem;padding:0.7rem}

    /* ── END CTA ── */
    .end-cta{background:var(--ink);padding:4.5rem 2rem;text-align:center}
    .end-cta h2{font-family:'Playfair Display',serif;font-weight:700;font-size:2rem;color:var(--bone);margin-bottom:0.8rem}
    .end-cta h2 em{font-style:italic;color:var(--blue-light)}
    .end-cta p{color:#B4B9C2;font-size:1.08rem;line-height:1.7;max-width:52ch;margin:0 auto 2rem}
    .end-cta .btn-primary{background:var(--blue);color:#fff}
    .end-cta .btn-primary:hover{background:var(--blue-light);color:var(--ink)}
    .end-cta .btn-outline{color:var(--bone);border-color:rgba(244,241,234,0.35)}
    .end-cta .btn-outline:hover{color:var(--blue-light);border-color:var(--blue-light)}
    .cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

    /* ── INDEX GRID ── */
    .guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;padding:0 0 5rem}
    .guide-card{border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column;text-decoration:none;transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s}
    .guide-card:hover{border-color:rgba(62,111,148,0.5);transform:translateY(-3px);box-shadow:0 10px 28px rgba(28,28,46,0.08)}
    .guide-card img{width:100%;height:190px;object-fit:cover;display:block}
    .guide-card-body{padding:1.6rem}
    .guide-card h2{font-family:'Playfair Display',serif;font-weight:700;font-size:1.2rem;color:var(--ink);margin-bottom:0.6rem;line-height:1.3}
    .guide-card p{color:var(--muted);font-size:0.95rem;line-height:1.6}
    .guide-card .more{display:inline-block;margin-top:1rem;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--blue)}

    @media(max-width:900px){
      .article-shell{grid-template-columns:1fr;gap:2.5rem;padding:2.5rem 1.5rem 4rem}
      .aside{position:static}
      .page-head{padding:7rem 1.5rem 2.5rem}
      .hero-figure img{height:240px}
    }
    @media(max-width:800px){
      nav{padding:1rem 1.5rem}
      .nav-links{gap:0.9rem;font-size:0.72rem}
      footer{flex-direction:column;text-align:center;padding:2rem}
    }