/*
Theme Name: 7220 Travel
Theme URI: https://7220travel.com
Author: 7220 Travel
Description: Custom theme for 7220 Travel, a family, group, and youth sports team travel planning business run by Dave Engel.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: seventwenty-travel
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --c-navy: #0B2D4D;
  --c-navy-dark: #071f38;
  --c-red: #F28C28;
  --c-red-dark: #d97613;
  --c-blue: #1689C9;
  --c-teal: #2AA7A1;
  --c-sage: #6F8F5B;
  --c-gold: #E8D3A7;
  --c-cream: #FAF8F2;
  --c-ink: #1f2937;
  --c-ink-light: #4a5563;
  --c-border: #e7e3da;
  --c-white: #ffffff;
  --font-head: 'Poppins', 'Montserrat', sans-serif;
  --font-body: 'Lato', 'Open Sans', sans-serif;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(11,45,77,.08);
  --max: 1160px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--c-ink);
  background:var(--c-white);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-blue); }
a:hover{ color:var(--c-navy); }
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--c-navy);
  line-height:1.2;
  font-weight:700;
  margin:0 0 .6em;
}
h1{ font-size:clamp(2rem,4vw,2.75rem); }
h2{ font-size:clamp(1.6rem,3vw,2.1rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
ul{ margin:0 0 1em; padding-left:1.3em; }
.container{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* Accessibility: focus states + skip link */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--c-red);
  outline-offset:2px;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--c-navy);
  color:#fff;
  padding:12px 20px;
  z-index:10000;
  border-radius:0 0 6px 0;
  font-weight:700;
}
.skip-link:focus{ left:0; }
.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:6px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
  font-family:var(--font-body);
}
.btn-primary{ background:var(--c-red); color:#fff; }
.btn-primary:hover{ background:var(--c-red-dark); color:#fff; }
.btn-outline{ border-color:var(--c-navy); color:var(--c-navy); background:transparent; }
.btn-outline:hover{ background:var(--c-navy); color:#fff; }
.btn-outline-light{ border-color:#fff; color:#fff; background:transparent; }
.btn-outline-light:hover{ background:#fff; color:var(--c-navy); }
.btn-light{ background:#fff; color:var(--c-navy); }
.btn-light:hover{ background:var(--c-cream); }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header{
  border-bottom:1px solid transparent;
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:transparent;
  z-index:500;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));
  opacity:1;
  transition:opacity .25s ease;
}
.site-header.is-scrolled{
  background:#fff;
  border-bottom-color:var(--c-border);
  box-shadow:0 2px 10px rgba(11,45,77,.08);
}
.site-header.is-scrolled::before{ opacity:0; }
.site-header .container{ padding-top:12px; padding-bottom:12px; }
.header-row{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;
}
.site-branding{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:0 0 auto;
  white-space:nowrap;
}
.site-branding img{ height:44px; width:44px; border-radius:8px; flex-shrink:0; }
.site-branding .site-title{
  font-family:var(--font-head);
  font-weight:800;
  color:var(--c-navy);
  font-size:1.05rem;
  line-height:1.15;
}
.site-branding .site-tagline{ display:none; }

.primary-nav{ flex:1 1 auto; min-width:0; overflow:hidden; }
.nav-menu{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(10px, 1.6vw, 22px);
  margin:0;
  padding:0;
  flex-wrap:nowrap;
}
.nav-menu li{ white-space:nowrap; }
.nav-menu a{
  text-decoration:none;
  color:#fff;
  font-weight:600;
  font-size:clamp(13px, 1vw, 15px);
}
.nav-menu a:hover{ color:var(--c-red); }
.nav-menu .current-menu-item > a{ color:var(--c-red); }
.site-header.is-scrolled .nav-menu a{ color:var(--c-navy); }
.site-header.is-scrolled .nav-menu a:hover{ color:var(--c-red); }

.header-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  white-space:nowrap;
  margin-left:auto;
}
.header-phone{
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
}
.header-phone:hover{ color:var(--c-red); }
.site-header.is-scrolled .header-phone{ color:var(--c-ink-light); }
.btn-compact{ padding:10px 16px; font-size:13px; white-space:nowrap; }

.nav-toggle{
  display:none;
  background:none;
  border:2px solid #fff;
  color:#fff;
  border-radius:6px;
  padding:6px 12px;
  font-size:20px;
  line-height:1;
}
.site-header.is-scrolled .nav-toggle{ border-color:var(--c-navy); color:var(--c-navy); }

@media (max-width:1080px){
  .header-phone{ display:none; }
  .nav-menu{ gap:clamp(8px, 1.2vw, 16px); }
}

@media (max-width:900px){
  .header-row{ flex-wrap:wrap; }
  .nav-toggle{ display:inline-block; order:2; }
  .header-right{ order:2; margin-left:auto; }
  .header-phone{ display:none; }
  .primary-nav{
    order:3;
    width:100%;
    flex-basis:100%;
  }
  .nav-menu{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    width:100%;
    background:#fff;
    border-top:1px solid var(--c-border);
    margin-top:14px;
    padding:4px 4px 8px;
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:0 12px 24px rgba(11,45,77,.14);
  }
  .nav-menu.is-open{ display:flex; }
  .nav-menu li{ width:100%; border-bottom:1px solid var(--c-border); white-space:normal; }
  .nav-menu a{ display:block; padding:14px 4px; font-size:15px; color:var(--c-navy); }
  .btn-compact{ padding:9px 16px; font-size:13px; }

  .hero{
    min-height:max(760px, 100svh);
    background-position:center center;
  }
  .hero .container{
    padding-top:120px;
    padding-bottom:52px;
  }
  .hero h1{
    font-size:clamp(2.35rem, 9vw, 3.25rem);
    line-height:1.05;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  color:#fff;
  text-align:left;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(10,20,35,.05) 0%,rgba(10,20,35,.35) 45%,rgba(10,20,35,.92) 100%);
}
.hero .container{
  position:relative;
  z-index:2;
  max-width:none;
  width:100%;
  margin:0;
  padding-left:clamp(24px, 6vw, 90px);
  padding-right:24px;
  padding-bottom:90px;
}
.hero .hero-content{ max-width:640px; }
.hero .eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
  font-size:13px;
  color:var(--c-gold);
  margin-bottom:18px;
}
.hero h1{
  color:#fff;
  font-size:3.5rem;
  line-height:1.02;
  letter-spacing:-.01em;
  margin-bottom:24px;
}
.hero .lead{ font-size:16px; color:#e7edf3; margin-bottom:34px; max-width:520px; }
.hero-actions{ display:flex; gap:18px; justify-content:flex-start; flex-wrap:wrap; }
.btn-pill{
  border-radius:100px;
  padding:16px 34px;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.08em;
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.hero-trust{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-top:38px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.25);
}
.hero-trust img{ height:46px; width:auto; background:#fff; border-radius:8px; padding:5px 8px; }
.hero-trust p{ margin:0; max-width:340px; color:#d7e0ea; font-size:14px; }

/* ==========================================================================
   Generic section
   ========================================================================== */
.section{ padding:80px 0; }
.section-clock{ position:relative; overflow:hidden; }
.clock-bg{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(70vw,620px);
  height:min(70vw,620px);
  color:var(--c-navy);
  opacity:.06;
  pointer-events:none;
}
.clock-second{
  transform-origin:200px 200px;
  animation:clock-tick 60s steps(60,end) infinite;
}
@keyframes clock-tick{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .clock-second{ animation:none; }
}
.section-cream{ background:var(--c-cream); }
.section-navy{ background:var(--c-navy); color:#fff; }
.section-navy h2{ color:#fff; }
.section-navy p{ color:#d7e0ea; }
.section-title{ text-align:center; max-width:680px; margin:0 auto 16px; }
.section-sub{ text-align:center; max-width:640px; margin:0 auto 48px; color:var(--c-ink-light); }
.section-navy .section-sub{ color:#c7d3e0; }

/* Photo band: a section with a background photo + dark overlay for legible white text */
.photo-band{
  position:relative;
  background-size:cover;
  background-position:center;
  color:#fff;
}
.photo-band::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,20,35,.6), rgba(10,20,35,.82));
}
.photo-band .container{ position:relative; z-index:1; }
.photo-band h2{ color:#fff; }
.photo-band p{ color:#e7edf3; }
.actions-center{ justify-content:center !important; }

/* ==========================================================================
   Trip type cards
   ========================================================================== */
.trip-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.trip-card{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:30px 24px;
  display:flex;
  flex-direction:column;
}
.trip-card.is-highlight{ border-color:var(--c-red); box-shadow:var(--shadow); }
.trip-card .tag{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:11px;
  font-weight:700;
  color:var(--c-red);
  margin-bottom:10px;
}
.trip-card p{ color:var(--c-ink-light); font-size:15px; flex-grow:1; }
.trip-card a{ font-weight:700; font-size:14.5px; text-decoration:none; }

/* ==========================================================================
   Destinations grid
   ========================================================================== */
.dest-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.dest-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  height:220px;
  display:flex;
  align-items:flex-end;
  text-decoration:none;
  background:#ddd center/cover no-repeat;
}
.dest-card::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72));
}
.dest-card span{
  position:relative; z-index:1;
  color:#fff; font-weight:700; font-size:16px;
  padding:16px;
  font-family:var(--font-head);
}
.dest-card small{ display:block; font-weight:400; font-size:12px; opacity:.85; }

/* ==========================================================================
   Fundraiser band
   ========================================================================== */
.fundraiser{
  position:relative;
  background-size:cover;
  background-position:center;
  color:#fff;
}
.fundraiser::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,20,35,.55), rgba(10,20,35,.86));
}
.fundraiser .container{ position:relative; z-index:1; }
.fundraiser h2{ color:#fff; }
.fundraiser-inner{ max-width:720px; margin:0 auto; text-align:center; }
.fundraiser p{ color:#e7edf3; }
.fundraiser ul{ text-align:left; max-width:460px; margin:0 auto 28px; color:#e7edf3; }

/* ==========================================================================
   About teaser
   ========================================================================== */
.about-teaser{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:52px;
  align-items:center;
}
.about-teaser img{ border-radius:var(--radius); }
.about-teaser .cert-row{ display:flex; gap:14px; margin-top:20px; flex-wrap:wrap; }
.about-teaser .cert-row img{ height:56px; width:auto; border-radius:0; }

/* ==========================================================================
   Quote / lead form
   ========================================================================== */
.quote-form-wrap{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:40px;
  max-width:760px;
  margin:0 auto;
}
.form-section-title{
  font-family:var(--font-head);
  color:var(--c-navy);
  font-size:1rem;
  font-weight:700;
  margin:32px 0 16px;
  padding-top:20px;
  border-top:1px solid var(--c-border);
}
.form-section-title:first-child{ margin-top:0; padding-top:0; border-top:none; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-weight:700; font-size:14px; color:var(--c-navy); }
.form-field .hint{ font-weight:400; color:var(--c-ink-light); font-size:12.5px; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field select,
.form-field textarea{
  border:1px solid #c9c2b3;
  border-radius:6px;
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:15px;
  width:100%;
  background:#fff;
  color:var(--c-ink);
}
.form-field textarea{ min-height:120px; resize:vertical; }
.form-checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0 20px;
}
.form-checkbox-row input[type="checkbox"]{
  width:19px;
  height:19px;
  flex:0 0 auto;
  accent-color:var(--c-red);
  cursor:pointer;
}
.form-checkbox-row label{
  font-weight:400;
  font-size:14.5px;
  color:var(--c-ink);
  cursor:pointer;
}
.date-range-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checkbox-list{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:6px; }
.checkbox-list label{ font-weight:400; display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--c-ink); }
.checkbox-list input[type="radio"]{ accent-color:var(--c-red); width:17px; height:17px; }
.required{ color:var(--c-red); }
.form-note{
  background:var(--c-cream);
  border-left:4px solid var(--c-red);
  border-radius:0 8px 8px 0;
  padding:16px 20px;
  font-size:14.5px;
  color:var(--c-ink-light);
  margin:0 0 28px;
  line-height:1.6;
}
.form-note strong{ color:var(--c-navy); }
.form-success{
  background:#e7f6ec; border:1px solid #a9d9b8; color:#205c33;
  padding:18px 20px; border-radius:8px; margin-bottom:24px; font-weight:600;
}
.form-error{
  background:#fbeceb; border:1px solid #eab6af; color:#8a2b21;
  padding:18px 20px; border-radius:8px; margin-bottom:24px; font-weight:600;
}

/* ==========================================================================
   Cards / FAQ / generic content page
   ========================================================================== */
.content-narrow{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--c-border); padding:22px 0; }
.faq-item h3{ margin-bottom:8px; font-size:1.1rem; }
.faq-group-title{ margin-top:44px; }

.page-hero{
  position:relative;
  background:var(--c-navy);
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:90px 0;
  text-align:center;
}
.page-hero.has-photo::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,20,35,.55), rgba(10,20,35,.85));
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; margin:0; }
.breadcrumb{ font-size:13px; color:#c7d3e0; margin-bottom:10px; }
.breadcrumb a{ color:#c7d3e0; }

/* ==========================================================================
   Destination single template
   ========================================================================== */
.dest-hero{
  height:340px;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:flex-end;
  color:#fff;
}
.dest-hero::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.75)); }
.dest-hero .container{ position:relative; z-index:1; padding-bottom:30px; }
.dest-hero h1{ color:#fff; margin-bottom:6px; }
.dest-meta{ font-size:14px; color:#e7edf3; }
.dest-meta span:not(:last-child)::after{ content:'•'; margin:0 10px; opacity:.6; }
.dest-body{ max-width:820px; margin:0 auto; }
.dest-body h2{ margin-top:2.2em; }
.dest-cta{
  background:var(--c-cream);
  border-radius:var(--radius);
  padding:32px;
  text-align:center;
  margin:40px 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--c-navy-dark); color:#c7d3e0; padding:56px 0 0; }
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-grid h4{ color:#fff; font-size:15px; margin-bottom:16px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:10px; }
.footer-grid a{ color:#c7d3e0; text-decoration:none; font-size:14.5px; }
.footer-grid a:hover{ color:#fff; }
.footer-social{ display:flex; gap:14px; margin-top:16px; }
.footer-social a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:14px;
}
.footer-bottom{
  text-align:center;
  font-size:12.5px;
  color:#8ea0b5;
  padding:22px 0 28px;
}
.footer-bottom p{ margin:0 0 6px; }

@media (max-width:900px){
  .trip-grid,.dest-grid{ grid-template-columns:repeat(2,1fr); }
  .about-teaser{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .container{ padding-left:18px; padding-right:18px; }
  .site-header .container{ padding-top:9px; padding-bottom:9px; }
  .header-row{ gap:10px; }
  .site-branding img{ width:42px; height:42px; }
  .header-right .btn-compact{ display:none; }
  .nav-toggle{
    min-width:44px;
    min-height:44px;
    padding:7px 11px;
  }
  .primary-nav{ margin-left:-18px; margin-right:-18px; width:calc(100% + 36px); flex-basis:calc(100% + 36px); }
  .nav-menu{ margin-top:9px; padding:4px 18px 8px; border-radius:0; }

  .hero{
    min-height:max(780px, 100svh);
    align-items:flex-end;
    background-position:52% center;
  }
  .hero::before{
    background:linear-gradient(180deg,rgba(7,20,34,.2) 0%,rgba(7,20,34,.34) 28%,rgba(7,20,34,.94) 72%,rgba(7,20,34,.98) 100%);
  }
  .hero .container{
    padding:104px 18px 34px;
  }
  .hero .hero-content{ max-width:none; }
  .hero .eyebrow{
    font-size:11px;
    letter-spacing:.14em;
    margin-bottom:10px;
  }
  .hero h1{
    font-size:clamp(2.15rem, 10.5vw, 2.75rem);
    line-height:1.04;
    margin-bottom:16px;
  }
  .hero .lead{
    font-size:15px;
    line-height:1.5;
    margin-bottom:22px;
  }
  .hero .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero .hero-actions .btn{
    width:100%;
    padding:13px 18px;
    text-align:center;
  }
  .hero-trust{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:9px;
    margin-top:22px;
    padding-top:18px;
  }
  .hero-trust img{
    width:100%;
    height:42px;
    object-fit:contain;
    padding:4px;
  }
  .hero-trust p{
    grid-column:1 / -1;
    max-width:none;
    font-size:12px;
    line-height:1.4;
  }

  .trip-grid,.dest-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .quote-form-wrap{ padding:24px; }
  .section{ padding:56px 0; }
  body{ font-size:16px; }
}

/* ========================================================================== 
   Travel guide resource library
   ========================================================================== */
.resource-hero{ padding:150px 0 92px; text-align:left; background-position:center 42%; }
.resource-hero::before{ background:linear-gradient(90deg,rgba(7,31,56,.94),rgba(7,31,56,.58) 58%,rgba(7,31,56,.28)); }
.resource-hero .container{ max-width:900px; margin-left:max(0px, calc((100vw - var(--max))/2)); }
.resource-hero .eyebrow,.resource-library .eyebrow,.resource-intro .eyebrow,.resource-cta .eyebrow{ color:var(--c-red); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:800; margin-bottom:10px; }
.resource-hero h1{ font-size:clamp(2.5rem,6vw,4.7rem); max-width:760px; }
.resource-hero p:not(.eyebrow){ max-width:680px; font-size:19px; color:#e4edf5; }
.resource-stat{ display:inline-flex; align-items:baseline; gap:9px; margin-top:18px; padding:9px 14px; border:1px solid rgba(255,255,255,.35); border-radius:100px; background:rgba(7,31,56,.36); font-size:14px; }
.resource-stat strong{ color:#fff; font-size:20px; }
.resource-intro-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,7vw,90px); align-items:start; }
.resource-intro-grid h2{ max-width:520px; font-size:clamp(2rem,4vw,3.2rem); }
.resource-intro-grid .btn{ margin-top:10px; }
.resource-toolbar{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:26px; }
.resource-toolbar h2{ margin-bottom:0; }
.resource-search{ width:min(100%,350px); }
.resource-search input{ width:100%; min-height:50px; border:1px solid var(--c-border); border-radius:100px; background:#fff; padding:12px 20px; font:inherit; color:var(--c-ink); box-shadow:0 4px 16px rgba(11,45,77,.05); }
.resource-search input:focus{ border-color:var(--c-blue); outline:3px solid rgba(22,137,201,.18); }
.resource-jump{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:56px; }
.resource-jump a{ display:inline-block; padding:8px 13px; border:1px solid var(--c-border); border-radius:100px; background:#fff; color:var(--c-navy); text-decoration:none; font-weight:700; font-size:13px; }
.resource-jump a:hover{ color:#fff; background:var(--c-navy); border-color:var(--c-navy); }
.guide-category{ scroll-margin-top:90px; margin-top:72px; }
.guide-category:first-of-type{ margin-top:0; }
.guide-category-header{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(280px,1.2fr); gap:32px; align-items:end; padding-bottom:20px; margin-bottom:28px; border-bottom:1px solid var(--c-border); }
.guide-category-header h3{ font-size:clamp(1.65rem,3vw,2.35rem); margin-bottom:0; }
.guide-category-header p:last-child{ color:var(--c-ink-light); margin:0; }
.guide-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.guide-card{ min-width:0; overflow:hidden; border:1px solid var(--c-border); border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(11,45,77,.06); transition:transform .2s ease,box-shadow .2s ease; }
.guide-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(11,45,77,.12); }
.guide-cover{ display:block; aspect-ratio:4/3; overflow:hidden; background:#e8edf2; border-bottom:1px solid var(--c-border); }
.guide-cover img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .25s ease; }
.guide-card:hover .guide-cover img{ transform:scale(1.025); }
.guide-cover-fallback{ display:grid; place-items:center; height:100%; text-align:center; color:var(--c-navy); font-family:var(--font-head); font-size:24px; font-weight:800; }
.guide-card-body{ padding:18px; }
.guide-type{ display:block; color:var(--c-ink-light); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }
.guide-card h4{ font-size:17px; line-height:1.3; margin-bottom:15px; }
.guide-link{ color:var(--c-blue); font-size:14px; font-weight:800; text-decoration:none; }
.guide-link:hover{ color:var(--c-red-dark); }
.guide-empty{ padding:28px; border:1px dashed var(--c-border); border-radius:var(--radius); text-align:center; background:#fff; color:var(--c-ink-light); }
.resource-cta{ background:var(--c-navy); color:#fff; text-align:center; }
.resource-cta-inner{ max-width:760px; }
.resource-cta h2{ color:#fff; }
.resource-cta p:not(.eyebrow){ color:#d7e0ea; }
.resource-cta .btn{ margin-top:12px; }

@media (max-width:1000px){
  .guide-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px){
  .resource-hero{ padding:124px 0 72px; }
  .resource-hero::before{ background:linear-gradient(180deg,rgba(7,31,56,.65),rgba(7,31,56,.94)); }
  .resource-hero p:not(.eyebrow){ font-size:17px; }
  .resource-intro-grid,.guide-category-header{ grid-template-columns:1fr; gap:16px; }
  .resource-toolbar{ display:block; }
  .resource-search{ width:100%; margin-top:22px; }
  .resource-jump{ flex-wrap:nowrap; overflow-x:auto; margin-left:-18px; margin-right:-18px; padding:0 18px 10px; scrollbar-width:thin; }
  .resource-jump a{ white-space:nowrap; }
  .guide-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
}
@media (max-width:480px){
  .resource-hero h1{ font-size:2.45rem; }
  .guide-grid{ grid-template-columns:1fr; }
  .guide-cover{ aspect-ratio:16/10; }
  .guide-card-body{ padding:16px; }
}