/* AVENTURA Tech Solutions - shared site styles.
   Structure mirrors the LightPath layout, rebranded to AVENTURA:
   charcoal background, orange-to-gold gradient accent (from the logo),
   thin spaced Jost lettering for the wordmark and headings, Manrope body. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#26262A; --bg2:#2E2E33; --bg3:#35353C;
  --line:rgba(255,255,255,.10);
  --ink:#FFFFFF; --muted:#BEBEC6; --soft:#DBDBE1;
  --o1:#E8663A; --o2:#F0921E; --o3:#F4C518;
  --grad:linear-gradient(90deg,#E8663A 0%,#F0921E 55%,#F4C518 100%);
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--soft);line-height:1.65;-webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}

/* Brand mark */
.brand{display:inline-flex;align-items:center;gap:12px;}
.brand .mark{flex:none;}
.brand .word{font-family:'Jost',sans-serif;font-weight:300;letter-spacing:.34em;
  text-transform:uppercase;color:#fff;font-size:19px;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* Service page hero: large sunburst title, plus larger CTA label */
.hero .eyebrow.title{font-size:38px;margin-bottom:34px;}
.hero .eyebrow.title .grad-text{background:radial-gradient(circle at 50% 50%,#F7CE2E 0%,#F0921E 50%,#E8663A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cta .eyebrow{font-size:26px;}

/* Header */
header{position:sticky;top:0;z-index:30;background:rgba(38,38,42,.86);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:72px;}
.nav-links{display:flex;gap:30px;align-items:center;position:absolute;left:50%;transform:translateX(-50%);}
.nav-links a{color:var(--soft);font-size:15px;font-weight:500;}
.nav-links a:hover{color:#fff;}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:24px;line-height:1;
  padding:6px 4px;cursor:pointer;}

/* Buttons */
.btn{display:inline-block;cursor:pointer;font-family:inherit;font-weight:700;font-size:14.5px;
  padding:12px 22px;border-radius:10px;border:0;background:var(--grad);color:#1c1c1f;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s cubic-bezier(.2,.8,.2,1);
  will-change:transform;}
.btn:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 26px rgba(240,146,30,.32));}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.30);}
.btn-ghost:hover{background:rgba(255,255,255,.06);box-shadow:0 10px 26px rgba(240,146,30,.32);}
.btn-lg{padding:15px 30px;font-size:16px;border-radius:12px;}

/* Section scaffolding */
section{padding:84px 0;}
.eyebrow{display:flex;align-items:center;font-family:'Jost',sans-serif;
  letter-spacing:.28em;text-transform:uppercase;font-size:13px;color:var(--o2);
  font-weight:400;margin-bottom:18px;}
