.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-ea95232 *//* ============================================================
   US Philanthropy Circle
   Hope Through Education Charity Golf Classic

   Responsive shared base styles
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
============================================================ */

:root{
  --navy:#0b2545;
  --navy-800:#0f2e57;
  --navy-900:#071b33;

  --green:#14603a;
  --green-700:#0f4d2e;

  --gold:#c69a3f;
  --gold-600:#b1852f;

  --cream:#f7f4ec;
  --cream-200:#efe9dc;

  --paper:#ffffff;

  --ink:#1d2733;
  --muted:#5c6672;

  --line:#e6e0d3;

  --shadow:
    0 18px 40px -24px rgba(11,37,69,.35);

  --shadow-soft:
    0 12px 32px rgba(11,37,69,.10);

  --radius:14px;
  --radius-lg:20px;

  --maxw:1140px;

  --display:
    "Fraunces",
    Georgia,
    "Times New Roman",
    serif;

  --body:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}


/* ============================================================
   RESET / BASE
============================================================ */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body{
  margin:0;

  font-family:var(--body);

  color:var(--ink);
  background:var(--cream);

  line-height:1.6;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}


/* ============================================================
   TYPOGRAPHY
============================================================ */

h1,
h2,
h3{
  font-family:var(--display);

  font-weight:600;
  line-height:1.1;

  color:var(--navy);

  margin:0 0 .4em;
}

h1{
  font-size:clamp(
    2.15rem,
    5vw,
    3.7rem
  );

  letter-spacing:-.02em;
}

h2{
  font-size:clamp(
    1.7rem,
    3.4vw,
    2.55rem
  );

  letter-spacing:-.01em;
}

h3{
  font-size:1.2rem;
}

p{
  margin:0 0 1rem;
}


/* ============================================================
   CONTAINER / HELPERS
============================================================ */

.container{
  width:100%;

  max-width:var(--maxw);

  margin:0 auto;

  padding-left:24px;
  padding-right:24px;
}

.muted{
  color:var(--muted);
}

.center{
  text-align:center;

  margin-left:auto;
  margin-right:auto;
}


/* ============================================================
   TOP UTILITY BAR
============================================================ */

.topbar{
    .nav-links
  position:relative;
  z-index:60;

  background:
    linear-gradient(
      90deg,
      var(--navy-900),
      var(--navy)
    );

  color:#dfe6f1;

  font-size:.8rem;
  letter-spacing:.025em;
}

.topbar .container{
  min-height:38px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:10px 14px;

  padding-top:7px;
  padding-bottom:7px;

  flex-wrap:wrap;

  text-align:center;
}

.topbar span:nth-child(2){
  color:var(--gold);
}


/* ============================================================
   BRAND EMBLEM
============================================================ */

.emblem{
  width:100%;
  height:100%;
  display:block;
}


/* ============================================================
   NAVIGATION
============================================================ */

.nav{
  position:sticky;

  top:0;

  z-index:50;

  background:
    rgba(247,244,236,.94);

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);

  border-bottom:
    1px solid rgba(230,224,211,.9);

  box-shadow:
    0 4px 20px rgba(11,37,69,.04);
}

.nav-inner{
  min-height:76px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:24px;

  padding-top:12px;
  padding-bottom:12px;
}


/* ============================================================
   BRAND
============================================================ */

.brand{
  min-width:0;

  display:flex;

  align-items:center;

  gap:12px;
}

.brand-mark{
  width:48px;
  height:48px;

  flex:none;

  background:
    linear-gradient(
      145deg,
      var(--navy),
      var(--navy-800)
    );

  border-radius:12px;

  display:grid;
  place-items:center;

  padding:7px;

  box-shadow:
    0 10px 24px rgba(11,37,69,.18);
}

.brand-text{
  min-width:0;
}

.brand-title{
  font-family:var(--display);

  font-weight:600;

  color:var(--navy);

  font-size:1.05rem;
  line-height:1.05;

  letter-spacing:.055em;

  text-transform:uppercase;
}

.brand-sub{
  margin-top:4px;

  font-size:.7rem;

  color:var(--muted);

  letter-spacing:.04em;

  line-height:1.2;
}


/* ============================================================
   DESKTOP NAVIGATION LINKS
============================================================ */

.nav-links{
  display:flex;

  align-items:center;

  gap:22px;
}

.nav-links a{
  position:relative;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  font-size:.9rem;
  font-weight:600;

  color:var(--navy);

  padding:8px 2px;

  transition:
    color .2s ease,
    opacity .2s ease;
}

.nav-links a:not(.btn)::before{
  content:"";

  position:absolute;

  left:50%;
  bottom:2px;

  width:0;
  height:2px;

  transform:translateX(-50%);

  border-radius:20px;

  background:var(--gold);

  transition:
    width .22s ease;
}

.nav-links a:not(.btn):hover{
  color:var(--green);
}

.nav-links a:not(.btn):hover::before{
  width:100%;
}

.nav-links a:not(.btn).active{
  color:var(--green);
}

.nav-links a:not(.btn).active::before{
  width:100%;
}


