*{box-sizing:border-box;}
html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:Arial,Helvetica,sans-serif;
  background:#0b0f14;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* header */
header{
  height:70px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  z-index:10;
}
header img.logo{
  height:38px;
}
.social{
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  gap:16px;
}
.social a{
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
}
.social svg{width:18px;height:18px;fill:currentColor;}

:root{
  /* row1 (2-column rows) and row2 (3-column rows) share these heights
     across every page, so every grid/section lines up site-wide */
  --row1-h: calc((100vh - 70px) * 0.42 + 100px);
  --row2-h: calc((100vh - 70px) * 0.58 + 100px);
  --olive:#789B4A;
  --navy:#0B5C8F;
  --taupe:#867874;
  --gold:#DEC150;
  --sky:#57C1E9;
}

/* hero grid (row1: 2 col, row2: 3 col) */
.grid{
  display:grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: var(--row1-h) var(--row2-h);
}
.grid > .row2{
  grid-column: 1 / span 2;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
}

/* additional sections: 2-col rows match row1's height, 3-col rows match row2's height */
.section{
  display:grid;
}
.section-2col{
  grid-template-columns: 1fr 1fr;
  height: var(--row1-h);
}
.section-2col-wide{
  grid-template-columns: 3fr 2fr;
  /* floor keeps About's icon+2 paragraphs+button panel from overflowing on shorter laptop screens */
  height: max(var(--row1-h), 545px);
}
/* Model Home Highlights' bottom photo row: matches the live page's measured ~717px height at 1280x800 */
.section-2col-wide-tall{
  grid-template-columns: 3fr 2fr;
  height: calc(var(--row2-h) + 200px);
}
/* same as .section-2col but 350px taller, for rows whose photo needs more room (e.g. a legend-heavy map) */
.section-2col-tall{
  grid-template-columns: 1fr 1fr;
  height: calc(var(--row1-h) + 350px);
}
.section-3col{
  grid-template-columns: repeat(3, 1fr);
  /* floor keeps the fullest panel using this row (Adult Living's 5-item list) from overflowing
     on shorter laptop screens */
  height: max(var(--row2-h), 460px);
}
.section-4col{
  grid-template-columns: repeat(4, 1fr);
  /* floor keeps Parks & Recreation's panel from overflowing on shorter laptop screens */
  height: max(var(--row2-h), 470px);
}
/* Area Highlights' 6-cell grid: desktop is 4 cols x 2 rows (row1: photo/panel/photo/photo;
   row2: two photos each spanning 2 cols). Tablet reflows to 3 cols x 2 rows so the panel
   isn't squeezed too narrow - the DOM order (photo,panel,photo,photo,photo,photo) regroups
   so the 4th photo (airplane) becomes the first item of row2 instead of staying in row1.
   Mobile stacks it to 1 column. */
.section-area-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  /* row1 has a floor height (via max()) so the two-list panel still fits without
     scrolling on shorter laptop screens, where --row2-h alone shrinks too far */
  grid-template-rows: max(var(--row2-h), 800px) calc(var(--row2-h) + 200px);
}
.section-area-grid .wide{
  grid-column: span 2;
}
@media (min-width:861px) and (max-width:1180px){
  .section-area-grid{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, calc(var(--row2-h) + 290px));
  }
  .section-area-grid .wide{
    grid-column: span 1;
  }
}
.section-full{
  grid-template-columns: 1fr;
  height: calc(var(--row1-h) * 1.4);
}
/* full-width row sized to match a 3-col row's height (e.g. a video paired with a 3-col row below it) */
.section-full-row2{
  grid-template-columns: 1fr;
  height: var(--row2-h);
}
/* same, but taller (e.g. a video row that should stand out above the row below it) */
.section-full-row2-tall{
  grid-template-columns: 1fr;
  height: calc(var(--row2-h) + 100px);
}
/* full-width row sized to match a 2-col row's height (e.g. About's top row) */
.section-full-row1{
  grid-template-columns: 1fr;
  height: var(--row1-h);
}
/* 3-col row sized to match a 2-col row's height instead of the usual row2-h,
   plus extra room so the taupe panel's copy never needs to scroll */
.section-3col-row1{
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--row1-h) + 200px);
}
/* 3-col row a bit taller than a plain 2-col row, for a sparse panel (e.g. a short bullet list, no paragraph) */
.section-3col-compact{
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--row1-h) + 80px);
}
/* full-width row matching .section-3col-compact's height */
.section-full-compact{
  grid-template-columns: 1fr;
  height: calc(var(--row1-h) + 80px);
}
/* 3-col row with extra room for a long-copy panel (e.g. a full year of events) */
.section-3col-xtall{
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--row2-h) + 150px);
}
/* Model Home Highlights' top row: matches the live page's measured ~603px height at 1280x800,
   with a floor so the panel doesn't overflow on shorter laptop screens */
