/* ═══════════════════════════════════════════════
   COMPONENTS — The Way Agency Brand
   ═══════════════════════════════════════════════ */

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:.8rem 1.8rem;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:2px solid transparent;border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-base);text-decoration:none;line-height:1}
.btn--primary{background:var(--cyan);color:var(--navy-dark);border-color:var(--cyan)}
.btn--primary:hover{background:var(--blue);border-color:var(--blue);color:var(--white);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:var(--white)}
.btn--outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn--outline-white:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn--lg{padding:1rem 2.2rem;font-size:var(--text-base)}

/* ── Navigation ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--white);border-bottom:1px solid var(--border);height:var(--nav-height);transition:box-shadow var(--transition-base)}
.nav--scrolled{box-shadow:var(--shadow-md)}
.nav__inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl);height:100%;display:flex;align-items:center;justify-content:space-between}
.nav__logo{height:44px;display:flex;align-items:center}
.nav__logo img{height:100%;width:auto}
.nav__links{display:flex;align-items:center;gap:var(--space-xl)}
.nav__link{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--charcoal);text-transform:uppercase;letter-spacing:.04em;padding:var(--space-sm) 0;position:relative;transition:color var(--transition-fast)}
.nav__link:hover{color:var(--blue)}
.nav__link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--cyan);transition:width var(--transition-base)}
.nav__link:hover::after{width:100%}

.nav__dropdown{position:relative}
.nav__dropdown-menu{position:absolute;top:calc(100% + var(--space-sm));left:50%;transform:translateX(-50%) translateY(8px);background:var(--white);border:1px solid var(--border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-lg);min-width:280px;opacity:0;visibility:hidden;transition:all var(--transition-base);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs)}
.nav__dropdown:hover .nav__dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__dropdown-item{display:block;padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);color:var(--charcoal);border-radius:var(--border-radius);transition:all var(--transition-fast)}
.nav__dropdown-item:hover{background:var(--light-bg);color:var(--blue)}

.nav__toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--space-sm)}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--charcoal);margin:5px 0;transition:all var(--transition-base)}

@media(max-width:968px){
  .nav__toggle{display:block}
  .nav__links{position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;background:var(--white);flex-direction:column;align-items:flex-start;padding:var(--space-xl);gap:var(--space-md);transform:translateX(100%);transition:transform var(--transition-slow);overflow-y:auto}
  .nav__links--open{transform:translateX(0)}
  .nav__dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;padding:0 0 0 var(--space-md);min-width:auto;display:none;grid-template-columns:1fr}
  .nav__dropdown--open .nav__dropdown-menu{display:grid}
}

/* ── Hero ── */
.hero{position:relative;min-height:70vh;display:flex;align-items:center;overflow:hidden;margin-top:var(--nav-height);background:var(--navy-dark)}
.hero__bg{position:absolute;inset:0;background:linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 40%, var(--blue-dark) 100%);z-index:0}
.hero__bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(32,188,238,.12) 0%,transparent 60%),radial-gradient(ellipse at 20% 70%,rgba(101,197,179,.08) 0%,transparent 50%)}
.hero__texture{position:absolute;inset:0;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0z' fill='%23fff' fill-opacity='1'/%3E%3C/svg%3E");z-index:1}
.hero__content{position:relative;z-index:2;max-width:var(--max-width);margin:0 auto;padding:var(--space-4xl) var(--space-xl);color:var(--white)}
.hero__eyebrow{font-size:var(--text-sm);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);margin-bottom:var(--space-md);opacity:0;animation:fadeUp .6s ease .2s forwards}
.hero__title{color:var(--white);max-width:700px;margin-bottom:var(--space-lg);opacity:0;animation:fadeUp .6s ease .4s forwards}
.hero__subtitle{font-size:var(--text-lg);font-weight:300;line-height:1.8;max-width:560px;color:rgba(255,255,255,.8);margin-bottom:var(--space-2xl);opacity:0;animation:fadeUp .6s ease .6s forwards}
.hero__actions{display:flex;gap:var(--space-md);flex-wrap:wrap;opacity:0;animation:fadeUp .6s ease .8s forwards}
.hero__accent{position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue) 0%,var(--cyan) 40%,var(--green) 100%);z-index:2}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:768px){.hero{min-height:60vh}.hero__content{padding:var(--space-3xl) var(--space-xl)}}

/* ── Trust Bar ── */
.trust-bar{background:var(--light-bg);border-bottom:1px solid var(--border);padding:var(--space-lg) 0}
.trust-bar__inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl);display:flex;justify-content:center;align-items:center;gap:var(--space-2xl);flex-wrap:wrap}
.trust-bar__item{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);font-weight:600;color:var(--navy);letter-spacing:.02em}
.trust-bar__item svg{width:20px;height:20px;flex-shrink:0;color:var(--cyan)}
.trust-bar__divider{width:1px;height:20px;background:var(--border)}
@media(max-width:768px){.trust-bar__inner{gap:var(--space-lg)}.trust-bar__divider{display:none}}

