/* ============================================================
   TRINITY STUDY ABROAD — v2 Stylesheet
   Palette: Vibrant Orange + Deep Navy + White (live-site match)
   Vibe: Soft Structuralism · Layout: Asymmetric Bento
   Haptics: Double-Bezel cards, button-in-button CTAs, spring motion
   Stack: Bootstrap 5.3 + custom. Vanilla, no build.
   ============================================================ */

:root{
  /* ---- PALETTE ---- */
  --navy:      #2A2E6E;
  --navy-2:    #1E2154;
  --navy-3:    #3A3F8C;
  --ink:       #181B40;
  --orange:    #F47A20;
  --orange-2:  #FF9638;
  --orange-hi: #FFB46E;
  --orange-deep:#E0670F;
  --sky:       #608CC8;
  --white:     #FFFFFF;
  --cream:     #F8F9FD;
  --cream-2:   #EEF1F9;
  --slate:     #5A6080;
  --line:      rgba(42,46,110,.10);
  --line-2:    rgba(42,46,110,.16);

  /* ---- TYPE ---- */
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-serif-it:"Fraunces", Georgia, serif;

  /* ---- SHAPE ---- */
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-pill: 999px;

  /* ---- soft diffused shadows (no harsh black) ---- */
  --sh-soft: 0 22px 60px -28px rgba(42,46,110,.35);
  --sh-lift: 0 36px 80px -32px rgba(42,46,110,.45);
  --sh-orange: 0 22px 50px -18px rgba(244,122,32,.5);
  --sh-card: 0 8px 30px -14px rgba(42,46,110,.22);

  /* ---- spring easing ---- */
  --spring: cubic-bezier(.32,.72,0,1);
  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 1280px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-sans);
  color:var(--navy);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--orange); color:#fff; }

/* fixed grain overlay (perf-safe, pointer-events none) */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

h1,h2,h3,h4,.display{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.02; }
.serif-it{ font-family:var(--font-serif-it); font-style:italic; font-weight:500; }

a{ color:inherit; text-decoration:none; transition:color .3s var(--ease); }
.container-x{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.2rem); }

.text-orange{ color:var(--orange)!important; }
.text-navy{ color:var(--navy)!important; }
.text-sky{ color:var(--sky)!important; }
.bg-navy{ background:var(--navy)!important; }
.bg-cream{ background:var(--cream)!important; }
.bg-cream-2{ background:var(--cream-2)!important; }
.relativez{ position:relative; z-index:2; }

/* ---- eyebrow pill badge ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange-deep); background:rgba(244,122,32,.1);
  padding:.45rem 1rem; border-radius:var(--r-pill);
}
.eyebrow.on-dark{ color:var(--orange-hi); background:rgba(244,122,32,.16); }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); }

/* ============================================================
   BUTTONS — pill with nested icon circle (button-in-button)
   ============================================================ */
