/* ==============================================================
   PassportLens — landing page (UPS-style brown/gold, ASTA-style motion)
   Loads after theme.css.
   ============================================================== */

section{position:relative; padding-block:88px;}
@media (max-width:760px){ section{padding-block:60px;} }

/* ---------- motion: initial states (only when JS + motion allowed) ---------- */
html.anim [data-reveal] > *{opacity:0; transform:translateY(22px);}
html.anim .hero .w{opacity:0; transform:translateY(38px) rotate(2deg); display:inline-block;}
html.anim [data-hero="kicker"],html.anim [data-hero="sub"],html.anim [data-hero="cta"],html.anim [data-hero="stats"],html.anim [data-hero="task"]{opacity:0; transform:translateY(18px);}
html.anim [data-f="card"]{opacity:0; transform:translateY(30px) scale(.96);}
html.anim [data-f="photo"]{opacity:0;}
html.anim [data-f="corner"]{opacity:0; transform:scale(.4);}
html.anim [data-f="label"]{opacity:0; transform:translateX(-12px);}
html.anim [data-f="stamp"]{opacity:0; transform:scale(1.6) rotate(-14deg);}
html.anim [data-f="meta"]{opacity:0;}
html.anim .draw{visibility:hidden;}
html.anim.motion-ready .draw{visibility:visible;}
.hero .w{display:inline-block;}