/* ── Cards ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--border-radius-lg);padding:var(--space-2xl);transition:all var(--transition-base)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--cyan)}
.card__title{font-size:var(--text-2xl);font-weight:600;color:var(--navy);margin-bottom:var(--space-md)}
.card__text{color:var(--slate);font-size:var(--text-base);font-weight:300;line-height:1.7;margin-bottom:var(--space-lg)}
.card__link{font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);display:inline-flex;align-items:center;gap:var(--space-sm)}
.card__link:hover{color:var(--navy)}
.card__link svg{width:16px;height:16px;transition:transform var(--transition-fast)}
.card__link:hover svg{transform:translateX(4px)}

/* LOB Cards */
.lob-card{position:relative;border-radius:var(--border-radius-lg);overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-2xl);transition:all var(--transition-base);color:var(--white)}
.lob-card::before{content:'';position:absolute;inset:0;z-index:1;transition:background var(--transition-base)}
.lob-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.lob-card__content{position:relative;z-index:2}
.lob-card__title{color:var(--white);font-size:var(--text-3xl);margin-bottom:var(--space-sm)}
.lob-card__text{color:rgba(255,255,255,.8);margin-bottom:var(--space-lg);font-weight:300}

/* LOB card gradients using brand colors */
.lob-card--personal{background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%)}
.lob-card--personal::before{background:linear-gradient(to top,rgba(23,51,88,.9) 0%,rgba(48,151,211,.3) 100%)}
.lob-card--commercial{background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 100%)}
.lob-card--commercial::before{background:linear-gradient(to top,rgba(15,34,64,.95) 0%,rgba(23,51,88,.4) 100%)}
.lob-card--life{background:linear-gradient(135deg,var(--blue) 0%,var(--green) 100%)}
.lob-card--life::before{background:linear-gradient(to top,rgba(23,51,88,.85) 0%,rgba(101,197,179,.3) 100%)}

/* ── Carrier Marquee ── */
.carriers{padding:var(--space-2xl) 0;overflow:hidden;background:var(--white);border-bottom:1px solid var(--border)}
.carriers__label{text-align:center;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--gray);margin-bottom:var(--space-lg)}
.carriers__track{display:flex;gap:var(--space-3xl);animation:scroll-left 40s linear infinite;width:max-content}
.carriers__track:hover{animation-play-state:paused}
.carriers__logo{height:36px;width:auto;opacity:.45;filter:grayscale(100%);transition:all var(--transition-base);flex-shrink:0;display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--gray);white-space:nowrap}
.carriers__logo:hover{opacity:1;filter:grayscale(0%);color:var(--blue)}
@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── Testimonials ── */
.testimonial-card{background:var(--white);border:1px solid var(--border);border-radius:var(--border-radius-lg);padding:var(--space-2xl);position:relative}
.testimonial-card__stars{display:flex;gap:2px;margin-bottom:var(--space-md);color:var(--cyan)}
.testimonial-card__stars svg{width:18px;height:18px}
.testimonial-card__text{font-size:var(--text-lg);font-weight:300;font-style:italic;line-height:1.7;color:var(--charcoal);margin-bottom:var(--space-lg)}
.testimonial-card__author{font-weight:600;font-size:var(--text-sm);color:var(--navy)}
.testimonial-card__source{font-size:var(--text-xs);color:var(--gray)}
.testimonial-card__quote-mark{position:absolute;top:var(--space-lg);right:var(--space-xl);font-size:5rem;color:var(--light-bg);line-height:1;pointer-events:none;font-weight:600}

/* ── Steps ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2xl);counter-reset:step}
.step{text-align:center;position:relative}
.step__number{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:var(--white);font-size:var(--text-2xl);font-weight:600;margin-bottom:var(--space-lg)}
.step__title{font-size:var(--text-xl);font-weight:600;color:var(--navy);margin-bottom:var(--space-sm)}
.step__text{color:var(--slate);font-weight:300;max-width:300px;margin:0 auto}
.step:not(:last-child)::after{content:'';position:absolute;top:28px;left:calc(50% + 40px);width:calc(100% - 80px);height:2px;background:var(--border)}
@media(max-width:768px){.steps{grid-template-columns:1fr;gap:var(--space-xl)}.step:not(:last-child)::after{display:none}}

/* ── CTA Banner ── */
.cta-banner{background:var(--navy);padding:var(--space-3xl) 0;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(32,188,238,.08) 0%,transparent 60%)}
.cta-banner__title{color:var(--white);font-size:var(--text-4xl);margin-bottom:var(--space-md);position:relative}
.cta-banner__text{color:rgba(255,255,255,.75);font-size:var(--text-lg);font-weight:300;margin-bottom:var(--space-2xl);max-width:600px;margin-left:auto;margin-right:auto;position:relative}
.cta-banner__actions{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap;position:relative}

