/* =============================================
   ARK SEACOAST — Main Stylesheet
   Brand: Navy #1B3A5C | Magenta #B5005B | White
   Cinzel for business name, Cormorant for display,
   DM Sans for body
   ============================================= */

:root {
  --navy:        #1B3A5C;
  --navy-deep:   #102236;
  --navy-mid:    #254E7A;
  --magenta:     #B5005B;
  --magenta-lt:  #D4337F;
  --magenta-pale:#F5D6E6;
  --cream:       #F8F6F2;
  --warm-white:  #FDFCFA;
  --parchment:   #EEE9E0;
  --text:        #1A1A2E;
  --muted:       #5A6070;
  --border:      rgba(27,58,92,0.12);
  --border-mag:  rgba(181,0,91,0.15);

  --nav-h:       78px;
  --section-pad: clamp(64px, 8vw, 108px);
  --page-pad:    clamp(16px, 5.5vw, 88px);
  --radius:      3px;
  --shadow-sm:   0 2px 14px rgba(27,58,92,0.09);
  --shadow-md:   0 8px 36px rgba(27,58,92,0.14);
  --shadow-lg:   0 24px 64px rgba(27,58,92,0.20);
}

/* --- RESET --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; font-size:18px; }
body { font-family:'DM Sans',sans-serif; background:var(--warm-white); color:var(--text); overflow-x:hidden; }
img  { display:block; max-width:100%; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }

/* --- TYPOGRAPHY --- */
/* Cinzel = business name only */
.cinzel {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
}
.t-overline {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--magenta);
}
.t-display {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(44px, 5.2vw, 74px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--navy);
}
.t-display em { font-style: italic; color: var(--navy-mid); }
.t-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
}
.t-body { font-size: 17px; line-height: 1.82; color: var(--muted); font-weight: 300; }
.t-small { font-size: 15px; line-height: 1.7; color: var(--muted); }

/* --- LAYOUT --- */
.container { width:100%; max-width:1320px; margin:0 auto; padding:0 var(--page-pad); box-sizing:border-box; }
.section { padding: var(--section-pad) 0; }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all 0.22s ease;
  cursor: pointer;
  border: none;
  font-family: 'DM Sans', sans-serif;
}
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-mid); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-magenta { background: var(--magenta); color: #fff; }
.btn-magenta:hover { background: var(--magenta-lt); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline-navy { border: 1.5px solid var(--navy); color: var(--navy); background: transparent; }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-outline-white { border: 1.5px solid rgba(255,255,255,0.5); color: #fff; background: rgba(255,255,255,0.07); }
.btn-outline-white:hover { background: rgba(255,255,255,0.16); border-color: #fff; }
.btn-ghost-mag { color: var(--magenta); background: none; border: none; padding-left:0; font-size:13px; }
.btn-ghost-mag::after { content:'→'; margin-left:6px; transition:transform 0.2s; display:inline-block; }
.btn-ghost-mag:hover::after { transform:translateX(5px); }

/* --- TAGS --- */
.tag { display:inline-block; padding:6px 16px; border-radius:20px; font-size:14px; letter-spacing:0.04em; }
.tag-navy   { background:rgba(27,58,92,0.1);  color:var(--navy); }
.tag-mag    { background:rgba(181,0,91,0.1);  color:var(--magenta); }

/* --- CARDS --- */
.card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }

/* --- PHOTO FRAME --- */
.photo-frame { position:relative; overflow:hidden; border-radius:var(--radius); }
.photo-frame img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.photo-frame:hover img { transform:scale(1.04); }
.photo-caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:18px 22px;
  background:linear-gradient(transparent, rgba(16,34,54,0.75));
  color:#fff; font-size:12.5px; letter-spacing:0.07em; text-transform:uppercase;
  opacity:0; transform:translateY(6px);
  transition:opacity 0.3s, transform 0.3s;
}
.photo-frame:hover .photo-caption { opacity:1; transform:none; }

/* --- REVEAL ANIMATION --- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* --- DIVIDER IMG --- */
.divider-wrap { padding:8px 0; text-align:center; }
.divider-wrap img { max-width:600px; margin:0 auto; }

/* --- RESPONSIVE --- */
@media (max-width:900px) { :root { --section-pad:60px; } }
@media (max-width:560px) { :root { --section-pad:44px; } }