/* ---------- nav (dark brown, UPS-style) ---------- */
.nav{position:sticky; top:0; z-index:50; background:var(--navy); color:#fff; border-bottom:1px solid rgba(255,255,255,.08);}
.nav-inner{display:flex; align-items:center; gap:28px; height:72px;}
.nav .brand.on-dark .brand-name{color:#fff;}
.nav-links{display:flex; gap:24px; margin-left:auto;}
.nav-links a{font-weight:600; font-size:15px; color:rgba(255,255,255,.82); padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;}
.nav-links a:hover{color:#fff; border-bottom-color:var(--gold);}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-signin{font-weight:600; font-size:15px; color:#fff;}
.nav-signin:hover{color:var(--gold);}
.nav-toggle{display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.3); border-radius:10px; background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.nav-toggle span{display:block; width:18px; height:2px; background:#fff; border-radius:2px;}
@media (max-width:900px){
  .nav-links{display:none; position:absolute; top:72px; left:0; right:0; background:var(--navy); border-bottom:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow); flex-direction:column; gap:0; padding:8px 24px 16px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:16px;}
  .nav-toggle{display:flex;}
  .nav-signin{display:none;}
}
@media (max-width:480px){ .nav-cta .btn{display:none;} .nav-cta{margin-left:auto;} }

/* ---------- hero (dark band + glow) ---------- */
.hero{background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff; padding-block:64px 0; overflow:hidden;}
.glow{position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.55;}
.glow.g1{width:640px; height:640px; right:-160px; top:-220px; background:radial-gradient(circle, rgba(255,181,0,.55), rgba(255,181,0,0) 65%);}
.glow.g2{width:520px; height:520px; left:-200px; bottom:-120px; background:radial-gradient(circle, rgba(255,140,0,.28), rgba(255,140,0,0) 65%);}
.glow.g3{width:700px; height:400px; left:50%; top:-120px; transform:translateX(-50%); background:radial-gradient(circle, rgba(255,181,0,.35), rgba(255,181,0,0) 65%);}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; z-index:1; padding-bottom:110px;}
.kicker.on-dark{color:var(--gold);} .kicker.on-dark::before{background:var(--gold);}
.hero h1{color:#fff; font-size:clamp(38px,5.4vw,66px); margin-top:20px; letter-spacing:-.025em; line-height:1.06;}
.hero h1 .accent{color:var(--gold);}
.hero-rule{width:220px; height:6px; margin-top:18px; display:block;}
.hero-sub{font-size:19px; color:rgba(255,255,255,.78); max-width:56ch; margin-top:22px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;}
.hero-cta.center{justify-content:center;}
.hero-stats{display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:32px;}
.hero-stats div{display:flex; flex-direction:column;}
.hero-stats b{font-family:var(--font-head); font-size:30px; font-weight:800; color:var(--gold); line-height:1;}
.hero-stats span{font-size:13px; color:rgba(255,255,255,.7); margin-top:4px;}

/* the frame */
.frame{width:min(100%,380px); margin-left:auto; position:relative; z-index:1;}
.frame-card{position:relative; background:#fff; border-radius:var(--r-lg); padding:16px; box-shadow:0 30px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);}
.frame-photo{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:5/7; background:#efe9e2;}
.frame-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block;}
.frame-guides{position:absolute; left:16px; top:16px; width:calc(100% - 32px); height:auto; aspect-ratio:5/7; pointer-events:none;}
.corner{position:absolute; width:26px; height:26px; border:3px solid var(--gold); pointer-events:none;}
.corner.tl{left:6px; top:6px; border-right:0; border-bottom:0; border-radius:8px 0 0 0;}
.corner.tr{right:6px; top:6px; border-left:0; border-bottom:0; border-radius:0 8px 0 0;}
.corner.bl{left:6px; bottom:6px; border-right:0; border-top:0; border-radius:0 0 0 8px;}
.corner.br{right:6px; bottom:6px; border-left:0; border-top:0; border-radius:0 0 8px 0;}
.frame-label{position:absolute; left:28px; top:44%; background:var(--navy); color:#fff; font-size:12px; font-weight:700; padding:6px 10px; border-radius:var(--r-pill); box-shadow:var(--shadow);}
.frame-label.two{top:auto; bottom:64px;}
.stamp{position:absolute; right:26px; bottom:34px; background:var(--gold); color:var(--navy); font-family:var(--font-head); font-weight:800; font-size:16px; padding:10px 16px; border-radius:var(--r-pill); box-shadow:0 10px 24px rgba(0,0,0,.25); transform-origin:center;}
.frame-meta{margin-top:12px; text-align:center; font-size:13px; color:rgba(255,255,255,.7); font-weight:600;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:36px; padding-bottom:96px;}
  .frame{margin-left:0; width:min(100%,340px);}
}

/* task box (overlaps the hero bottom, UPS "Tracking" style) */
.taskbox{position:relative; z-index:2; background:#fff; color:var(--text); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:26px 28px; margin-bottom:-70px;}
.taskbox label{display:flex; flex-direction:column; gap:4px; margin-bottom:14px;}
.taskbox label b{font-family:var(--font-head); font-size:22px; color:var(--navy);}
.taskbox label span{font-size:14px; color:var(--text-2);}
.task-row{display:flex; gap:10px;}
.task-row .input{flex:1; padding:14px 16px; font-size:16px;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center;}
.chips span{display:contents;}
.chips a{font-size:13.5px; font-weight:600; color:var(--navy); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 12px; transition:background .15s, border-color .15s;}
.chips a:hover{background:var(--gold-soft); border-color:var(--gold-line);}
.chips > a:last-child{background:transparent; border:0; color:var(--gold-2); text-decoration:underline; text-underline-offset:3px;}
@media (max-width:640px){ .task-row{flex-direction:column;} .taskbox{padding:20px;} }

/* ---------- quick cards ---------- */
.quick{padding-block:110px 40px; background:var(--bg-2);}
.quick-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.qcard{display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:14px; align-items:center; padding:20px 22px; color:var(--text);}
.qcard .qico{grid-row:1 / span 2; width:48px; height:48px; border-radius:14px; background:var(--gold-soft); color:var(--navy); display:flex; align-items:center; justify-content:center;}
.qcard .qico svg,.who-ico svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.qcard b{font-family:var(--font-head); font-size:17px; color:var(--navy);}
.qcard span:not(.qico){font-size:13.5px; color:var(--text-2);}
.qcard i{grid-row:1 / span 2; font-style:normal; font-weight:800; color:var(--gold-2); font-size:20px;}
@media (max-width:860px){ .quick-grid{grid-template-columns:1fr;} .quick{padding-top:96px;} }

/* ---------- how ---------- */
.how{background:var(--bg-2);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.step{padding:28px; position:relative;}
.step-ico{width:56px; height:56px; stroke:var(--navy); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.step .sn{position:absolute; top:22px; right:22px; width:34px; height:34px; border-radius:50%; background:var(--gold); color:var(--navy); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:15px;}
.step h3{font-size:21px; margin-top:16px;}
.step p{color:var(--text-2); margin-top:10px; font-size:15.5px;}
.step p b{color:var(--navy);}
@media (max-width:860px){ .steps{grid-template-columns:1fr;} }

/* ---------- showcase ---------- */
.showcase{background:#fff;}
.showcase-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.showcase-copy h2{font-size:clamp(26px,3.2vw,38px); margin-top:14px;}
.showcase-copy p{color:var(--text-2); font-size:17px; margin-top:14px;}
.ticks{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px;}
.ticks li{position:relative; padding-left:30px; color:var(--text); font-size:15.5px;}
.ticks li::before{content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:var(--gold-soft); color:var(--gold-2); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.ba{position:relative; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); user-select:none; touch-action:none; background:#fff; border:1px solid var(--line);}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.ba .after-img{clip-path:inset(0 0 0 50%);}
.ba-tag{position:absolute; top:14px; padding:6px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:700; font-family:var(--font-head); letter-spacing:.04em; text-transform:uppercase;}
.ba-tag.b{left:14px; background:rgba(36,16,9,.78); color:#fff;}
.ba-tag.a{right:14px; background:var(--gold); color:var(--navy);}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(53,28,21,.3); cursor:ew-resize; transform:translateX(-1px);}
.ba-knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:var(--shadow); border:2px solid var(--gold);}
@media (max-width:900px){ .showcase-inner{grid-template-columns:1fr; gap:32px;} .ba{max-width:440px;} }

/* ---------- who ---------- */
.who{background:var(--bg-2);}
.who-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.who-card{padding:26px;}
.who-ico{display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:12px; background:var(--gold-soft); color:var(--navy);}
.who-card h3{font-size:19px; margin-top:16px;}
.who-card p{color:var(--text-2); font-size:15px; margin-top:8px; min-height:4.6em;}
.who-card a{display:inline-block; margin-top:14px; color:var(--navy); font-weight:700; font-size:14.5px;}
.who-card a:hover{color:var(--gold-2);}
@media (max-width:1000px){ .who-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .who-grid{grid-template-columns:1fr;} .who-card p{min-height:0;} }

/* ---------- pricing ---------- */
.pricing{background:#fff;}
.toggles{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:34px;}
.bill-toggle{display:inline-flex; padding:4px; border-radius:var(--r-pill); background:var(--bg-3); border:1px solid var(--line);}
.bill-toggle button{border:0; background:transparent; padding:10px 20px; border-radius:var(--r-pill); font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.bill-toggle button.on{background:var(--navy); color:#fff; box-shadow:var(--shadow-sm);}
.bill-toggle .save{font-size:11.5px; padding:3px 8px; border-radius:var(--r-pill); background:var(--gold); color:var(--navy); font-weight:800;}
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch;}
.plan{padding:28px 26px; display:flex; flex-direction:column; position:relative;}
.plan.featured{border:2px solid var(--gold); box-shadow:var(--shadow-lg);}
.plan-flag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--navy); font-family:var(--font-head); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:var(--r-pill); white-space:nowrap;}
.plan-tier{font-family:var(--font-head); font-weight:800; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2);}
.plan-price{display:flex; flex-direction:column; margin-top:14px;}
.plan-price b{font-family:var(--font-head); font-size:34px; font-weight:800; color:var(--navy); line-height:1; letter-spacing:-.02em;}
.plan-price span{font-size:13.5px; color:var(--mut); margin-top:6px;}
.plan-for{color:var(--text-2); font-size:14.5px; margin-top:14px; min-height:3.2em;}
.plan-list{list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:9px; flex:1;}
.plan-list li{position:relative; padding-left:24px; font-size:14.5px; color:var(--text);}
.plan-list li::before{content:"✓"; position:absolute; left:0; top:1px; color:var(--gold-2); font-weight:800;}
.plan-list li b{color:var(--navy);}
.plan-note{text-align:center; margin-top:26px; color:var(--mut); font-size:14px;}
.plan-note a,.prog-cta a:not(.btn){color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px;}
@media (max-width:1060px){ .plans{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .plans{grid-template-columns:1fr;} .plan-for{min-height:0;} }

/* ---------- programmes ---------- */
.programmes{background:var(--bg-2);}
.prog-groups{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.prog-group{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px;}
.prog-group h3{font-size:17px; display:flex; align-items:center; gap:8px;}
.prog-group ul{list-style:none; padding:0; margin:12px 0 0; display:flex; flex-wrap:wrap; gap:7px;}
.prog-group li{font-size:13px; font-weight:500; color:var(--navy); background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:5px 11px;}
.prog-cta{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:30px;}
@media (max-width:900px){ .prog-groups{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .prog-groups{grid-template-columns:1fr;} }

/* ---------- trust ---------- */
.trust{background:#fff;}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.tcard{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:22px; border-top:4px solid var(--gold);}
.tcard h4{font-size:17px;}
.tcard p{color:var(--text-2); font-size:14.5px; margin-top:8px;}
.disclaimer{display:flex; gap:14px; align-items:flex-start; margin-top:26px; padding:16px 18px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);}
.disclaimer .dl{flex:none; font-family:var(--font-head); font-weight:800; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); padding-top:3px;}
.disclaimer p{font-size:14px; color:var(--text-2);}
@media (max-width:900px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .trust-grid{grid-template-columns:1fr;} }

/* ---------- faq ---------- */
.faq{background:var(--bg-2);}
.faq-inner{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start;}
.faq-list{display:grid; gap:10px;}
.faq-list details{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:0 20px;}
.faq-list details[open]{border-color:var(--gold-line); box-shadow:var(--shadow-sm);}
.faq-list summary{cursor:pointer; list-style:none; padding:18px 0; font-family:var(--font-head); font-weight:700; font-size:16.5px; color:var(--navy); display:flex; justify-content:space-between; gap:16px; align-items:center;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+"; flex:none; width:26px; height:26px; border-radius:50%; background:var(--gold-soft); color:var(--gold-2); display:flex; align-items:center; justify-content:center; font-weight:800; transition:transform .2s;}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list p{padding:0 0 18px; color:var(--text-2); font-size:15px;}
@media (max-width:860px){ .faq-inner{grid-template-columns:1fr; gap:24px;} }

/* ---------- contact ---------- */
.contact{background:#fff;}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start;}
.contact-copy h2{font-size:clamp(26px,3.2vw,38px); margin-top:14px;}
.contact-copy p{color:var(--text-2); font-size:17px; margin-top:14px;}
.contact-form{padding:28px; display:grid; gap:16px; box-shadow:var(--shadow);}
.contact-fields{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.contact-submit{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.contact-fine{font-size:12.5px; color:var(--mut);}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:28px;} }
@media (max-width:560px){ .contact-fields{grid-template-columns:1fr;} }

/* ---------- final ---------- */
.final{background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff; padding-block:88px; overflow:hidden;}
.final .wrap{position:relative; z-index:1;}
.final h2{color:#fff; font-size:clamp(30px,4vw,48px);}
.final h2 em{font-style:normal; color:var(--gold);}
.final p{color:rgba(255,255,255,.78); font-size:18px; margin-top:12px;}
.final .hero-cta{margin-top:28px;}

/* ---------- footer ---------- */
.foot{background:var(--navy-deep); color:rgba(255,255,255,.8); padding-block:56px 28px; border-top:1px solid rgba(255,255,255,.08);}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;}
.foot-brand p{margin-top:16px; font-size:14.5px; max-width:36ch; color:rgba(255,255,255,.72);}
.foot .brand.on-dark .brand-name{color:#fff;}
.region-links{margin-top:12px; font-size:13.5px; color:rgba(255,255,255,.7);}
.region-links a{color:#fff; font-weight:600;}
.foot-col{display:flex; flex-direction:column; gap:10px;}
.foot-col h5{color:var(--gold); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px;}
.foot-col a{font-size:14.5px; color:rgba(255,255,255,.78);}
.foot-col a:hover{color:var(--gold);}
.foot-fine{border-top:1px solid rgba(255,255,255,.14); margin-top:40px; padding-top:22px; font-size:12.5px; color:rgba(255,255,255,.6); display:grid; gap:8px;}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }

.city-strip{margin-top:22px; text-align:center; line-height:1.9;}
.city-strip a{color:var(--navy); text-decoration:underline; text-decoration-color:var(--gold-line); text-underline-offset:3px;}
.city-strip a:hover{text-decoration-color:var(--gold);}