/* =========================================================
   Christian De Leonibus — sub-page components
   ========================================================= */
.crumb{font-size:.8rem;color:var(--muted-d);letter-spacing:.04em;margin-bottom:.4rem}
.crumb a:hover{color:var(--gold-200)}
.hero.compact{padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(2.6rem,5vw,4rem)}
.hero.compact .hero-title{font-size:clamp(2.2rem,5vw,3.7rem)}

/* area cards */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:clamp(2rem,4vw,3rem)}
.area{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:.85fr 1.15fr;box-shadow:var(--shadow-soft);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.area:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-gold)}
.area .am{position:relative;min-height:100%}
.area .am img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.area .ab{padding:1.7rem}
.area .ic{width:46px;height:46px;border-radius:12px;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.area .ic svg{width:24px;height:24px}
.area h3{font-size:1.45rem}
.area .ab>p{color:var(--muted);font-size:.92rem;margin-top:.4rem}
.area ul{list-style:none;margin:1rem 0 0;display:grid;gap:.45rem}
.area li{position:relative;padding-left:1.3rem;font-size:.9rem;color:var(--text)}
.area li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* configurator */
.config{background:var(--ivory-2)}
.cfg{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;max-width:860px;margin:clamp(2rem,4vw,3rem) auto 0}
.cfg-steps{display:flex;border-bottom:1px solid var(--line)}
.cfg-steps .s{flex:1;padding:1rem;text-align:center;font-size:.85rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;transition:.25s}
.cfg-steps .s.active{color:var(--ink);border-color:var(--gold)}
.cfg-steps .s b{font-family:"Fraunces";color:var(--gold);margin-right:.4rem}
.cfg-body{padding:clamp(1.4rem,3vw,2.2rem)}
.cfg-panel{display:none}
.cfg-panel.show{display:block;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cfg-panel h3{font-size:1.35rem;margin-bottom:.3rem}
.cfg-panel p.sub{color:var(--muted);font-size:.9rem;margin-bottom:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.7rem}
.chip{padding:.7rem 1.1rem;border:1.5px solid var(--line);border-radius:100px;cursor:pointer;font-weight:500;font-size:.92rem;transition:.2s;user-select:none}
.chip:hover{border-color:var(--gold)}
.chip.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.cfg-field{margin-top:1.1rem}
.cfg-field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.cfg-field input{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:.95rem;background:var(--ivory)}
.cfg-field input:focus{outline:none;border-color:var(--gold)}
.cfg-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.7rem}
.cfg-summary{background:var(--ivory);border:1px dashed var(--line-gold);border-radius:12px;padding:1rem 1.2rem;font-size:.92rem;color:var(--text);margin-bottom:1.2rem}
.cfg-summary b{color:var(--ink)}

/* calculator */
.calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);max-width:900px;margin:clamp(2rem,4vw,3rem) auto 0;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden}
.calc-in{padding:clamp(1.6rem,3vw,2.4rem)}
.calc-in .row{margin-bottom:1.5rem}
.calc-in label{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.calc-in label b{color:var(--ink);font-family:"Fraunces";font-size:1.1rem;letter-spacing:0;text-transform:none}
.calc-in input[type=range]{width:100%;accent-color:var(--gold);height:6px}
.calc-seg{display:flex;gap:.5rem}
.calc-seg button{flex:1;padding:.6rem;border:1.5px solid var(--line);background:var(--ivory);border-radius:10px;cursor:pointer;font:inherit;font-size:.85rem;font-weight:600;transition:.2s}
.calc-seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.calc-out{background:var(--ink);color:#fff;padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.calc-out::before{content:"";position:absolute;top:-30%;right:-20%;width:70%;height:80%;background:radial-gradient(circle,rgba(201,162,39,.25),transparent 60%)}
.calc-out .lbl{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-200);position:relative}
.calc-out .big{font-family:"Fraunces";font-size:clamp(2.4rem,5vw,3.4rem);color:#fff;line-height:1;margin:.4rem 0;position:relative}
.calc-out .big small{font-size:1.05rem;color:var(--muted-d)}
.calc-out .det{font-size:.85rem;color:var(--muted-d);margin-top:.6rem;line-height:1.6;position:relative}
.calc-out .btn{margin-top:1.4rem;position:relative}
.calc-note{max-width:900px;margin:1rem auto 0;font-size:.78rem;color:var(--muted);text-align:center}

/* services grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:clamp(2rem,4vw,3rem)}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);border-color:var(--line-gold)}
.svc .ic{width:42px;height:42px;border-radius:11px;background:var(--ivory-2);color:var(--gold-600);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:transform .4s var(--ease),background .4s,color .4s}
.svc:hover .ic{transform:scale(1.14) rotate(-6deg);background:var(--gold);color:#fff}
.svc .ic svg{transition:transform .4s var(--ease)}
.svc:hover .ic svg{transform:scale(1.05)}
.svc .ic svg{width:22px;height:22px}
.svc h3{font-size:1.22rem;margin-bottom:.4rem;transition:color .3s}
.svc:hover h3{color:var(--gold-600)}
.svc p{color:var(--muted);font-size:.9rem}

/* timeline */
.timeline{margin-top:clamp(2rem,4vw,3rem);border-left:2px solid var(--line);padding-left:2rem;display:grid;gap:2.2rem;max-width:680px}
.tl{position:relative}
.tl::before{content:"";position:absolute;left:calc(-2rem - 9px);top:.3rem;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--ivory-2)}
.tl .yr{font-family:"Fraunces";color:var(--gold-600);font-size:1.05rem}
.tl h3{font-size:1.25rem;margin:.2rem 0 .3rem}
.tl p{color:var(--muted);font-size:.93rem;max-width:54ch}

/* values */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,3rem)}
.val{padding:1.6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:.35s}
.val:hover{border-color:var(--line-gold);transform:translateY(-4px)}
.val .ic{color:var(--gold-600);margin-bottom:.9rem}
.val .ic svg{width:26px;height:26px}
.val h3{font-size:1.18rem;margin-bottom:.4rem}
.val p{color:var(--muted);font-size:.9rem}

