/* ==========================================================================
   Inovio Publishers — Master Stylesheet
   Converted from the Next.js/Tailwind source to plain CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
  /* Brand colors (matched from the original design tokens) */
  --navy: #171f33;
  --navy-foreground: #f5f6fa;
  --teal: #ff6200;
  --teal-foreground: #ffffff;
  --yellow: #ffa01c;
  --yellow-foreground: #26293b;
  --brand-gradient: linear-gradient(90deg, #ffa01c 0%, #ff6200 100%);
     --accent-start:#ffa01c;
    --accent-end:#ff6200;
    --accent-gradient:linear-gradient(90deg, var(--accent-start) 0%, var(--accent-end) 100%);
    --dark:#141417;
    --gray:#6b6f76;
    --bg:#ffffff;

  --background: #ffffff;
  --foreground: #232838;
  --muted: #f6f7fa;
  --muted-foreground: #6b7280;
  --border: #e6e6e6;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 999px;

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Poppins', sans-serif;

  --max-width: 1280px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: -0.01em; line-height: 1.2; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-full);
  padding: 14px 28px;
  border: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-teal { background: var(--brand-gradient); color: var(--teal-foreground); }
.btn-teal:hover { filter: brightness(1.08); }
.btn-navy { background: var(--navy); color: var(--navy-foreground); }
.btn-navy:hover { background: #101627; }
.btn-outline-light { background: transparent; border: 1.5px solid rgba(245,246,250,.3); color: var(--navy-foreground); }
.btn-outline-light:hover { background: rgba(245,246,250,.1); }
.btn-outline-navy { background: transparent; border: 1.5px solid rgba(23,31,51,.2); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: var(--navy-foreground); }
.btn-white { background: var(--background); color: var(--navy); }
.btn-white:hover { background: rgba(255,255,255,.9); }
.btn-block { width: 100%; }
.btn-sm { padding: 12px 24px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 50; }

.topbar { display: none; background: var(--navy); color: var(--navy-foreground); }
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 24px; font-size: 13px;
}
.topbar-msg { opacity: .8; }
.topbar-links { display: flex; align-items: center; gap: 24px; }
.topbar-links a { display: flex; align-items: center; gap: 8px; }
.topbar-links a:hover { color: var(--yellow); }
.icon-yellow { color: var(--yellow); flex-shrink: 0; }

.nav-main { border-bottom: 1px solid var(--border); background: rgba(255,255,255,.95); backdrop-filter: blur(6px); }
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
.brand img { height: 40px; width: auto; }

.nav-links { display: none; align-items: center; gap: 32px; }
.nav-links a { font-size: 14.5px; font-weight: 500; color: rgba(35,40,56,.8); transition: color .15s; }
.nav-links a:hover { color: var(--teal); }

.nav-actions { display: none; align-items: center; gap: 12px; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 8px; border-radius: 6px; color: var(--navy);
}

.mobile-menu { display: none; border-top: 1px solid var(--border); background: var(--background); }
.mobile-menu.is-open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 24px; }
.mobile-menu nav a { padding: 10px 12px; border-radius: 6px; font-size: 14.5px; font-weight: 500; color: rgba(35,40,56,.8); }
.mobile-menu nav a:hover { background: var(--muted); color: var(--teal); }
.mobile-menu .btn-row { display: flex; gap: 12px; margin-top: 8px; }
.mobile-menu .btn-row .btn { flex: 1; padding: 12px 20px; }

@media (min-width: 768px) { .topbar { display: block; } }
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-actions { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy) url('../assets/Group 1.jpg') center center / cover no-repeat;
  color: var(--navy-foreground);
}
.hero-glow-1 { display: none; }
.hero-glow-2 { display: none; }

.hero-grid { display: grid; gap: 48px; align-items: center; padding: 64px 24px; position: relative; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-full);
  background: rgba(255,98,0,.18); padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--yellow);
}
.hero h1 { margin-top: 24px; font-size: 34px; font-weight: 800; }
.hero-lede { margin-top: 24px; max-width: 560px; font-size: 17px; line-height: 1.65; color: rgba(245,246,250,.75); }

