/* ===== Arrca project page ===== */
.ar-sec{padding:clamp(60px,9vw,130px) var(--pad);position:relative}
.ar-wrap{max-width:1240px;margin:0 auto}
.ar-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:center}
.ar-two.rev{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.ar-kicker{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-light);margin-bottom:18px}
.ar-h{font-weight:900;font-size:clamp(34px,4.6vw,66px);line-height:.98;letter-spacing:-.035em}
.ar-h em{font-family:'Urbanist',sans-serif;font-style:normal;font-weight:900;color:var(--sky);letter-spacing:-.005em;-webkit-text-fill-color:transparent;-webkit-text-stroke:.036em currentColor;paint-order:stroke fill;text-shadow:none!important}
.ar-p{margin-top:22px;max-width:520px;font-size:clamp(15px,1.3vw,17px);line-height:1.75;color:#c9d5de}
.ar-link{display:inline-block;margin-top:26px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:var(--sky);padding:14px 22px;text-decoration:none;transition:background .3s}
.ar-link:hover{background:var(--cream)}
.ar-note{margin-top:18px;font-size:12px;color:#8ea0ad;max-width:420px;line-height:1.55}

.ar-head{padding:clamp(130px,16vw,190px) var(--pad) clamp(34px,5vw,60px);background:radial-gradient(ellipse 60% 80% at 85% 10%,rgba(240,78,62,.18),transparent 65%),radial-gradient(ellipse 50% 70% at 5% 90%,rgba(245,130,32,.14),transparent 60%),var(--navy)}
.ar-in{max-width:1240px;margin:0 auto}
.ar-head h1.t{font-size:clamp(64px,13vw,200px)}
.ar-shot-wrap{padding:0 var(--pad) clamp(60px,8vw,120px);background:var(--navy)}
.ar-shot{max-width:1360px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 40px 90px -20px rgba(0,0,0,.7),0 0 0 1px rgba(171,224,249,.14)}
.ar-shot img{width:100%;height:auto;display:block}
/* brand band */
.ar-brand{background:#fff;color:#0a1520;text-align:center;padding:clamp(60px,9vw,130px) var(--pad)}
.ar-brand img{width:min(760px,86%);height:auto;margin:0 auto}
.ar-brand .ar-p{color:#3a4a58;margin:34px auto 0;text-align:center;max-width:640px}
.ar-swatches{display:flex;justify-content:center;gap:0;margin:40px auto 0;max-width:560px;height:14px}
.ar-swatches i{flex:1;display:block}

/* website: MacBook */
.ar-web{background:radial-gradient(ellipse 60% 70% at 70% 40%,rgba(47,87,139,.35),transparent 70%),var(--navy-mid)}
.mbp{position:relative;width:100%;max-width:980px;margin:0 auto}
.mbp-lid{position:relative;background:#0c0c0e;border-radius:clamp(10px,1.8vw,20px) clamp(10px,1.8vw,20px) 6px 6px;padding:2% 2% 2.6%;box-shadow:inset 0 0 0 2px #2a2b2e,inset 0 -1px 0 #55565b}
.mbp-lid::before{content:"";position:absolute;top:0;left:50%;width:15%;height:3.4%;transform:translateX(-50%);background:#000;border-radius:0 0 10px 10px;z-index:2}
.mbp-lid::after{content:"";position:absolute;top:.9%;left:50%;width:.8%;aspect-ratio:1;transform:translateX(-50%);background:#1a2a3a;border-radius:50%;z-index:3}
.mbp-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;border-radius:3px}
.mbp-scroll{width:100%;animation:mbpScroll 52s ease-in-out infinite alternate;will-change:transform}
.mbp-scroll img{display:block;width:100%;height:auto}
.mbp-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 38%);pointer-events:none}
@keyframes mbpScroll{0%,5%{transform:translateY(0)}95%,100%{transform:translateY(var(--ty))}}
.mbp-base{position:relative;height:clamp(9px,1.7vw,17px);margin:0 -5.5%;background:linear-gradient(#e2e3e6,#b3b4b9 65%,#8d8e93);border-radius:1px 1px clamp(10px,1.8vw,20px) clamp(10px,1.8vw,20px)/1px 1px 12px 12px;box-shadow:0 26px 44px -12px rgba(0,0,0,.6)}
.mbp-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:62%;transform:translateX(-50%);background:linear-gradient(#a2a3a8,#c4c5c9);border-radius:0 0 12px 12px}

/* assistant: iPhone + WhatsApp */
.ar-bot{background:#0a1520}
.iph{position:relative;width:min(332px,84vw);margin:0 auto;border-radius:56px;padding:11px;background:linear-gradient(145deg,#8f8d88,#4a4945 40%,#8a8883 70%,#3b3a37);box-shadow:0 40px 80px -20px rgba(0,0,0,.7),0 0 0 1.5px #20201f}
.iph-in{position:relative;border-radius:46px;overflow:hidden;height:calc(min(332px,84vw) * 2.03);background:#efeae2;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;color:#111}
.iph-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:30%;height:26px;background:#000;border-radius:20px;z-index:5}
.wa-status{flex:none;height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 6px;font-size:14px;font-weight:600;background:#f6f6f6}
.wa-status svg{height:11px;width:auto;display:inline-block;margin-left:4px;vertical-align:middle}
.wa-head{flex:none;display:flex;align-items:center;gap:10px;padding:8px 14px 10px 8px;background:#f6f6f6;border-bottom:1px solid #dcdcdc}
.wa-back{width:30px;height:30px;display:grid;place-items:center;font-size:26px;color:#0a84ff;line-height:1}
.wa-av{width:36px;height:36px;border-radius:50%;background:#f8d9cf;overflow:hidden;flex:none;display:grid;place-items:center}
.wa-av img{width:78%;height:auto}
.wa-name{font-size:16px;font-weight:600;line-height:1.15}
.wa-name small{display:block;font-size:11.5px;font-weight:400;color:#6b6b6b}
.wa-chat{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 10px 14px;display:flex;flex-direction:column;gap:5px;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:#efeae2 radial-gradient(circle at 20% 30%,rgba(0,0,0,.035) 1.2px,transparent 1.6px) 0 0/22px 22px}
.wa-chat::-webkit-scrollbar{display:none}
.wa-day{align-self:center;font-size:11px;color:#54656f;background:#fff;padding:4px 10px;border-radius:7px;box-shadow:0 1px 0 rgba(0,0,0,.08);margin-bottom:4px}
.wa-m{position:relative;max-width:84%;padding:7px 9px 17px;border-radius:9px;font-size:13.4px;line-height:1.36;box-shadow:0 1px 0 rgba(0,0,0,.1);animation:waIn .28s ease-out}
.wa-m b{font-weight:700}
.wa-m time{position:absolute;right:8px;bottom:3px;font-size:10px;color:#667781}
.wa-m.in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.wa-m.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.wa-m.out time::after{content:" ✓✓";color:#53bdeb;letter-spacing:-1px}
.wa-m ul{list-style:none;margin:4px 0 2px;padding:0}.wa-m li{padding-left:12px;position:relative}.wa-m li::before{content:"•";position:absolute;left:2px}
.wa-doc{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.05);border-radius:7px;padding:8px 10px;margin:2px 0 4px}
.wa-doc i{flex:none;width:30px;height:34px;border-radius:4px;background:#e5564a;color:#fff;font-style:normal;font-size:9px;font-weight:700;display:grid;place-items:center}
.wa-doc span{font-size:12.5px;font-weight:600;line-height:1.2}.wa-doc small{display:block;font-size:10.5px;font-weight:400;color:#667781}
.wa-typing{align-self:flex-start;background:#fff;border-radius:9px;border-top-left-radius:2px;padding:11px 12px;display:flex;gap:4px;box-shadow:0 1px 0 rgba(0,0,0,.1)}
.wa-typing i{width:6px;height:6px;border-radius:50%;background:#9aa5ab;animation:waDot 1s infinite}.wa-typing i:nth-child(2){animation-delay:.15s}.wa-typing i:nth-child(3){animation-delay:.3s}
@keyframes waDot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes waIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.wa-input{flex:none;display:flex;align-items:center;gap:10px;padding:8px 10px 20px;background:#f6f6f6;border-top:1px solid #dcdcdc}
.wa-input .plus{font-size:26px;color:#111;line-height:1;width:24px;text-align:center}
.wa-input .field{flex:1;height:34px;border-radius:17px;background:#fff;border:1px solid #d6d6d6}
.wa-input .mic{width:34px;height:34px;border-radius:50%;background:#111;display:grid;place-items:center}
.wa-input .mic svg{width:15px;height:15px;fill:#fff}
.iph-bar{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:34%;height:5px;border-radius:3px;background:#111;opacity:.85;z-index:5}
.ar-replay{display:block;margin:22px auto 0;font:inherit;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.ar-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;max-width:560px}
.ar-chips span{border:1px solid rgba(171,224,249,.3);padding:7px 13px;font-size:12.5px;border-radius:99px;color:var(--cream)}
.ar-stack{margin-top:22px;font-size:13px;color:#8ea0ad}

/* mascots */
.ar-masc-band{padding:clamp(48px,7vw,100px) var(--pad);position:relative;overflow:hidden}
.ar-masc-band.tommy{background:#a4dad2;color:#0a1520}
.ar-masc-band.jimmy{background:#f58220;color:#0a1520}
.ar-masc-head{max-width:1240px;margin:0 auto 14px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.ar-masc-head h3{font-weight:900;font-size:clamp(40px,6vw,88px);letter-spacing:-.04em;line-height:.95}
.ar-masc-head p{font-weight:600;font-size:clamp(18px,2vw,26px)}
.ar-masc{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,30px);align-items:end}
.ar-masc img{width:100%;max-height:420px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 18px 18px rgba(10,21,32,.22));animation:arBob 5s ease-in-out infinite}
.ar-masc img:nth-child(2){animation-delay:-1.6s}.ar-masc img:nth-child(3){animation-delay:-3.2s}
@keyframes arBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}

@media (max-width:900px){
  .ar-two,.ar-two.rev{grid-template-columns:1fr}
  .ar-two .ar-copy{order:-1}
  .ar-masc{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.mbp-scroll,.ar-masc img,.wa-m,.wa-typing i{animation:none!important}}