/* FAQ */
.faq{max-width:820px;margin:clamp(2rem,4vw,3rem) auto 0}
.qa{border-bottom:1px solid var(--line)}
.qa>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;background:none;border:0;cursor:pointer;text-align:left;font:inherit;font-size:1.1rem;font-family:"Fraunces";color:var(--ink)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.qa .ans p{padding-bottom:1.3rem;color:var(--muted);font-size:.95rem;line-height:1.6}
.qa .pl{flex:0 0 auto;width:24px;height:24px;position:relative}
.qa .pl::before,.qa .pl::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--gold)}
.qa .pl::before{width:14px;height:2px}
.qa .pl::after{width:2px;height:14px;transition:transform .3s}
.qa.open .pl::after{transform:translate(-50%,-50%) scaleY(0)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,3rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
.cmethods{display:grid;gap:1rem;align-content:start}
.cmethod{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);transition:.3s}
.cmethod:hover{border-color:var(--line-gold);transform:translateX(4px)}
.cmethod .ic{width:48px;height:48px;border-radius:50%;background:rgba(201,162,39,.12);color:var(--gold-600);border:1px solid var(--line-gold);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.3s}
.cmethod .ic svg{width:22px;height:22px}
.cmethod:hover .ic{background:rgba(201,162,39,.2)}
.cmethod .ic.wapp{background:rgba(37,211,102,.14);color:#25D366;border-color:rgba(37,211,102,.4)}
.cmethod:hover .ic.wapp{background:rgba(37,211,102,.22)}
.cmethod .ic.lkdn{background:rgba(10,102,194,.12);color:#0A66C2;border-color:rgba(10,102,194,.35)}
.cmethod:hover .ic.lkdn{background:rgba(10,102,194,.2)}
.cmethod--email{align-items:flex-start}
.cmethod--email>div{min-width:0}
.cmethod--email .ic{margin-top:.15rem}
.cmethod--email b{margin-bottom:.15rem}
.cmethod--email .email-line{display:block;font-size:.82rem;color:var(--ink);opacity:.85;margin-top:.45rem;line-height:1.3;transition:color .2s;overflow-wrap:anywhere}
.cmethod--email .email-line i{display:block;font-style:normal;font-weight:600;font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;color:var(--gold-600);opacity:1;margin-bottom:.1rem}
.cmethod--email .email-line:hover{color:var(--gold-600)}
.cmethod b{display:block;font-family:"Fraunces";font-size:1.05rem;color:var(--ink)}
.cmethod span{font-size:.88rem;color:var(--muted)}
.cform{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow-soft)}
.cform .frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cform .f{margin-bottom:1.1rem}
.cform label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.cform input,.cform textarea,.cform select{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:.95rem;background:var(--ivory)}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--gold)}
.cform textarea{min-height:120px;resize:vertical}
.cform .btn{width:100%;justify-content:center}

/* cross-link to the other world */
.crossband{padding:clamp(1rem,3vw,2.2rem) 0 0}
.crosslink{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.cl-inner{display:flex;align-items:center;gap:1.4rem;background:var(--ivory-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem 1.9rem;transition:border-color .3s,transform .3s,box-shadow .3s}
.cl-inner:hover{border-color:var(--line-gold);transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.cl-ic{width:50px;height:50px;border-radius:13px;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cl-ic svg{width:24px;height:24px}
.cl-tx{flex:1;min-width:0}
.cl-tx .k{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600)}
.cl-tx b{display:block;font-family:"Fraunces";font-weight:500;font-size:1.3rem;color:var(--ink);margin-top:.15rem}
.cl-tx p{font-size:.9rem;color:var(--muted);margin-top:.15rem}
.cl-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;color:var(--gold-600);font-weight:600;font-size:.95rem}
.cl-go svg{width:1.05em;height:1.05em}
.cl-inner:hover .cl-go svg{transform:translateX(4px);transition:transform .3s var(--ease)}
@media(max-width:640px){.cl-inner{flex-wrap:wrap;gap:1rem}.cl-go{width:100%}}

@media(max-width:860px){
  .areas,.calc,.contact-grid{grid-template-columns:1fr}
  .svc-grid,.vals{grid-template-columns:1fr 1fr}
  .area{grid-template-columns:1fr}
  .area .am{min-height:170px}
  .cform .frow{grid-template-columns:1fr}
}
@media(max-width:560px){
  .svc-grid,.vals{grid-template-columns:1fr}
  .cfg-steps .s{font-size:.72rem;padding:.7rem .25rem}
}