.hero-points { margin-top: 32px; display: grid; gap: 12px; }
.hero-points li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(245,246,250,.85); }
.check-icon { color: var(--teal); flex-shrink: 0; }

.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px; }

.quote-card { border-radius: var(--radius-2xl); background: var(--background); color: var(--foreground); padding: 28px; box-shadow: 0 25px 60px -20px rgba(0,0,0,.4); }
.quote-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.quote-card-head h2 { font-size: 20px; font-weight: 700; color: var(--navy); }
.pill-discount { border-radius: var(--radius-full); background: var(--yellow); color: var(--yellow-foreground); padding: 4px 12px; font-size: 12px; font-weight: 700; }

@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.1fr .9fr; padding: 96px 24px; } .hero h1 { font-size: 52px; } }
@media (min-width: 768px)  { .hero-points { grid-template-columns: 1fr 1fr; } .hero h1 { font-size: 44px; } }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid { display: grid; gap: 16px; }
.form-grid input,
.form-grid textarea {
  width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--background); padding: 13px 16px; font-size: 14px; color: var(--foreground);
  font-family: inherit; outline: none; transition: border-color .15s;
}
.form-grid input::placeholder, .form-grid textarea::placeholder { color: var(--muted-foreground); }
.form-grid input:focus, .form-grid textarea:focus { border-color: var(--teal); }
.form-note { text-align: center; font-size: 12px; color: var(--muted-foreground); }

.form-grid.form-dark input,
.form-grid.form-dark textarea {
  border-color: rgba(245,246,250,.25); background: rgba(245,246,250,.1); color: var(--navy-foreground);
}
.form-grid.form-dark input::placeholder, .form-grid.form-dark textarea::placeholder { color: rgba(245,246,250,.5); }
.form-grid.form-dark input:focus, .form-grid.form-dark textarea:focus { border-color: var(--yellow); }
.form-dark ~ .form-note { color: rgba(245,246,250,.6); }

.form-success {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border-radius: var(--radius-md); background: rgba(255,98,0,.1); padding: 40px 24px; text-align: center;
}
.form-success h3, .form-success p.title { font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 18px; }
.form-success p { font-size: 14px; color: var(--muted-foreground); }
.form-success svg { color: var(--teal); }
.form-success.hidden, .form-grid.hidden { display: none; }

/* ==========================================================================
   Generic section styles
   ========================================================================== */
.section { padding: 72px 24px; }
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.eyebrow-label { color: var(--teal); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow-label.on-dark { color: var(--yellow); }
.section-head h2, .section h2.section-title { margin-top: 10px; font-size: 30px; font-weight: 800; color: var(--navy); }
.section-head p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--muted-foreground); }
.bg-muted { background: var(--muted); }
.bg-navy { background: var(--navy); color: var(--navy-foreground); }

/* ---------- Why authors (image collage) ---------- */
.why-authors .wrap { display: grid; gap: 48px; align-items: center; }
.collage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 12px; max-width: 480px; margin: 0 auto; }
.collage img { border-radius: var(--radius-lg); box-shadow: 0 18px 34px -18px rgba(10,31,77,.3); object-fit: cover; width: 100%; height: 100%; }
.collage-side { position: relative; width: 40%; height: 260px; transform: translateY(24px); overflow: hidden; border-radius: var(--radius-lg); }
.collage-center { position: relative; z-index: 1; width: 46%; height: 300px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 25px 45px -20px rgba(10,31,77,.4); }
.why-authors-copy p { margin-top: 20px; font-size: 16px; line-height: 1.65; color: var(--muted-foreground); }
.cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
@media (min-width: 1024px) { .why-authors .wrap { grid-template-columns: 1fr 1fr; } }

/* ---------- Why choose us (feature cards) ---------- */
.card-grid-4 { margin-top: 48px; display: grid; gap: 24px; }
.feature-card {
  border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--background);
  padding: 28px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(10,31,77,.28); border-color: rgba(255,98,0,.4); }
