:root{
    --ink:#1B2333;
    --ink-soft:#5A6472;
    --bg:#F6FAFD;
    --card:#FFFFFF;
    --line:#DCEAF3;
    --blue:#1BA0DB;
    --blue-deep:#0E7FB5;
    --pink:#EC0C8C;
    --pink-soft:#FCE3F1;
    --navy:#12202E;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Jost',sans-serif;
    font-weight:400;
    line-height:1.7;
  }
  h1,h2,h3,.display-font{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    color:var(--ink);
  }
  .eyebrow{
    font-family:'Jost',sans-serif;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:.72rem;
    color:var(--pink);
    font-weight:600;
  }
  a{color:var(--blue-deep); text-decoration:none;}
  a:hover{color:var(--pink);}

  /* ---------- Navbar ---------- */
  .navbar-custom{
    background:#fff;
    border-bottom:1px solid var(--line);
  }
  .navbar-custom .navbar-brand{
    font-family:'Cormorant Garamond',serif;
    font-size:1.55rem;
    font-weight:700;
    color:var(--pink);
    letter-spacing:.02em;
  }
  .navbar-custom .navbar-brand span{color:var(--blue);}
  .navbar-custom .nav-link{
    color:var(--ink-soft);
    font-size:.92rem;
    margin:0 .5rem;
  }
  .navbar-custom .nav-link:hover{color:var(--pink);}

  /* ---------- Hero with mountain skyline (signature element) ---------- */
  .hero{
    position:relative;
    background:var(--navy);
    color:#fff;
    overflow:hidden;
    padding:5.5rem 0 0;
  }
  .hero .eyebrow{color:var(--blue);}
  .hero h1{
    color:#fff;
    font-size:clamp(2.3rem,5vw,3.6rem);
    line-height:1.08;
  }
  .hero h1 em{color:var(--pink); font-style:italic;}
  .hero p.lead-copy{
    color:#C9D6E0;
    max-width:580px;
    font-size:1.05rem;
  }
  .hero-meta{
    display:flex; gap:1.75rem; flex-wrap:wrap;
    margin-top:1.75rem;
    font-size:.85rem;
    color:#A9B9C6;
  }
  .hero-meta strong{color:var(--blue); display:block; font-family:'Cormorant Garamond',serif; font-size:1.5rem;}
  .mountains{
    display:block; width:100%; height:auto; margin-top:3.5rem;
  }

  /* ---------- Sections ---------- */
  section{padding:4.25rem 0;}
  .section-tight{padding:2.5rem 0;}
  .divider-line{
    height:1px; background:var(--line); border:0; margin:0 0 2.25rem;
  }

  /* Table of contents */
  .toc{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:6px;
    padding:1.5rem 1.75rem;
  }
  .toc a{
    display:block; color:var(--ink-soft); font-size:.92rem; padding:.3rem 0;
    border-bottom:1px dashed var(--line);
  }
  .toc a:last-child{border-bottom:0;}
  .toc a:hover{color:var(--pink); padding-left:.25rem;}

  /* Ranked photographer entries */
  .entry{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:6px;
    padding:2rem;
    margin-bottom:1.5rem;
  }
  .entry .rank{
    font-family:'Cormorant Garamond',serif;
    font-size:3.2rem;
    line-height:1;
    color:var(--blue);
    font-weight:700;
  }
  .entry h3{
    font-size:1.65rem;
    margin-bottom:.15rem;
  }
  .entry .loc{
    font-size:.85rem;
    color:var(--ink-soft);
    margin-bottom:.75rem;
  }
  .entry .loc i{color:var(--pink);}
  .badge-tag{
    background:var(--pink-soft);
    color:var(--pink);
    font-weight:500;
    font-size:.72rem;
    letter-spacing:.03em;
    padding:.4em .8em;
    border-radius:4px;
    margin:0 .35rem .35rem 0;
    display:inline-block;
  }
  .best-for{
    border-left:3px solid var(--blue);
    background:var(--bg);
    padding:.6rem .9rem;
    font-size:.88rem;
    margin-top:.9rem;
    color:var(--ink-soft);
  }
  .entry.featured{
    border-color:var(--pink);
    box-shadow:0 2px 0 var(--pink);
  }
  .featured-flag{
    font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
    color:#fff; background:var(--pink);
    padding:.3em .7em; border-radius:4px; margin-bottom:.75rem; display:inline-block;
  }

  /* Pricing table */
  .table-custom{
    background:var(--card);
    border:1px solid var(--line);
  }
  .table-custom th{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    color:var(--ink);
    background:var(--pink-soft);
    border-bottom:1px solid var(--line);
  }
  .table-custom td, .table-custom th{
    border-color:var(--line);
    vertical-align:middle;
    font-size:.92rem;
  }

  /* FAQ accordion */
  .accordion-item{
    background:var(--card);
    border:1px solid var(--line);
    margin-bottom:.6rem;
    border-radius:6px !important;
    overflow:hidden;
  }
  .accordion-button{
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem;
    font-weight:600;
    color:var(--ink);
    background:var(--card);
  }
  .accordion-button:not(.collapsed){
    color:var(--pink);
    background:var(--pink-soft);
    box-shadow:none;
  }
  .accordion-button:focus{box-shadow:none; border-color:var(--line);}
  .accordion-button::after{filter:hue-rotate(0deg);}

  /* CTA band */
  .cta-band{
    background:var(--navy);
    color:#fff;
    border-radius:8px;
    padding:3rem;
  }
  .cta-band h2{color:#fff;}
  .btn-brand{
    background:var(--pink);
    color:#fff;
    border:none;
    padding:.7em 1.6em;
    font-weight:600;
    letter-spacing:.02em;
    border-radius:6px;
  }
  .btn-brand:hover{background:#c90a78; color:#fff;}
  .btn-outline-brand{
    border:1px solid #4a5866;
    color:#fff;
    padding:.7em 1.6em;
    border-radius:6px;
  }
  .btn-outline-brand:hover{border-color:var(--blue); color:var(--blue);}

  footer{
    background:var(--navy);
    color:#8FA0AE;
    font-size:.85rem;
    padding:2.5rem 0 1.5rem;
    border-top:1px solid #223342;
  }
  footer a{color:#C9D6E0;}
  footer a:hover{color:var(--blue);}

  .skip-link{position:absolute; left:-999px; top:auto;}
  .skip-link:focus{left:1rem; top:1rem; z-index:2000; background:#fff; padding:.5rem 1rem;}

  a:focus-visible, button:focus-visible{outline:2px solid var(--pink); outline-offset:2px;}

  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }