/* ============ CAPABILITY DETAIL — distinct page rhythms ============ */

/* shared small helpers */
.cd-lead{font-size:var(--d3);font-weight:500;letter-spacing:-.02em;line-height:1.12;max-width:22ch;}
.cd-lead em{font-family:var(--serif);font-style:italic;color:var(--k-gold);font-weight:400;}
.cd-body{color:var(--text-secondary);max-width:60ch;}

/* ---------- BRAND SYSTEMS: precise, graphic, grid-driven ---------- */
.bs-specimen{padding:clamp(3rem,8vh,7rem) 0;border-top:1px solid var(--hair);text-align:center;overflow:hidden;}
.bs-specimen__mark{font-size:clamp(6rem,26vw,22rem);font-weight:700;letter-spacing:-.05em;line-height:.8;color:var(--text-primary);}
.bs-specimen__mark span{color:var(--k-gold);}
.bs-specimen__cap{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-top:1.5rem;}
.bs-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--line-subtle);border:1px solid var(--line-subtle);border-radius:14px;overflow:hidden;}
.bs-cell{background:var(--surface-0);padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;}
.bs-cell--wide{grid-column:span 8;} .bs-cell--nar{grid-column:span 4;} .bs-cell--half{grid-column:span 6;} .bs-cell--full{grid-column:span 12;}
@media(max-width:760px){.bs-cell--wide,.bs-cell--nar,.bs-cell--half{grid-column:span 12;}}
.bs-cell__k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--k-gold);margin-bottom:1rem;}
.bs-cell h3{font-size:1.3rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.5rem;}
.bs-cell p{color:var(--text-secondary);font-size:.92rem;}
.bs-swatches{display:flex;gap:.6rem;margin-top:1rem;} .bs-swatches i{width:40px;height:40px;border-radius:8px;}
.bs-type{display:flex;align-items:baseline;gap:1rem;color:var(--text-primary);font-weight:600;margin-top:.5rem;}
.bs-subs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-subtle);border:1px solid var(--line-subtle);border-radius:12px;overflow:hidden;}
.bs-sub{background:var(--surface-0);padding:1.4rem;} .bs-sub h4{font-size:1rem;font-weight:600;margin-bottom:.4rem;} .bs-sub p{font-size:.85rem;color:var(--text-secondary);}
@media(max-width:900px){.bs-subs{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.bs-subs{grid-template-columns:1fr;}}

/* ---------- DIGITAL EXPERIENCES: technological, device-driven ---------- */
.dx-stage{padding:clamp(3rem,8vh,7rem) 0;border-top:1px solid var(--hair);}
.dx-devices{display:flex;align-items:flex-end;justify-content:center;gap:clamp(1rem,3vw,2.5rem);perspective:1400px;margin-bottom:3rem;}
.dx-device{border:1px solid var(--line-strong);border-radius:12px;background:linear-gradient(160deg,var(--surface-2),var(--surface-0));position:relative;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5);transition:transform .6s var(--ease);}
.dx-device span{position:absolute;inset:10% 7%;border-radius:5px;background:linear-gradient(180deg,rgba(0,58,155,.35),transparent);border-top:3px solid var(--k-gold);}
.dx-device--desktop{width:min(52vw,560px);aspect-ratio:16/10;} .dx-device--desktop:hover{transform:translateY(-8px) rotateX(3deg);}
.dx-device--mobile{width:min(16vw,120px);aspect-ratio:9/18;} .dx-device--mobile:hover{transform:translateY(-8px);}
@media(max-width:760px){.dx-device--mobile{display:none;} .dx-device--desktop{width:100%;}}
.dx-flow{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:center;font-weight:600;font-size:clamp(1rem,2.2vw,1.6rem);}
.dx-flow b{color:var(--text-primary);} .dx-flow i{color:var(--k-blue-soft);font-style:normal;}
.dx-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);}
.dx-sub{border-left:2px solid var(--k-blue);padding:.2rem 0 .2rem 1.2rem;}
.dx-sub h4{font-size:1.05rem;font-weight:600;margin-bottom:.3rem;} .dx-sub p{font-size:.88rem;color:var(--text-secondary);}
@media(max-width:760px){.dx-subs{grid-template-columns:1fr;}}
.dx-seq{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem;}
.dx-seq__f{aspect-ratio:3/4;border-radius:8px;background:linear-gradient(160deg,var(--surface-2),var(--surface-0));border:1px solid var(--line-strong);position:relative;}
.dx-seq__f span{position:absolute;left:.7rem;top:.7rem;font-size:.7rem;color:var(--k-gold);}
.dx-seq__f::after{content:"";position:absolute;inset:auto .7rem .7rem;height:30%;border-radius:4px;background:linear-gradient(180deg,rgba(0,58,155,.3),transparent);}
@media(max-width:640px){.dx-seq{grid-template-columns:repeat(2,1fr);}}

/* ---------- CREATIVE: fast, expressive, asymmetric ---------- */
.cr-hero{padding:clamp(2rem,5vh,4rem) 0;}
.cr-frames{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.8rem,1.6vw,1.4rem);grid-auto-rows:minmax(90px,auto);}
.cr-frame{border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(150deg,var(--k-blue-deep),var(--surface-2));border:1px solid var(--line-strong);display:flex;align-items:flex-end;padding:1rem;}
.cr-frame span{font-size:.72rem;color:var(--text-secondary);letter-spacing:.06em;}
.cr-frame::after{content:"";position:absolute;top:.8rem;right:.8rem;width:9px;height:9px;border-radius:50%;background:var(--k-gold);box-shadow:0 0 12px var(--k-gold);}
.cr-frame--a{grid-column:span 4;grid-row:span 2;} .cr-frame--b{grid-column:span 2;} .cr-frame--c{grid-column:span 2;}
.cr-frame--d{grid-column:span 3;} .cr-frame--e{grid-column:span 3;} .cr-frame--f{grid-column:span 6;grid-row:span 1;}
@media(max-width:760px){.cr-frame{grid-column:span 3 !important;grid-row:auto !important;aspect-ratio:4/3;}}
.cr-interrupt{padding:clamp(3rem,9vh,8rem) 0;text-align:center;position:relative;overflow:hidden;border-block:1px solid var(--hair);margin:clamp(3rem,6vh,5rem) 0;}
.cr-interrupt__glow{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 90% at 50% 50%,rgba(254,182,0,.12),transparent 60%),radial-gradient(70% 80% at 20% 30%,var(--k-blue-deep),transparent 60%);}
.cr-interrupt__big{position:relative;z-index:2;font-size:clamp(2.4rem,8vw,7rem);font-weight:700;letter-spacing:-.04em;line-height:.9;}
.cr-interrupt__big .serif{color:var(--k-gold);}
.cr-subs{display:flex;flex-wrap:wrap;gap:.7rem;}
.cr-subs span{font-size:.9rem;color:var(--text-secondary);border:1px solid var(--hair);border-radius:100px;padding:.55em 1.3em;transition:border-color .3s,color .3s,transform .3s var(--ease);}
.cr-subs span:hover{border-color:var(--k-gold);color:var(--text-primary);transform:translateY(-3px);}

/* ---------- GROWTH: commercial system, horizontal journey ---------- */
.gr-journey{padding:clamp(3rem,7vh,6rem) 0;border-top:1px solid var(--hair);}
.gr-track{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-subtle);border:1px solid var(--line-subtle);border-radius:14px;overflow:hidden;position:relative;}
@media(max-width:820px){.gr-track{grid-template-columns:1fr;}}
.gr-stage{background:var(--surface-0);padding:clamp(1.6rem,3vw,2.4rem);position:relative;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;transition:background .4s;}
.gr-stage:hover{background:var(--surface-2);}
.gr-stage__n{font-size:.7rem;letter-spacing:.16em;color:var(--k-gold);}
.gr-stage__h{font-size:1.4rem;font-weight:600;letter-spacing:-.01em;margin:.6rem 0;}
.gr-stage__d{font-size:.88rem;color:var(--text-secondary);}
.gr-stage__arrow{position:absolute;right:-11px;top:50%;transform:translateY(-50%);z-index:3;color:var(--k-blue-soft);font-size:1.2rem;background:var(--surface-0);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
@media(max-width:820px){.gr-stage__arrow{right:50%;top:auto;bottom:-11px;transform:translateX(50%) rotate(90deg);}}
.gr-stage:last-child .gr-stage__arrow{display:none;}
.gr-subs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.8rem,1.6vw,1.2rem);}
.gr-sub{border-top:2px solid var(--k-blue);padding-top:1rem;} .gr-sub h4{font-size:.98rem;font-weight:600;margin-bottom:.3rem;} .gr-sub p{font-size:.82rem;color:var(--text-secondary);}
@media(max-width:900px){.gr-subs{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.gr-subs{grid-template-columns:1fr;}}
.gr-honest{margin-top:2.5rem;padding:1.4rem 1.6rem;border:1px dashed var(--line-strong);border-radius:12px;color:var(--text-secondary);font-size:.92rem;max-width:66ch;}
.gr-honest b{color:var(--text-primary);font-weight:600;}