.feature-icon {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--radius-xl); background: rgba(255,98,0,.1); color: var(--teal); margin-bottom: 20px;
}
.feature-card h3 { font-size: 17.5px; font-weight: 600; color: var(--navy); }
.feature-card ul { margin-top: 16px; display: grid; gap: 8px; }
.feature-card ul li { display: flex; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); }
.dot-yellow { flex-shrink: 0; margin-top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.center-ctas { margin-top: 48px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
@media (min-width: 640px) { .card-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .card-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Services features (grid of 6) ---------- */
.services-grid {
  margin-top: 56px; display: grid; gap: 1px; overflow: hidden;
  border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--border);
}
.service-tile { background: var(--background); padding: 32px; transition: background .15s; }
.service-tile:hover { background: var(--muted); }
.service-tile .feature-icon { background: var(--navy); color: var(--navy-foreground); }
.service-tile:hover .feature-icon { background: var(--teal); }
.service-tile h3 { margin-top: 20px; font-size: 17.5px; font-weight: 600; color: var(--navy); }
.service-tile p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); }
@media (min-width: 768px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Quote CTA (teal banner) ---------- */
.quote-cta-section { padding: 40px 24px 80px; background: var(--background); }
.quote-cta-banner {
  position: relative; overflow: hidden; border-radius: var(--radius-3xl); background: var(--teal);
  padding: 22px 42px; color: var(--teal-foreground);
}
.quote-cta-glow { position: absolute; left: -40px; top: -40px; width: 208px; height: 208px; border-radius: 50%; background: rgba(255,160,28,.25); filter: blur(50px); }
.quote-cta-grid { position: relative; display: grid; gap: 32px; align-items: center; }
.quote-cta-banner h2 { font-size: 26px; font-weight: 800; line-height: 1.3; }
.quote-cta-image { display: none; margin: 0 auto; width: 320px; height: 320px; }
.quote-cta-image img { object-fit: contain; width: 100%; height: 100%; }
@media (min-width: 768px) { .quote-cta-grid { grid-template-columns: 1.4fr .6fr; } .quote-cta-image { display: block; } .quote-cta-banner h2 { font-size: 32px; } }

/* ---------- Advantages ---------- */
.advantages .wrap { display: grid; gap: 48px; align-items: center; }
.advantages-list { margin-top: 32px; display: grid; gap: 16px; }
.advantages-list li { display: flex; align-items: flex-start; gap: 12px; }
.advantages-list .check-badge {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: var(--teal-foreground); margin-top: 2px;
}
.advantages-list span.text { font-size: 14.5px; line-height: 1.55; color: rgba(35,40,56,.9); }
.advantages-img { position: relative; margin: 0 auto; width: 100%; max-width: 420px; height: 320px; overflow: hidden; border-radius: var(--radius-3xl); box-shadow: 0 25px 45px -20px rgba(10,31,77,.35); }
.advantages-img img { object-fit: cover; width: 100%; height: 100%; }
@media (min-width: 1024px) { .advantages .wrap { grid-template-columns: 1fr 1fr; } }

/* ---------- Process (5 step) ---------- */
.process-grid { margin-top: 56px; display: grid; gap: 24px; }
.process-step { border-radius: var(--radius-2xl); border: 1px solid rgba(245,246,250,.1); background: rgba(245,246,250,.05); padding: 24px; transition: border-color .15s; }
.process-step:hover { border-color: rgba(255,98,0,.5); }
.process-step .num { font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--teal); }
.process-step h3 { margin-top: 16px; font-size: 16px; font-weight: 600; }
.process-step p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: rgba(245,246,250,.7); }
@media (min-width: 640px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Publishing services (tabs) ---------- */
.pub-services-layout { margin-top: 48px; display: grid; gap: 32px; }
.pub-tabs { display: flex; flex-direction: column; gap: 8px; border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--muted); padding: 12px; }
.pub-tab {
  border: none; background: none; border-radius: var(--radius-xl); padding: 12px 20px; text-align: left;
  font-size: 14px; font-weight: 600; color: rgba(35,40,56,.7); transition: background .15s, color .15s;
}
.pub-tab:hover { background: var(--background); color: var(--navy); }
.pub-tab.is-active { background: var(--teal); color: var(--teal-foreground); }
.pub-panel { display: grid; gap: 32px; align-items: center; border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--background); padding: 28px; }
.pub-panel h3 { font-size: 24px; font-weight: 700; color: var(--navy); }
.pub-panel p { margin-top: 16px; font-size: 15px; line-height: 1.65; color: var(--muted-foreground); }
.pub-panel .cta-row { margin-top: 28px; }
.pub-panel-img { position: relative; height: 260px; overflow: hidden; border-radius: var(--radius-xl); box-shadow: 0 15px 30px -15px rgba(10,31,77,.3); }
.pub-panel-img img { object-fit: cover; width: 100%; height: 100%; }
@media (min-width: 1024px) { .pub-services-layout { grid-template-columns: 320px 1fr; } .pub-panel { grid-template-columns: 1fr 1fr; } }