.section-3col-tall80{
  grid-template-columns: repeat(3, 1fr);
  height: max(calc(var(--row2-h) + 80px), 610px);
}

/* Lifestyle's 6-cell grid: desktop shows it as 3 cols x 2 rows (photo/text/photo,
   photo/photo/photo). Tablet reflows it to 2 cols x 3 rows so no column gets too
   narrow to hold the long copy without a large internal scroll; the DOM order
   (truck, text, painting, band, platter, kids) regroups automatically into
   [truck+text] [painting+band] [platter+kids]. Mobile stacks it to 1 column. */
.section-6grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: calc(var(--row2-h) + 150px) var(--row2-h);
}
@media (min-width:861px) and (max-width:1180px){
  .section-6grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, calc(var(--row2-h) + 140px));
  }
}

.tile{
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
  color:#fff;
  text-decoration:none;
}
.tile#tile-north{
  background-position:center bottom;
}
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
}
.tile:hover .bg-img{
  transform:scale(1.06);
}
.bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .6s ease;
  z-index:0;
}
#tile-north .bg-img{ object-position:center bottom; }

.tile-content{
  position:relative;
  z-index:2;
  padding:28px 32px;
}
.tile h2, .heading{
  margin:0 0 16px;
  font-family:'Bree Serif', serif;
  font-weight:400;
  line-height:1.15;
  color:#fff;
  text-decoration:none;
}
/* hero tile headline, e.g. "North Florida" on the homepage tiles */
.tile h2{
  font-size:45px;
  text-shadow: 6px 4px 4px rgba(0,0,0,.4);
}
/* info-panel title, e.g. "North Florida Offers the Best of All Worlds" */
.heading{
  font-size:24px;
}
.btn{
  display:inline-block;
  padding:12px 20px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
  font-weight:400;
  color:#fff;
  text-decoration:none;
}
.btn-gold{ background:#DEC150; }
.btn-taupe{ background:#867874; }
.btn-navy{ background:#0B5C8F; }
.btn-olive{ background:var(--olive); }
.btn-sky{ background:#57C1E9; }

/* plain (non-clickable) photo column, no overlay/content */
.photo-col{
  overflow:hidden;
}
.photo-col img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.photo-col img.obj-right{
  object-position:right center;
}
.photo-col img.obj-center{
  object-position:center center;
}
.photo-col img.obj-top{
  object-position:center top;
}

/* solid-color info panel (icon + heading + copy), used alongside photo-col */
.info-panel{
  background:var(--olive);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px 40px;
  overflow-y:auto;
}
.info-panel.taupe{
  background:var(--taupe);
}
.info-panel.navy{
  background:var(--navy);
}
.info-panel.gold{
  background:var(--gold);
  color:#000;
}
.info-panel.gold .heading{
  color:#000;
}
.info-panel.sky{
  background:var(--sky);
  color:#000;
}
.info-panel.sky .heading{
  color:#000;
}
.info-panel .heading.repeat{
  margin-top:24px;
}
.info-panel img.icon{
  height:44px;
  width:auto;
  align-self:flex-start;
  margin-bottom:20px;
}
.info-panel img.icon.icon-small{
  height:25px;
}
.info-panel img.icon.icon-medium{
  height:34px;
}
.info-panel ul{
  margin:0;
  padding-left:20px;
  font-size:16px;
  line-height:1.5;
}
.info-panel li{
  margin-bottom:0;
}
.info-panel p{
  margin:0 0 20px;
  font-size:16px;
  line-height:1.5;
}
.info-panel .subheading{
  margin:0 0 8px;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:1.5;
  color:#fff;
}
.info-panel .btn{
  align-self:flex-start;
}
.info-panel.with-media{
  justify-content:flex-start;
}
.info-panel .panel-media{
  flex:1;
  min-height:0;
  margin-top:8px;
  overflow:hidden;
}
.info-panel .panel-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* full-bleed autoplaying background video */
.video-col{
  position:relative;
  overflow:hidden;
}
.video-col iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  min-width:177.78vh; /* keep 16:9 video covering the box at any aspect ratio */
  min-height:56.25vw;
  transform:translate(-50%, -50%);
  border:0;
  pointer-events:none;
}
/* nav arrows */
.page-nav{
  position:fixed;
  right:24px;
  bottom:24px;
  display:flex;
  gap:8px;
  z-index:20;
}
.page-nav a{
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.85);
  color:#12233f;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.page-nav a:hover{ background:#fff; }

/* Testimonials page: a centered, boxed (not full-bleed) row of 3 video+quote cards,
   on a white page background instead of the site's usual dark letterboxing */
body.testimonials-page{
  background:#fff;
}
.testimonials-wrap{
  max-width:1024px;
  margin:0 auto;
  padding:80px 24px 60px;
}
.testimonials-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:29px;
}
/* Real YouTube iframe embed. Note: these three specific videos currently have
   embedding disabled on YouTube's side (Error 153) - waiting on the channel owner
   to flip "Allow embedding" on in YouTube Studio for each video. */
.testimonial-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.testimonial-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.testimonial-quote{
  height:454px;
  padding:60px 38px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.testimonial-quote.taupe{ background:var(--taupe); }
.testimonial-quote.navy{ background:var(--navy); }
.testimonial-quote.olive{ background:var(--olive); }
.testimonial-quote .quote{
  margin:0 0 11px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  font-weight:700;
  font-style:italic;
  line-height:1.3;
  color:#fff;
}
.testimonial-quote .attribution{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  font-weight:700;
  color:#fff;
}

/* Contact Info page: full-bleed hero photo behind a translucent green contact panel,
   sitting in the middle of a centered 1024px 1fr/2fr/3fr column split (matches the live
   page's exact grid: panel occupies the middle 2fr column). */
.contact-hero{
  position:relative;
  height:max(calc(100vh - 70px), 850px);
  background:url('images/tributary-92_ret.98b3fb611682.jpg') center/cover no-repeat;
  display:flex;
  justify-content:center;
}
.contact-hero-inner{
  width:100%;
  max-width:1024px;
  height:100%;
  display:grid;
  grid-template-columns: 1fr 2fr 3fr;
}
.contact-panel{
  grid-column:2;
  background:rgba(120,155,74,.91);
  color:#fff;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:52px 25px 0;
  overflow-y:auto;
}
.contact-panel .logo-tag{
  width:259px;
  max-width:100%;
  margin-bottom:63px;
}
.contact-panel h3{
  margin:0 0 12px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:32px;
  font-weight:700;
  color:#fff;
}
.contact-panel .phone{
  display:inline-block;
  margin-bottom:44px;
  font-size:24px;
  color:#fff;
  text-decoration:underline;
}
.contact-panel .btn{
  display:inline-block;
  padding:12px 20px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  letter-spacing:.8px;
  color:#fff;
  text-decoration:none;
}
.contact-panel .btn.navy{ background:var(--navy); margin-bottom:40px; }
.contact-panel .btn.taupe{ background:var(--taupe); margin-bottom:44px; }
.contact-panel .gp-logo{
  width:177px;
  max-width:70%;
  margin-bottom:16px;
}
.contact-panel .disclaimer{
  margin:0 0 5.5px;
  font-size:10px;
  line-height:15px;
  color:#fff;
}
.contact-panel .copyright{
  margin:0 0 5.5px;
  font-size:10px;
  line-height:15px;
  color:#fff;
}
.contact-panel .eho{
  width:37px;
  margin-bottom:25px;
}
/* mobile-only top photo strip and address link (hidden on desktop, where the panel
   overlays the full-bleed photo directly and the address isn't shown at all) */
.contact-hero-photo{
  display:none;
}
.contact-panel .address{
  display:none;
  margin-bottom:16px;
  font-size:16px;
  color:#fff;
  text-decoration:underline;
}

@media (max-width: 860px){
  .grid, .section-2col, .section-2col-tall, .section-2col-wide, .section-2col-wide-tall, .section-3col, .section-3col-tall80, .section-4col, .section-3col-row1, .section-3col-compact, .section-3col-xtall, .section-full, .section-full-row2, .section-full-row2-tall, .section-full-row1, .section-full-compact, .section-6grid, .section-area-grid{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height:auto;
  }
  .grid > .row2{
    grid-column:auto;
    grid-template-columns:1fr;
  }
  .section-area-grid .wide{
    grid-column:auto;
  }
  .tile, .photo-col, .video-col{ height:70vh; }
  .info-panel{ height:auto; padding:60px 32px; }
  .info-panel .panel-media{ flex:none; height:50vh; margin-top:24px; }
  .tile h2{ font-size:30px; }
  .testimonials-row{
    grid-template-columns: 1fr;
    gap:40px;
  }
  .testimonial-quote{
    height:auto;
    padding:32px 24px;
  }
  .contact-hero{
    height:auto;
    min-height:0;
    background:none;
    display:block;
    padding:0;
  }
  .contact-hero-photo{
    display:block;
    width:100%;
    height:38vh;
    object-fit:cover;
  }
  .contact-hero-inner{
    display:block;
    max-width:100%;
    height:auto;
  }
  .contact-panel{
    grid-column:auto;
    height:auto;
    background:var(--olive);
    padding:40px 24px 32px;
  }
  .contact-panel h3::after{
    content:":";
  }
  .contact-panel .address{
    display:block;
  }
}