/* ============================================================
   MOBILE MENU TOGGLE
============================================================ */

.mobile-toggle{
  display:none;

  width:44px;
  height:44px;

  flex:none;

  align-items:center;
  justify-content:center;

  background:#fff;

  border:
    1px solid var(--line);

  border-radius:11px;

  color:var(--navy);

  font-size:1.35rem;
  line-height:1;

  padding:0;

  cursor:pointer;

  box-shadow:
    0 6px 18px rgba(11,37,69,.08);

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .15s ease;
}

.mobile-toggle:hover{
  background:var(--navy);

  color:#fff;

  border-color:var(--navy);
}

.mobile-toggle:active{
  transform:scale(.96);
}


/* ============================================================
   BUTTONS
============================================================ */

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  min-height:46px;

  padding:11px 22px;

  border:
    1.5px solid transparent;

  border-radius:999px;

  font-size:.9rem;
  font-weight:650;

  letter-spacing:.01em;

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-800)
    );

  color:#fff;

  box-shadow:
    0 8px 20px rgba(11,37,69,.12);
}

.btn-primary:hover{
  background:
    linear-gradient(
      135deg,
      var(--navy-800),
      var(--navy)
    );

  box-shadow:
    0 14px 28px rgba(11,37,69,.18);
}

.btn-gold{
  background:
    linear-gradient(
      135deg,
      var(--gold),
      #d3ae5d
    );

  color:var(--navy);
}

.btn-gold:hover{
  background:var(--gold-600);

  box-shadow:var(--shadow);
}

.btn-green{
  background:
    linear-gradient(
      135deg,
      var(--green),
      var(--green-700)
    );

  color:#fff;
}

.btn-green:hover{
  box-shadow:
    0 12px 24px rgba(20,96,58,.18);
}

.btn-outline{
  background:transparent;

  border-color:var(--navy);

  color:var(--navy);
}

.btn-outline:hover{
  background:var(--navy);

  color:#fff;
}


/* ============================================================
   ACCESSIBILITY
============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:
    3px solid rgba(198,154,63,.55);

  outline-offset:3px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 960px){

  .container{
    padding-left:20px;
    padding-right:20px;
  }

  .nav-inner{
    min-height:70px;
  }

  /*
     Toggle becomes visible here
  */
  .mobile-toggle{
    display:inline-flex;
  }

  /*
     Mobile / tablet dropdown
  */
  .nav-links{
      
    height: 100vh;
    position:absolute;

    top:calc(100% + 1px);

    left:0;
    right:0;

    width:100%;

    display:none;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    padding:
      12px 20px
      20px;

    background:
      rgba(247,244,236,.99);

    border-bottom:
      1px solid var(--line);

    box-shadow:
      0 18px 32px rgba(11,37,69,.12);
  }

  /*
     Your existing JS adds .open
  */
  .nav-links.open{
    display:flex;
  }

  .nav-links a{
    width:100%;

    justify-content:flex-start;

    padding:13px 10px;

    border-radius:9px;

    font-size:.95rem;
  }

  .nav-links a:not(.btn)::before{
    display:none;
  }

  .nav-links a:not(.btn):hover{
    background:
      rgba(20,96,58,.07);

    color:var(--green);
  }

  .nav-links a:not(.btn).active{
    background:
      rgba(198,154,63,.12);

    color:var(--navy);
  }

  .nav-links .btn{
    width:100%;

    margin-top:8px;

    justify-content:center;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px){

  :root{
    --radius:12px;
    --radius-lg:16px;
  }

  html{
    scroll-padding-top:82px;
  }

  .container{
    padding-left:16px;
    padding-right:16px;
  }

  .topbar{
    font-size:.72rem;
  }

  .topbar .container{
    min-height:34px;

    gap:4px 8px;

    padding-top:6px;
    padding-bottom:6px;
  }

  .nav-inner{
    min-height:64px;

    gap:12px;

    padding-top:9px;
    padding-bottom:9px;
  }

  .brand{
    gap:9px;
  }

  .brand-mark{
    width:42px;
    height:42px;

    border-radius:10px;
  }

  .brand-title{
    font-size:.88rem;

    letter-spacing:.045em;
  }

  .brand-sub{
    font-size:.62rem;

    max-width:180px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
  }

  .mobile-toggle{
    display:inline-flex;

    width:42px;
    height:42px;

    font-size:1.25rem;
  }

  .nav-links{
    padding:
      10px 16px
      18px;
  }

  .nav-links a{
    padding:
      12px
      10px;
  }

  .btn{
    min-height:44px;

    padding:
      10px
      18px;

    font-size:.88rem;
  }

}


/* ============================================================
   EXTRA SMALL MOBILE
============================================================ */

@media (max-width: 400px){

  .brand-sub{
    display:none;
  }

  .brand-title{
    max-width:180px;

    font-size:.82rem;
  }

  .brand-mark{
    width:40px;
    height:40px;
  }

  .mobile-toggle{
    width:40px;
    height:40px;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }

}/* End custom CSS */