.badge-row { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.badge-item { display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--muted); padding: 22px 16px; text-align: center; }
.badge-item .feature-icon { width: 48px; height: 48px; border-radius: 50%; margin-bottom: 0; background: rgba(255,98,0,.1); color: var(--teal); }
.badge-item span.label { font-size: 13.5px; font-weight: 600; color: var(--navy); }
@media (min-width: 640px) { .badge-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .badge-row { grid-template-columns: repeat(5, 1fr); } }



  /* ===== Section wrapper ===== */
  .polaroid.module{
    padding:130px 0 20px;
  }
  .container{
    max-width:1140px;
    margin:0 auto;
    padding:0 20px;
  }
  .grid-construct.polaroid__box{
    text-align:center;
  }
  .main-heading{
    font-size:2.4rem;
    font-weight:800;
    line-height:1.3;
    margin:0 auto 22px;
  }
  .main-para{
    color:var(--gray);
    font-size:1rem;
    line-height:1.7;
    margin:0 auto 40px;
  }
  .main-para-width{
    max-width:640px;
  }

  /* ===== Tabs (renamed from Bootstrap nav-pills to avoid theme collisions) ===== */
  .tabs_home_portfolio{
    text-align:center;
  }
  .portfolio-tabs-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    list-style:none;
    padding:0;
    margin:0 0 55px;
  }
  .portfolio-tab-item{
    list-style:none;
  }
  .portfolio-tab-link{
    display:inline-block;
    text-decoration:none;
    color:var(--dark);
    font-weight:600;
    font-size:0.95rem;
    padding:10px 20px;
    border-radius:30px;
    cursor:pointer;
    transition:all .25s ease;
  }
  .portfolio-tab-link:hover{
    background:#f2f2f4;
  }
  .portfolio-tab-link.is-active{
    background:var(--accent-gradient);
    color:#fff;
    box-shadow:0 8px 18px rgba(255,98,0,.35);
  }

  /* ===== Tab panes (renamed from Bootstrap tab-content/tab-pane) ===== */
  .portfolio-tab-content{
    position:relative;
  }
  .portfolio-tab-pane{
    display:none;
  }
  .portfolio-tab-pane.is-active{
    display:block;
  }

  /* ===== Portfolio grid ===== */
  .portfolio_wrapper_bwl .row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:65px 40px;
    padding-top:10px;
  }
  .port-web-col-4{
    display:flex;
    justify-content:center;
  }

  /* card wrapper: this establishes the stacking context for front + back layers */
  .port-img.port-web-img-st{
    position:relative;
    width:100%;
    max-width:230px;
  }

  /* FRONT cover */
  .port-img.port-web-img-st a{
    position:relative;
    z-index:3;
    display:block;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 20px 35px rgba(20,20,23,.25);
    transition:box-shadow .4s ease;
  }
  .port-img.port-web-img-st a img{
    display:block;
    width:100%;
    aspect-ratio: 3.5 / 5.3;
    object-fit: cover;
  }
  .port-img.port-web-img-st:hover a{
    box-shadow:0 28px 45px rgba(20,20,23,.35);
  }

  /* BACK covers: sit behind the front cover, peeking out left/right even at rest,
     then fan out further with a rotation on hover (matches reference video) */
  .port-web-st{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    aspect-ratio:3/4.3;
    object-fit:cover;
    border-radius:6px;
    z-index:1;
    box-shadow:0 12px 25px rgba(20,20,23,.2);
    transition:transform .45s cubic-bezier(.25,.8,.25,1);
  }

  /* idle: straight peek, no rotation */
  .port-web-th-img1{
    z-index:1;
    transform:translate(-14px,8px) rotate(0deg);
  }
  .port-web-th-img2{
    z-index:2;
    transform:translate(14px,8px) rotate(0deg);
  }

  /* hover: fan outward with rotation, like the reference video */
  .port-img.port-web-img-st:hover .port-web-th-img1{
    transform:translate(-32px,22px) rotate(-10deg);
  }
  .port-img.port-web-img-st:hover .port-web-th-img2{
    transform:translate(32px,22px) rotate(10deg);
  }

  @media(max-width:760px){
    .portfolio_wrapper_bwl .row{ grid-template-columns:repeat(2,1fr); gap:45px 20px; }
    .main-heading{ font-size:1.7rem; }
    .polaroid.module{ padding:70px 0 20px; }
  }
  @media(max-width:460px){
    .portfolio_wrapper_bwl .row{ grid-template-columns:1fr; }
  }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 40px; display: grid; gap: 12px; max-width: 720px; margin-left: auto; margin-right: auto; }
.faq-item { border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--background); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: none; background: none; padding: 20px 24px; text-align: left;
}
.faq-q span.qtext { font-family: var(--font-heading); font-size: 15.5px; font-weight: 600; color: var(--navy); }
.faq-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,98,0,.1); color: var(--teal); }
.faq-a { padding: 0 24px 20px; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); display: none; }
.faq-item.is-open .faq-a { display: block; }
.faq-item.is-open .faq-icon .icon-plus { display: none; }
.faq-item:not(.is-open) .faq-icon .icon-minus { display: none; }

/* ---------- Discount CTA (dark banner with covers + form) ---------- */
.discount-section { padding: 72px 24px; background: var(--background); }
.discount-banner { display: grid; gap: 40px; align-items: center; border-radius: var(--radius-3xl); background: var(--navy); color: var(--navy-foreground); padding: 32px; }
.discount-pill { display: inline-block; border-radius: var(--radius-full); background: var(--yellow); color: var(--yellow-foreground); padding: 6px 16px; font-size: 13px; font-weight: 700; }
.discount-banner h2 { margin-top: 20px; font-size: 26px; font-weight: 800; line-height: 1.3; }
.discount-banner > div:first-child > p { margin-top: 16px; font-size: 16px; line-height: 1.6; color: rgba(245,246,250,.75); }
.cover-stack { margin-top: 32px; display: flex; }
.cover-stack .cover { position: relative; width: 80px; height: 112px; overflow: hidden; border-radius: var(--radius-sm); box-shadow: 0 10px 20px -8px rgba(0,0,0,.5); border: 2px solid var(--navy); margin-left: -16px; }
.cover-stack .cover:first-child { margin-left: 0; }
.cover-stack .cover img { object-fit: cover; width: 100%; height: 100%; }
.discount-form-card { border-radius: var(--radius-2xl); background: rgba(245,246,250,.05); padding: 28px; box-shadow: 0 1px 0 rgba(245,246,250,.15) inset; }
@media (min-width: 768px) { .discount-banner { grid-template-columns: 1fr 1fr; padding: 48px; } .discount-banner h2 { font-size: 32px; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy); color: var(--navy-foreground); }
.footer-grid { display: grid; gap: 40px; padding: 64px 24px; }
.footer-grid img { height: 40px; width: auto; }
.footer-about p { margin-top: 16px; font-size: 14px; line-height: 1.6; color: rgba(245,246,250,.7); }
.footer-col h3 { font-family: var(--font-heading); font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--yellow); }
.footer-col ul { margin-top: 20px; display: grid; gap: 12px; }
.footer-col ul li, .footer-col ul li a { font-size: 14px; color: rgba(245,246,250,.75); }
.footer-col ul li a:hover { color: var(--teal); }
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; }
.footer-contact svg { flex-shrink: 0; margin-top: 3px; color: var(--teal); }
.footer-bottom { border-top: 1px solid rgba(245,246,250,.1); }
.footer-bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; font-size: 12.5px; color: rgba(245,246,250,.6); }
.footer-legal-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.footer-legal-nav a:hover { color: var(--teal); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } .footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; } }