.btn-x{
  --bg:var(--orange); --fg:#fff;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.7rem .8rem .7rem 1.5rem; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg);
  font-weight:700; font-size:.97rem; border:none; cursor:pointer;
  transition:transform .5s var(--spring), box-shadow .5s var(--spring), background .3s var(--ease);
}
.btn-x .ic{
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.22); display:grid; place-items:center;
  transition:transform .5s var(--spring), background .3s var(--ease);
}
.btn-x:hover{ transform:translateY(-3px); box-shadow:var(--sh-orange); color:#fff; }
.btn-x:hover .ic{ transform:translate(3px,-1px) scale(1.08); background:rgba(255,255,255,.32); }
.btn-x:active{ transform:scale(.97); }
.btn-x.navy{ --bg:var(--navy); }
.btn-x.navy:hover{ box-shadow:var(--sh-soft); }
.btn-x.ghost{ --bg:transparent; --fg:var(--navy); border:1.5px solid var(--line-2); padding-left:1.5rem; }
.btn-x.ghost .ic{ background:rgba(42,46,110,.08); color:var(--navy); }
.btn-x.ghost:hover{ background:rgba(42,46,110,.04); box-shadow:none; color:var(--navy); }
.btn-x.ghost.on-dark{ --fg:#fff; border-color:rgba(255,255,255,.25); }
.btn-x.ghost.on-dark .ic{ background:rgba(255,255,255,.12); color:#fff; }
.btn-x.white{ --bg:#fff; --fg:var(--navy); }
.btn-x.white .ic{ background:rgba(42,46,110,.1); color:var(--navy); }

/* ============================================================
   TOPBAR + NAV (floating island)
   ============================================================ */
.topbar{ background:var(--ink); color:rgba(255,255,255,.8); font-size:.82rem; position:relative; z-index:3; }
.topbar a:hover{ color:var(--orange-hi); }
.topbar .soc a{ width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; background:rgba(255,255,255,.08); transition:background .3s var(--ease), transform .3s var(--ease); }
.topbar .soc a:hover{ background:var(--orange); transform:translateY(-2px); }
.topbar .sep{ width:1px; height:14px; background:rgba(255,255,255,.18); }

.nav-wrap{ position:sticky; top:0; z-index:1030; padding-top:.9rem; }
.nav-main{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-card);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.nav-wrap.scrolled .nav-main{ box-shadow:var(--sh-soft); }
.nav-main .inner{ display:flex; align-items:center; justify-content:space-between; padding:.55rem .65rem .55rem 1.4rem; }
.navbrand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--navy); }
.navbrand img{ width:38px; height:38px; }
.navbrand .sub{ color:var(--orange); }
.navlinks{ display:flex; align-items:center; gap:.3rem; list-style:none; margin:0; padding:0; }
.navlinks a{ font-weight:600; font-size:.94rem; color:var(--navy); padding:.5rem .95rem; border-radius:var(--r-pill); transition:background .3s var(--ease), color .3s var(--ease); }
.navlinks a:hover{ background:rgba(42,46,110,.06); }
.navlinks a.active{ background:var(--navy); color:#fff; }
.nav-toggle{ display:none; width:46px; height:46px; border-radius:50%; border:none; background:var(--navy); cursor:pointer; position:relative; }
.nav-toggle span{ position:absolute; left:13px; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .5s var(--spring), opacity .3s var(--ease); }
.nav-toggle span:nth-child(1){ top:17px; } .nav-toggle span:nth-child(2){ top:22px; } .nav-toggle span:nth-child(3){ top:27px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* mobile menu overlay */
.mobile-menu{ position:fixed; inset:0; z-index:1029; background:rgba(255,255,255,.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.4rem; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--navy); padding:.5rem 1rem; transform:translateY(30px); opacity:0; transition:transform .6s var(--spring), opacity .6s var(--ease); }
.mobile-menu.open a{ transform:translateY(0); opacity:1; }
.mobile-menu.open a:nth-child(1){ transition-delay:.08s; }
.mobile-menu.open a:nth-child(2){ transition-delay:.14s; }
.mobile-menu.open a:nth-child(3){ transition-delay:.2s; }
.mobile-menu.open a:nth-child(4){ transition-delay:.26s; }
.mobile-menu.open a:nth-child(5){ transition-delay:.32s; }
.mobile-menu.open .btn-x{ transition-delay:.4s; }

@media (max-width:991px){
  .navlinks, .nav-main .btn-x.d-nav{ display:none!important; }
  .nav-toggle{ display:block; }
}

/* ============================================================
   HERO — light, asymmetric, image-led
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding-top:2rem;
  background:var(--cream) url("../media/images/hero-bg.jpg") center bottom/cover no-repeat; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; min-height:calc(100dvh - 140px); padding-block:2rem 5rem; }
.hero__eyebrow{ margin-bottom:1.3rem; }
.hero h1{ font-size:clamp(2.6rem,6.5vw,5rem); color:var(--navy); margin-bottom:1.3rem; }
.hero h1 .o{ color:var(--orange); }
.hero h1 .it{ font-family:var(--font-serif-it); font-style:italic; font-weight:500; color:var(--sky); }
.hero p.sub{ font-size:clamp(1rem,1.4vw,1.16rem); color:var(--slate); max-width:42ch; line-height:1.65; margin-bottom:2rem; }
.hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; }
.hero__art{ position:relative; display:grid; place-items:center; }
.hero__art img{ width:min(100%,520px); filter:drop-shadow(0 40px 60px rgba(42,46,110,.3)); animation:floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
/* floating mini-badges around art */
.float-badge{ position:absolute; background:#fff; border-radius:var(--r-md); box-shadow:var(--sh-soft); padding:.7rem 1rem; display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:.85rem; color:var(--navy); animation:floaty 5s ease-in-out infinite; }
.float-badge .fi{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(244,122,32,.14); color:var(--orange-deep); }
.float-badge.b1{ top:8%; left:-2%; animation-delay:.4s; }
.float-badge.b2{ bottom:18%; right:-4%; animation-delay:1.2s; }
.float-badge.b3{ bottom:2%; left:10%; animation-delay:.8s; }

/* trust strip */
.trust-strip{ background:var(--navy); color:#fff; }
.trust-strip .ts-item{ display:flex; align-items:center; gap:.7rem; padding-block:1.1rem; font-weight:600; font-size:.95rem; }
.trust-strip .ts-item .n{ font-family:var(--font-display); font-size:1.5rem; color:var(--orange-hi); }

/* ============================================================
   SECTION SCAFFOLD — heavy breathing room
   ============================================================ */
.sec{ padding-block:clamp(4.5rem,9vw,8rem); position:relative; }
.sec-head{ max-width:62ch; }
.sec-head h2{ font-size:clamp(2.2rem,4.6vw,3.5rem); margin-block:.8rem 1rem; color:var(--navy); }
.sec-head h2 .o{ color:var(--orange); }
.sec-head p{ color:var(--slate); font-size:1.06rem; line-height:1.65; }

/* ============================================================
   DOUBLE-BEZEL CARD SYSTEM
   ============================================================ */
.bezel{ background:rgba(42,46,110,.05); border:1px solid var(--line); border-radius:var(--r-xl); padding:7px; height:100%; transition:transform .55s var(--spring), box-shadow .55s var(--spring); }
.bezel:hover{ transform:translateY(-7px); box-shadow:var(--sh-lift); }
.bezel__core{ background:#fff; border-radius:calc(var(--r-xl) - 7px); height:100%; box-shadow:inset 0 1px 1px rgba(255,255,255,.8); overflow:hidden; }

/* offer feature card */
.feat{ padding:2.2rem 1.9rem; height:100%; position:relative; }
.feat__ic{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; margin-bottom:1.4rem; color:#fff; background:linear-gradient(145deg,var(--orange-2),var(--orange-deep)); box-shadow:var(--sh-orange); transition:transform .5s var(--spring); }
.bezel:hover .feat__ic{ transform:rotate(-6deg) scale(1.05); }
.feat h3{ font-size:1.4rem; margin-bottom:.6rem; color:var(--navy); }
.feat p{ color:var(--slate); line-height:1.6; font-size:.97rem; margin:0; }
.feat__n{ position:absolute; right:1.5rem; top:1.4rem; font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--line-2); }

/* ============================================================
   UNIVERSITY CIRCULAR BADGES (home hero-style row)
   ============================================================ */
.uni-row{ display:flex; gap:clamp(1rem,3vw,2.4rem); justify-content:center; flex-wrap:wrap; }
.uni-badge{ text-align:center; width:160px; transition:transform .5s var(--spring); }
.uni-badge:hover{ transform:translateY(-8px); }
.uni-badge .ph{ width:150px; height:150px; margin:0 auto .9rem; border-radius:50%; padding:5px; background:linear-gradient(145deg,#fff,var(--cream-2)); box-shadow:var(--sh-soft); position:relative; }
.uni-badge .ph img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.uni-badge .ph::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid transparent; transition:border-color .4s var(--ease); }
.uni-badge:hover .ph::after{ border-color:var(--orange); }
.uni-badge h4{ font-family:var(--font-display); font-size:.92rem; font-weight:700; color:var(--navy); line-height:1.2; }
.uni-badge span{ font-size:.78rem; color:var(--slate); }

/* ============================================================
   BENTO DESTINATIONS
   ============================================================ */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:240px; gap:1.2rem; }
.bento__tile{ position:relative; border-radius:var(--r-lg); overflow:hidden; display:block; isolation:isolate; box-shadow:var(--sh-card); }
.bento__tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--spring); }
.bento__tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(24,27,64,.86)); }
.bento__tile:hover img{ transform:scale(1.08); }
.bento__body{ position:absolute; inset:auto 0 0 0; padding:1.4rem; color:#fff; z-index:2; }
.bento__body h3{ font-size:1.5rem; color:#fff; margin-bottom:.15rem; }
.bento__body span{ font-size:.84rem; color:rgba(255,255,255,.82); }
.bento__arrow{ position:absolute; top:1.2rem; right:1.2rem; z-index:2; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:grid; place-items:center; color:#fff; transition:transform .5s var(--spring), background .3s var(--ease); }
.bento__tile:hover .bento__arrow{ background:var(--orange); transform:rotate(-45deg); }
.bento .big{ grid-column:span 2; grid-row:span 2; }
.bento .wide{ grid-column:span 2; }

/* ============================================================
   SERVICE CARDS (image-led, used on services page)
   ============================================================ */
.svc-card{ background:rgba(42,46,110,.05); border:1px solid var(--line); border-radius:var(--r-xl); padding:7px; height:100%; transition:transform .55s var(--spring), box-shadow .55s var(--spring); }
.svc-card:hover{ transform:translateY(-7px); box-shadow:var(--sh-lift); }
.svc-card__core{ background:#fff; border-radius:calc(var(--r-xl) - 7px); overflow:hidden; height:100%; display:flex; flex-direction:column; }
.svc-card__img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.svc-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--spring); }
.svc-card:hover .svc-card__img img{ transform:scale(1.07); }
.svc-card__ic{ position:absolute; left:1.1rem; bottom:-26px; width:56px; height:56px; border-radius:16px; background:#fff; box-shadow:var(--sh-soft); display:grid; place-items:center; color:var(--orange-deep); z-index:2; }
.svc-card__badge{ position:absolute; top:1rem; right:1rem; background:rgba(24,27,64,.7); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:.3rem .7rem; border-radius:var(--r-pill); backdrop-filter:blur(4px); }
.svc-card__body{ padding:2.4rem 1.5rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.svc-card__body h3{ font-size:1.3rem; margin-bottom:.5rem; color:var(--navy); }
.svc-card__body p{ color:var(--slate); font-size:.95rem; line-height:1.6; margin:0 0 1.1rem; flex:1; }
.svc-card__link{ font-weight:700; font-size:.9rem; color:var(--orange-deep); display:inline-flex; align-items:center; gap:.4rem; }
.svc-card__link .ar{ transition:transform .4s var(--spring); }
.svc-card:hover .svc-card__link .ar{ transform:translateX(4px); }

/* ============================================================
   STATS (navy band, dotted globe bg)
   ============================================================ */
.stats{ position:relative; color:#fff; overflow:hidden; background:var(--navy) url("../media/images/cta-bg.jpg") center/cover; }
.stats .container-x{ position:relative; z-index:2; }
.stat{ text-align:center; padding:1rem; }
.stat b{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,5vw,4rem); color:var(--orange-hi); line-height:1; display:block; }
.stat span{ display:block; margin-top:.6rem; font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); }

/* ============================================================
   ABOUT SPLIT (Z-axis cascade image)
   ============================================================ */
.about-visual{ position:relative; }
.about-visual .main{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lift); }
.about-visual .main img{ width:100%; display:block; }
.about-visual .pop{ position:absolute; right:-16px; bottom:-22px; background:var(--orange); color:#fff; border-radius:var(--r-lg); padding:1.3rem 1.5rem; box-shadow:var(--sh-orange); max-width:230px; }
.about-visual .pop b{ font-family:var(--font-display); font-weight:800; font-size:2.2rem; line-height:1; display:block; }
.about-visual .pop span{ font-size:.82rem; font-weight:600; }
.tick{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:1rem; }
.tick li{ display:flex; gap:.85rem; align-items:flex-start; font-size:1rem; color:var(--navy); font-weight:500; }
.tick .tk{ flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-size:.8rem; margin-top:.1rem; }

/* ============================================================
   PROCESS (connected steps)
   ============================================================ */
.proc{ position:relative; }
.proc__line{ position:absolute; top:46px; left:8%; right:8%; height:2px; background:repeating-linear-gradient(90deg,var(--orange) 0 8px,transparent 8px 18px); opacity:.5; z-index:0; }
.proc__step{ position:relative; z-index:1; text-align:center; }
.proc__num{ width:92px; height:92px; border-radius:50%; margin:0 auto 1.3rem; background:#fff; border:2px solid var(--line-2); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--navy); box-shadow:var(--sh-card); transition:transform .5s var(--spring), border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.proc__step:hover .proc__num{ transform:translateY(-6px) scale(1.05); background:var(--orange); border-color:var(--orange); color:#fff; }
.proc__step h3{ font-size:1.25rem; color:var(--navy); margin-bottom:.5rem; }
.proc__step p{ color:var(--slate); font-size:.94rem; line-height:1.6; max-width:24ch; margin-inline:auto; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:2.2rem; height:100%; box-shadow:var(--sh-card); transition:transform .55s var(--spring), box-shadow .55s var(--spring); }
.quote-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lift); }
.quote-card .stars{ color:var(--orange); font-size:1rem; letter-spacing:2px; margin-bottom:1rem; }
.quote-card p{ font-family:var(--font-serif-it); font-style:italic; font-size:1.12rem; line-height:1.55; color:var(--navy); margin-bottom:1.4rem; }
.quote-card .who{ display:flex; align-items:center; gap:.8rem; }
.quote-card .av{ width:46px; height:46px; border-radius:50%; background:linear-gradient(145deg,var(--orange-2),var(--navy)); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--font-display); }
.quote-card .who b{ display:block; color:var(--navy); font-size:.95rem; }
.quote-card .who span{ color:var(--slate); font-size:.82rem; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{ position:relative; color:#fff; overflow:hidden; background:var(--navy) url("../media/images/cta-bg.jpg") center/cover; }
.cta .inner{ position:relative; z-index:2; }
.cta h2{ font-size:clamp(2.2rem,4.6vw,3.6rem); color:#fff; }
.cta h2 .o{ color:var(--orange-hi); }

/* ============================================================
   FAQ (accordion)
   ============================================================ */
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:1rem; overflow:hidden; transition:box-shadow .4s var(--ease), border-color .3s var(--ease); }
.faq-item.open{ border-color:rgba(244,122,32,.4); box-shadow:var(--sh-card); }
.faq-q{ width:100%; text-align:left; background:none; border:0; padding:1.3rem 1.6rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--navy); display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; }
.faq-q .pm{ flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:rgba(244,122,32,.12); color:var(--orange-deep); display:grid; place-items:center; transition:transform .5s var(--spring), background .3s var(--ease), color .3s; }
.faq-item.open .faq-q .pm{ transform:rotate(135deg); background:var(--orange); color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--spring); }
.faq-a__in{ padding:0 1.6rem 1.4rem; color:var(--slate); line-height:1.65; }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form-card{ background:rgba(42,46,110,.05); border:1px solid var(--line); border-radius:var(--r-xl); padding:7px; box-shadow:var(--sh-card); }
.form-card__core{ background:#fff; border-radius:calc(var(--r-xl) - 7px); padding:clamp(1.6rem,3vw,2.6rem); }
.fld{ margin-bottom:1.2rem; }
.fld label{ display:block; font-size:.83rem; font-weight:700; color:var(--navy); margin-bottom:.45rem; }
.fld input,.fld select,.fld textarea{ width:100%; padding:.85rem 1rem; border:1.5px solid var(--line-2); border-radius:var(--r-md); font-family:var(--font-sans); font-size:.95rem; color:var(--navy); background:var(--cream); transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.fld input::placeholder,.fld textarea::placeholder{ color:var(--slate); opacity:.7; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(244,122,32,.15); background:#fff; }
.fld .err{ display:none; color:#c0392b; font-size:.8rem; margin-top:.35rem; }
.fld.invalid input,.fld.invalid select,.fld.invalid textarea{ border-color:#c0392b; }
.fld.invalid .err{ display:block; }
.form-note{ font-size:.83rem; color:var(--slate); }
.form-success{ display:none; padding:1rem 1.2rem; border-radius:var(--r-md); background:rgba(92,170,120,.14); border:1px solid rgba(92,170,120,.4); color:#2f7d50; font-weight:600; }

.info-card{ background:var(--navy); color:#fff; border-radius:var(--r-xl); padding:clamp(1.8rem,3vw,2.6rem); height:100%; position:relative; overflow:hidden; }
.info-card::before{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(244,122,32,.3),transparent 70%); }
.ci-row{ display:flex; gap:1rem; align-items:flex-start; padding-block:1.1rem; border-top:1px solid rgba(255,255,255,.12); position:relative; }
.ci-row:first-of-type{ border-top:0; }
.ci-ic{ flex:0 0 46px; width:46px; height:46px; border-radius:13px; background:rgba(244,122,32,.18); color:var(--orange-hi); display:grid; place-items:center; }
.ci-row h4{ font-family:var(--font-sans); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-hi); margin-bottom:.25rem; }
.ci-row p,.ci-row a{ color:rgba(255,255,255,.86); font-size:.97rem; margin:0; line-height:1.5; }
.ci-row a:hover{ color:var(--orange-hi); }

/* ============================================================
   PAGE HEADER (inner)
   ============================================================ */
.page-head{ position:relative; color:#fff; overflow:hidden; padding-block:4rem 4.5rem; background:var(--navy) url("../media/images/cta-bg.jpg") center/cover; }
.page-head .inner{ position:relative; z-index:2; }
.page-head h1{ font-size:clamp(2.4rem,5vw,4rem); color:#fff; }
.page-head .crumb{ font-size:.86rem; color:rgba(255,255,255,.72); }
.page-head .crumb a:hover{ color:var(--orange-hi); }
.page-head .crumb .sep{ color:var(--orange); margin-inline:.45rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:rgba(255,255,255,.72); padding-block:4.5rem 0; position:relative; overflow:hidden; }
.footer .brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:#fff; margin-bottom:1.1rem; }
.footer .brand img{ width:40px; height:40px; }
.footer p.ab{ font-size:.95rem; line-height:1.7; max-width:34ch; }
.footer h5{ font-family:var(--font-sans); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-hi); margin-bottom:1.2rem; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.footer ul a{ color:rgba(255,255,255,.72); font-size:.95rem; }
.footer ul a:hover{ color:var(--orange-hi); padding-left:5px; }
.footer .soc{ display:flex; gap:.7rem; margin-top:1.3rem; }
.footer .soc a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.07); display:grid; place-items:center; color:var(--orange-hi); transition:all .4s var(--spring); }
.footer .soc a:hover{ background:var(--orange); color:#fff; transform:translateY(-3px); }
.footer .ci{ display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem; margin-bottom:.9rem; }
.footer .ci svg{ flex:0 0 18px; color:var(--orange); margin-top:.2rem; }
.footer-bot{ border-top:1px solid rgba(255,255,255,.1); margin-top:3.2rem; padding-block:1.6rem; font-size:.85rem; color:rgba(255,255,255,.55); }
.footer-bot a{ color:var(--orange-hi); }

/* whatsapp float */
.wa{ position:fixed; right:20px; bottom:22px; z-index:1040; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:transform .4s var(--spring); }
.wa:hover{ transform:scale(1.08) translateY(-2px); color:#fff; }
.wa::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:waP 2s ease-out infinite; }
@keyframes waP{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.6); opacity:0 } }

/* ============================================================
   SCROLL REVEAL (heavy fade-up + blur)
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(40px); filter:blur(6px); transition:opacity .9s var(--ease), transform .9s var(--spring), filter .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; filter:none; }
[data-rd="1"]{ transition-delay:.08s; } [data-rd="2"]{ transition-delay:.16s; }
[data-rd="3"]{ transition-delay:.24s; } [data-rd="4"]{ transition-delay:.32s; }
[data-rd="5"]{ transition-delay:.4s; } [data-rd="6"]{ transition-delay:.48s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991px){
  .hero__grid{ grid-template-columns:1fr; gap:1rem; min-height:auto; text-align:center; }
  .hero__art{ order:-1; }
  .hero__cta{ justify-content:center; }
  .hero p.sub{ margin-inline:auto; }
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .bento .big{ grid-column:span 2; grid-row:span 2; }
  .bento .wide{ grid-column:span 2; }
  .proc__line{ display:none; }
  .float-badge{ display:none; }
}
@media (max-width:575px){
  .topbar{ display:none; }
  .bento{ grid-template-columns:1fr; grid-auto-rows:200px; }
  .bento .big,.bento .wide{ grid-column:span 1; grid-row:span 1; }
  .uni-badge{ width:130px; }
  .uni-badge .ph{ width:120px; height:120px; }
}