/* ── Forms ── */
.form-group{margin-bottom:var(--space-lg)}
.form-group label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--navy);margin-bottom:var(--space-xs)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--border-radius);font-family:var(--font-body);font-size:var(--text-base);font-weight:300;color:var(--charcoal);background:var(--white);transition:border-color var(--transition-fast)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(48,151,211,.12)}
.form-group textarea{min-height:120px;resize:vertical}
.form-privacy{font-size:var(--text-xs);color:var(--gray);margin-top:var(--space-md);line-height:1.6}
.form-privacy a{color:var(--blue);text-decoration:underline}

/* ── FAQ ── */
.faq-item{border-bottom:1px solid var(--border)}
.faq-item__question{width:100%;background:none;border:none;padding:var(--space-lg) 0;font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600;color:var(--navy);text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color var(--transition-fast)}
.faq-item__question:hover{color:var(--blue)}
.faq-item__icon{width:24px;height:24px;flex-shrink:0;transition:transform var(--transition-base);color:var(--cyan)}
.faq-item--open .faq-item__icon{transform:rotate(45deg)}
.faq-item__answer{max-height:0;overflow:hidden;transition:max-height var(--transition-slow)}
.faq-item--open .faq-item__answer{max-height:500px}
.faq-item__answer-inner{padding-bottom:var(--space-lg);color:var(--slate);font-weight:300;line-height:1.8}

/* ── Footer ── */
.footer{background:var(--navy-dark);color:rgba(255,255,255,.75);padding:var(--space-3xl) 0 var(--space-xl)}
.footer a{color:rgba(255,255,255,.75)}
.footer a:hover{color:var(--cyan)}
.footer__grid{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-2xl)}
.footer__brand{max-width:320px}
.footer__logo{height:36px;margin-bottom:var(--space-lg)}
.footer__address{font-size:var(--text-sm);font-weight:300;line-height:1.8;margin-bottom:var(--space-md);font-style:normal}
.footer__contact-link{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);margin-bottom:var(--space-xs)}
.footer__contact-link svg{width:16px;height:16px;flex-shrink:0;opacity:0.6}
.footer__heading{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--white);margin-bottom:var(--space-lg)}
.footer__link-list{display:flex;flex-direction:column;gap:var(--space-sm)}
.footer__link-list a{font-size:var(--text-sm);font-weight:300}
.footer__socials{display:flex;gap:var(--space-md);margin-top:var(--space-lg)}
.footer__socials a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);transition:background var(--transition-fast)}
.footer__socials a:hover{background:var(--cyan);color:var(--navy-dark)}
.footer__socials svg{width:16px;height:16px}
.footer__bottom{max-width:var(--max-width);margin:var(--space-2xl) auto 0;padding:var(--space-lg) var(--space-xl) 0;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-md);font-size:var(--text-xs);color:rgba(255,255,255,.5)}
.footer__legal-links{display:flex;gap:var(--space-lg)}
.footer__legal-links a{color:rgba(255,255,255,.5);font-size:var(--text-xs)}
@media(max-width:768px){.footer__grid{grid-template-columns:1fr;gap:var(--space-xl)}.footer__bottom{flex-direction:column;text-align:center}}

/* ── Product pages ── */
.product-content{max-width:var(--max-width-narrow);margin:0 auto;padding:var(--space-section) var(--space-xl)}
.product-content h2{margin-top:var(--space-2xl)}
.product-content ul{list-style:disc;padding-left:var(--space-xl);margin-bottom:var(--space-md)}
.product-content li{margin-bottom:var(--space-sm);line-height:1.7;color:var(--slate);font-weight:300}
.product-meta{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg) 0;margin-top:var(--space-2xl);border-top:1px solid var(--border);font-size:var(--text-sm);color:var(--gray);font-weight:300}

/* ── Section Header ── */
.section-header{text-align:center;max-width:640px;margin:0 auto var(--space-2xl)}
.section-header__eyebrow{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--cyan);margin-bottom:var(--space-sm)}
.section-header h2{margin-bottom:var(--space-md)}
.section-header p{color:var(--slate);font-weight:300;margin:0 auto}

/* ── Skip link ── */
.skip-link{position:absolute;top:-40px;left:0;background:var(--navy);color:var(--white);padding:var(--space-sm) var(--space-md);z-index:9999;transition:top var(--transition-fast)}
.skip-link:focus{top:0}