/* ==========================================================================
   Cookie consent
   ========================================================================== */
.cookie-consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  border-top: 1px solid rgba(245,246,250,.1); background: var(--navy); color: var(--navy-foreground);
  box-shadow: 0 -8px 24px rgba(0,0,0,.2);
}
.cookie-consent.hidden { display: none; }
.cookie-inner { display: flex; flex-direction: column; gap: 16px; padding: 16px 24px; }
.cookie-inner p { font-size: 14px; line-height: 1.55; color: rgba(245,246,250,.8); }
.cookie-inner p a { font-weight: 600; color: var(--yellow); text-decoration: underline; }
.cookie-actions { display: flex; gap: 12px; flex-shrink: 0; }
@media (min-width: 640px) { .cookie-inner { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ==========================================================================
   Inner pages: Contact + Legal
   ========================================================================== */
.page-hero { background: var(--navy); color: var(--navy-foreground); }
.page-hero-inner { max-width: 860px; margin: 0 auto; padding: 64px 24px; }
.page-hero-inner h1 { margin-top: 12px; font-size: 30px; font-weight: 800; }
.page-hero-inner .lede { margin-top: 16px; max-width: 620px; color: rgba(245,246,250,.75); }
.page-hero-inner .updated { margin-top: 16px; font-size: 13px; color: rgba(245,246,250,.65); }
@media (min-width: 768px) { .page-hero-inner h1 { font-size: 36px; } }

.contact-layout { max-width: 1080px; margin: 0 auto; display: grid; gap: 48px; padding: 56px 24px; }
.contact-info h2, .contact-form-card h2 { font-size: 22px; font-weight: 700; color: var(--navy); }
.contact-info > p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: rgba(35,40,56,.75); }
.contact-details { margin-top: 32px; display: grid; gap: 24px; }
.contact-details li { display: flex; align-items: flex-start; gap: 16px; }
.contact-details .ic {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-md); background: rgba(255,98,0,.1); color: var(--teal);
}
.contact-details .label { font-family: var(--font-heading); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.contact-details .value, .contact-details a.value { margin-top: 4px; display: block; font-size: 15px; color: rgba(35,40,56,.75); }
.contact-details a.value:hover { color: var(--teal); }
.contact-form-card { border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--muted); padding: 28px; }
.contact-form-card > p { margin-top: 8px; font-size: 14px; color: rgba(35,40,56,.7); }
.contact-form-card form { margin-top: 24px; display: grid; gap: 16px; }
.field-row { display: grid; gap: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--navy); }
.field input, .field textarea {
  width: 100%; border-radius: var(--radius-md); border: 1px solid rgba(35,40,56,.15);
  background: var(--background); padding: 10px 16px; font-size: 14px; font-family: inherit; outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(255,98,0,.15); }
.consent-note { font-size: 12px; color: rgba(35,40,56,.6); }
.consent-note a { font-weight: 600; color: var(--teal); text-decoration: underline; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 1fr 1fr; } }

.legal-content { max-width: 860px; margin: 0 auto; padding: 56px 24px; font-size: 15px; line-height: 1.7; color: rgba(35,40,56,.8); }
.legal-content h2 { margin: 40px 0 12px; font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--navy); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: 16px; }
.legal-content ul { margin-bottom: 16px; padding-left: 24px; list-style: disc; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { font-weight: 600; color: var(--teal); text-decoration: underline; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-center { text-align: center; }
.hidden { display: none !important; }