.section-head{max-width:720px;margin:0 auto 52px;text-align:center;}
.section-head .eyebrow{justify-content:center;}
.hero .eyebrow{justify-content:center;}
.cta .eyebrow{justify-content:center;}
h1,h2,h3{color:#fff;font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.12;}
h1{font-size:clamp(34px,6vw,60px);}
h2{font-size:clamp(28px,4vw,42px);}
h3{font-size:21px;font-weight:500;letter-spacing:0;}
.lead{font-size:19px;color:var(--soft);max-width:640px;}
.section-head .lead{margin:16px auto 0;}

/* Hero */
.hero{position:relative;overflow:hidden;padding:110px 0 100px;text-align:center;background:var(--bg);}
.hero.compact{padding:36px 0;}
.hero.compact .eyebrow{margin-bottom:12px;}
.hero.compact .lead{margin:16px auto 0;}
.hero.compact + section{padding-top:28px;}
/* Letter-spacing shifts centred labels right; cancel the trailing gap */
.hero .eyebrow{padding-left:.28em;}
/* Contact: grain on the intro, flat charcoal behind the calendar */
.page-contact .hero{background:transparent;}
.page-contact #book{background-color:var(--bg);background-image:none;}
.hero .bars{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:34px;}
.hero .bars i{display:block;height:3px;border-radius:3px;background:var(--grad);}
.hero .bars i:nth-child(1){width:190px;}
.hero .bars i:nth-child(2){width:150px;transform:translateX(22px);}
.hero .bars i:nth-child(3){width:104px;transform:translateX(-14px);}
.hero-logo{width:min(340px,72vw);height:auto;margin:0 auto 30px;display:block;}

/* Homepage opening movement: logo rises and fades in, then a light sweeps
   across it, then the gold box and the buttons fade up in sequence.
   Scoped with ~ so it only fires where a hero-logo is present (the homepage),
   every other page's hero is untouched. */
.logo-wrap{position:relative;display:inline-block;overflow:hidden;border-radius:10px;}
.logo-wrap .hero-logo{animation:materialize 1.3s cubic-bezier(.2,.7,.2,1) both;}

.hero-shine{padding-top:60px;}

/* Give the hero buttons the same resting shadow the cards have, so they sit
   on the page the same way. Scoped to the homepage. */
.logo-wrap ~ .hero-actions .btn{background-color:#131316;border:0;color:var(--o2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  box-shadow:0 18px 34px -22px rgba(0,0,0,.5);}
.logo-wrap ~ .hero-actions .btn:hover{box-shadow:0 10px 26px rgba(240,146,30,.32);}

/* Light sweep travels the full width of the page, not just the logo */
.hero-shine::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:30%;z-index:3;
  pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.06),transparent);
  animation:pageShine 1.5s ease-out .9s 1 both;}
@keyframes pageShine{from{left:-45%;}to{left:145%;}}
.logo-wrap ~ .hero-frame{animation:fadeUpFrame .8s ease-out .55s both;}
.logo-wrap ~ .hero-actions{animation:fadeUp .8s ease-out .95s both;}
/* Image resolves from a rough, blurred, colourless shape into full sharp focus,
   like it is rendering into place rather than simply fading in. Only two
   keyframes, so the browser interpolates one continuous pull rather than
   visible stepped stages. */
@keyframes materialize{
  from{opacity:0;filter:blur(20px) grayscale(1) brightness(1.6) contrast(1.3);transform:scale(1.06);}
  to{opacity:1;filter:blur(0) grayscale(0) brightness(1) contrast(1);transform:scale(1);}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeUpFrame{from{opacity:0;transform:translate(18px,16px);}to{opacity:1;transform:translateX(18px);}}

.hero h1{max-width:900px;margin:0 auto;}
.hero.tight h1{font-size:clamp(18px,3vw,30px);}
.hero .lead{margin:24px auto 38px;font-size:20px;text-align:center;}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* Cards / grids */
.grid{display:grid;gap:22px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.card{background-color:var(--bg2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  border:1px solid var(--line);border-radius:16px;padding:30px;
  box-shadow:0 18px 34px -22px rgba(0,0,0,.5);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease;}
.card .num{font-family:'Jost',sans-serif;font-weight:300;font-size:34px;line-height:1;
  margin-bottom:16px;}
.card h3{margin-bottom:10px;}
.card p{font-size:15.5px;color:var(--muted);}
.card.link:hover{border-color:rgba(244,197,24,.45);transform:translateY(-3px);
  box-shadow:0 24px 42px -22px rgba(0,0,0,.6);}

/* Services grid: centres a leftover last row (e.g. cards 4 and 5) instead of
   leaving them hanging left under columns 1 and 2. */
.grid-centered{display:flex;flex-wrap:wrap;justify-content:center;}
.grid-centered .card{flex:0 1 calc((100% - 44px)/3);}

/* Scroll-reveal polish, classes applied by nav.js, not present on load */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* Mission band */
.band{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);text-align:center;}
.band .quote{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(24px,3.4vw,36px);
  color:#fff;max-width:900px;margin:22px auto 0;line-height:1.3;}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:860px;margin:0 auto;}
.plan{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:34px;position:relative;}
.plan.popular{border:1px solid transparent;background:
  linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box;}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#1c1c1f;font-weight:700;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 14px;border-radius:20px;}
.plan h3{font-size:22px;margin-bottom:6px;}
.plan .price{font-family:'Jost',sans-serif;font-weight:300;font-size:40px;color:#fff;margin:8px 0 4px;}
.plan .price small{font-size:16px;color:var(--muted);}
.plan ul{list-style:none;margin:22px 0 26px;}
.plan li{position:relative;padding-left:28px;margin-bottom:12px;font-size:15px;color:var(--soft);}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:8px;
  border-left:2px solid var(--o3);border-bottom:2px solid var(--o3);transform:rotate(-45deg);}
.plan .btn{width:100%;text-align:center;}
.note{text-align:center;color:var(--muted);font-size:13.5px;margin-top:22px;}

/* FAQ */
.faq{max-width:800px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);padding:6px 0;}
.faq summary{cursor:pointer;list-style:none;padding:20px 4px;font-family:'Jost',sans-serif;
  font-weight:400;font-size:19px;color:#fff;display:flex;justify-content:space-between;gap:20px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--o2);font-size:24px;line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{padding:0 4px 22px;color:var(--muted);font-size:16px;}

/* CTA band. Same smaller closing on every page. */
.cta{text-align:center;background:var(--bg2);border-top:1px solid var(--line);}
.cta h2{font-size:clamp(22px,2.4vw,28px);}
.cta .lead{font-size:16px;max-width:780px;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
form.stack{display:grid;gap:16px;}
.stack label{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:-8px;}
.stack input,.stack textarea{width:100%;font-family:inherit;font-size:16px;padding:13px 15px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;color:#fff;}
.stack input:focus,.stack textarea:focus{outline:none;border-color:var(--o2);}
.stack textarea{min-height:130px;resize:vertical;}
.contact-info a:not(.btn){color:#fff;}
.contact-info .big{font-family:'Jost',sans-serif;font-weight:300;font-size:24px;margin:6px 0 24px;}

/* Footer */
footer{background:#202024;border-top:1px solid var(--line);padding:56px 0 34px;}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;}
.foot p{color:var(--muted);font-size:14.5px;margin-top:16px;max-width:320px;}
.foot h4{color:#fff;font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;font-size:13px;margin-bottom:16px;}
.foot a{display:block;color:var(--muted);font-size:14.5px;margin-bottom:10px;}
.foot a.brand{display:inline-flex;margin-bottom:0;}
.foot a:hover{color:#fff;}
.foot-bar{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px;}

/* Prose (legal pages) */
.prose{max-width:800px;margin:0 auto;}
.prose h2{font-size:26px;margin:36px 0 12px;}
.prose p{margin-bottom:14px;color:var(--soft);}

@media (prefers-reduced-motion:reduce){
  .logo-wrap .hero-logo,.hero-shine::after,.logo-wrap ~ .hero-frame,.logo-wrap ~ .hero-actions{
    animation:none!important;opacity:1!important;transform:none!important;filter:none!important;}
}

@media(max-width:860px){
  /* Brand left, hamburger right, links drop underneath when opened.
     Without nav.js the links simply stay visible, so the menu never disappears. */
  .nav{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:14px;gap:12px;}
  .nav-links{position:static;transform:none;width:100%;justify-content:center;gap:26px;order:2;}
  .nav-toggle{display:block;order:1;margin-left:auto;}
  .js-nav .nav-links{display:none;}
  .js-nav.open .nav-links{display:flex;padding-top:4px;}
  .g3,.g2,.plans,.contact-grid,.foot{grid-template-columns:1fr;}
  .grid-centered .card{flex-basis:100%;}
  section{padding:64px 0;}
  .hero{padding:80px 0 70px;}
}