/* DJA Media — public site ("Quote First" design) */
:root{
  --ink:#1A1F14; --ink-2:#3A3F2E; --army:#4B5320; --army-2:#5E6640; --forest:#1F2416;
  --sage:#F2F3EC; --line:#D9DCCB; --lime:#B5C26A; --paper:#FFFFFF; --cream:#F1F2E8; --bad:#A23B1E;
  --display:'Bebas Neue', Impact, sans-serif; --body:'Outfit', system-ui, sans-serif; --script:'Yellowtail', cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--body)}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--army)}
.container{max-width:1440px;margin:0 auto;padding-left:48px;padding-right:48px}
@media(max-width:720px){.container{padding-left:16px;padding-right:16px}}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:100}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.admin-bar{background:#3A2A1E;color:#F6E9DA;text-align:center;padding:8px 16px;font-size:14px}.admin-bar a{color:#fff;text-decoration:underline}

/* Header */
.site-header{background:#fff;position:relative;z-index:20}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:24px}
.logo{display:flex;flex-direction:column;align-items:center;line-height:1}
.logo-name{font-weight:700;font-size:26px;letter-spacing:.1em;color:var(--army)}
.logo-script{font-family:var(--script);font-size:24px;color:var(--ink)}
.main-nav{display:flex;flex-wrap:wrap;align-items:center;gap:34px;font-size:14px;letter-spacing:.18em;text-transform:uppercase}
.btn-quote{display:inline-block;background:var(--ink);color:#fff!important;font-family:var(--display);font-size:22px;letter-spacing:.05em;padding:12px 24px;border-radius:8px;text-transform:uppercase;border:0;cursor:pointer}
.btn-quote:hover{background:var(--army)}
.btn-quote.big{font-size:24px;padding:16px 32px}
.btn-outline{display:inline-block;border:2px solid var(--ink);font-family:var(--display);font-size:22px;letter-spacing:.05em;padding:14px 28px;border-radius:8px;text-transform:uppercase}
.has-drop{position:relative}
.drop{display:none;position:absolute;top:100%;left:-16px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;min-width:200px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.drop a{display:block;padding:10px 12px;letter-spacing:.12em}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.nav-toggle{display:none;background:none;border:2px solid var(--ink);border-radius:8px;padding:10px 14px;font:600 14px var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
@media(max-width:1100px){
  .nav-toggle{display:block}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 16px 20px;border-bottom:1px solid var(--line)}
  .main-nav.open{display:flex}
  .main-nav>a,.has-drop>a{padding:14px 0;display:block}
  .drop{position:static;display:block;border:0;box-shadow:none;padding:0 0 8px 16px}
  .main-nav .btn-quote{margin-top:12px}
}

/* Hero slider — continuous track, center slide with neighbours peeking */
.hero{position:relative}
.slider{position:relative;--slide-h:clamp(380px,66vh,680px);--peek:19%;user-select:none}
.slider-viewport{overflow:hidden;height:var(--slide-h);touch-action:pan-y}
.slider-track{display:flex;gap:28px;height:100%;will-change:transform;transform:translate3d(0,0,0)}
.slider-track.animating{transition:transform .9s cubic-bezier(.22,.8,.22,1)}
.slide{position:relative;flex:0 0 62%;height:100%;overflow:hidden;background:#2D321F;display:block;border-radius:2px;
  transition:opacity .9s cubic-bezier(.22,.8,.22,1),transform .9s cubic-bezier(.22,.8,.22,1)}
.slider.js .slide:not(.is-active){opacity:.55;transform:scale(.94)}
.slider.dragging .slide{transition:none}
.slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;
  transform:scale(1.06);transition:transform 6s ease-out,opacity .6s ease}
.slider.js .slide img{opacity:0}.slider.js .slide img.loaded{opacity:1}
.slide.is-active img{transform:scale(1)}
.slide-count{position:absolute;top:22px;right:calc(var(--peek) + 22px);z-index:3;background:rgba(255,255,255,.94);font-size:13px;letter-spacing:.16em;padding:8px 14px;color:var(--ink);font-variant-numeric:tabular-nums}
.slider-btn{position:absolute;top:calc(var(--slide-h) / 2);transform:translateY(-50%);z-index:3;width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.92);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.slider-btn:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.slider-btn svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slider-btn.prev{left:calc(var(--peek) - 27px)}.slider-btn.next{right:calc(var(--peek) - 27px)}
.slider-progress{position:absolute;left:var(--peek);right:var(--peek);top:0;height:3px;z-index:3;background:rgba(255,255,255,.25)}
.slider-progress span{display:block;height:100%;width:0;background:var(--lime)}
.slide-empty{position:absolute;left:24px;top:24px;background:#fff;padding:8px 14px;font-size:14px}
.placeholder .slide{width:100%;opacity:1;transform:none;background:var(--army)}
@media(max-width:900px){
  .slider{--slide-h:min(112vw,68vh);--peek:7%}
  .slider-track{gap:10px}
  .slide-count{top:14px;right:calc(var(--peek) + 12px);font-size:12px;padding:6px 10px}
  .slider-btn{display:none}
}
@media(prefers-reduced-motion:reduce){
  .slider-track.animating,.slide,.slide img{transition-duration:.01s!important}
}

/* Quote card */
.quote-card{position:relative;max-width:1080px;margin:-120px auto 0;background:var(--forest);color:#F1F2E8;padding:32px;border-radius:12px;z-index:5}
@media(max-width:1140px){.quote-card{margin-left:16px;margin-right:16px}}
@media(max-width:900px){.quote-card{margin-top:-56px;padding:22px}}
.quote-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.quote-title{font-family:var(--display);font-size:40px;letter-spacing:.02em;line-height:1}
.quote-area{font-size:14px;color:#C9CDB3}
.quote-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:end}
.quote-fields.more{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.quote-fields .span2{grid-column:1/-1}
@media(max-width:800px){.quote-fields,.quote-fields.more{grid-template-columns:1fr}}
.quote-card label{display:block;font-size:12px;letter-spacing:.16em;color:#C9CDB3;text-transform:uppercase;margin-bottom:8px}
.quote-card input,.quote-card select,.quote-card textarea{width:100%;font:16px var(--body);padding:14px;border:0;border-radius:6px;background:var(--cream);color:var(--ink)}
.quote-card button[type=submit]{background:var(--lime);color:var(--ink);border:0;border-radius:6px;padding:15px;font-family:var(--display);font-size:22px;letter-spacing:.05em;cursor:pointer;min-height:50px}
.quote-card button[type=submit]:hover{background:#c9d47e}
.quote-more{margin-top:14px}.quote-more summary{cursor:pointer;color:#C9CDB3;font-size:14px}
.quote-ok{background:#E5F0E2;color:#1F3D22;padding:14px 18px;border-radius:8px;margin:0}
.quote-err{background:#FBEAE5;color:#6D220F;padding:12px 16px;border-radius:8px;margin:0 0 14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Intro + packages */
.intro{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end;padding-top:110px;padding-bottom:80px}
.intro h1{margin:0;font-family:var(--display);font-weight:400;font-size:104px;line-height:.9}
.intro p{margin:0;font-size:19px;line-height:1.6;color:var(--ink-2)}
.accent{color:var(--army)}
@media(max-width:900px){.intro{grid-template-columns:1fr;padding-top:64px}.intro h1{font-size:64px}}
.packages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-bottom:100px;scroll-margin-top:24px}
@media(max-width:1000px){.packages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.packages{grid-template-columns:1fr}}
.pkg{border:1px solid var(--line);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:10px}
.pkg img,.pkg-img{aspect-ratio:16/10;width:100%;object-fit:cover;border-radius:6px;display:block}
.pkg h2{margin:6px 0 0;font-family:var(--display);font-weight:400;font-size:34px;line-height:1}
.pkg-sub{margin:0;font-size:15px;color:var(--ink-2)}
.pkg-details{font-size:15px;color:var(--ink-2)}.pkg-details p{margin:0 0 6px}
.pkg-price{margin:auto 0 0;font-weight:600}
.tone-0{background:#5E6640}.tone-1{background:#2D321F}.tone-2{background:#8A8F6E}.tone-3{background:#A0A483}

/* Reviews */
.reviews{background:var(--sage);padding:90px 0;scroll-margin-top:24px}
.section-title{font-family:var(--display);font-weight:400;font-size:56px;margin:0 0 28px}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:900px){.review-grid{grid-template-columns:1fr}}
.review{margin:0;background:#fff;border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:12px}
.review p{margin:0}.review cite{font-style:normal;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.stars{color:var(--army);letter-spacing:.15em}

/* Vault CTA */
.vault-cta{background:var(--sage);border-top:1px solid var(--line)}
.vault-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-top:72px;padding-bottom:72px}
.vault-row>div{display:flex;flex-direction:column;gap:4px}
.script{font-family:var(--script);font-size:34px;color:var(--army)}
.vault-title{font-family:var(--display);font-size:44px;line-height:1}

/* Footer */
.site-footer{border-top:1px solid var(--line)}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:28px;font-size:13px;letter-spacing:.16em}
.footer-links{display:flex;flex-wrap:wrap;gap:20px}

/* Inner pages */
.page-head{padding-top:48px;padding-bottom:36px}
.page-head h1{font-family:var(--display);font-weight:400;font-size:84px;line-height:.95;margin:0 0 12px}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--army);font-weight:600;margin:0 0 8px;display:inline-block}
.lead{font-size:19px;color:var(--ink-2);max-width:760px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips a{padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.chips a.on{background:var(--army);border-color:var(--army);color:#fff}
.gallery-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:100px}
@media(max-width:900px){.gallery-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gallery-cards{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;gap:10px}
.gcard img,.gcard .pkg-img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:8px}
.gcard-meta{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.gcard-title{font-family:var(--display);font-size:34px;line-height:1}
.empty{color:var(--ink-2);font-size:18px}
.masonry{columns:3 340px;column-gap:16px;padding-bottom:40px}
.m-item{display:block;margin-bottom:16px;break-inside:avoid;border-radius:6px;overflow:hidden}
.m-item img{width:100%;height:auto;transition:transform .4s}.m-item:hover img{transform:scale(1.02)}
.center-cta{text-align:center;padding-bottom:100px}
.draft-note{background:#FFF3D6;padding:10px 14px;border-radius:8px;display:inline-block}
.about{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding-top:56px;padding-bottom:100px}
.about-img img,.about-img .pkg-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.about-text p{font-size:19px;line-height:1.7}.about-area{color:var(--army);font-weight:600}
@media(max-width:900px){.about{grid-template-columns:1fr}}

/* Lightbox (portfolio + proofs) */
.lightbox{position:fixed;inset:0;background:rgba(15,17,10,.94);z-index:100;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:56px;height:56px;border-radius:50%;font-size:22px;cursor:pointer}
.lb-close{top:20px;right:20px}.lb-prev{left:20px;top:50%;transform:translateY(-50%)}.lb-next{right:20px;top:50%;transform:translateY(-50%)}
.lb-caption{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#ddd;font-size:15px}

/* Client vault */
.vault-login{max-width:560px;margin:0 auto;padding:110px 16px;text-align:center;display:flex;flex-direction:column;gap:16px}
.vault-login h1{font-family:var(--display);font-weight:400;font-size:64px;line-height:1;margin:0}
.vault-login form{display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:8px}
.vault-login label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.vault-login input{font:22px var(--body);letter-spacing:.18em;text-align:center;text-transform:uppercase;padding:16px;border:2px solid var(--ink);border-radius:8px}
.vault-login button{background:var(--forest);color:#fff;border:0;border-radius:8px;padding:18px;font-family:var(--display);font-size:24px;letter-spacing:.05em;cursor:pointer}
.vault-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:40px;padding-bottom:16px}
.vault-head h1{font-family:var(--display);font-weight:400;font-size:64px;line-height:1;margin:0}
.fav-count{font-weight:600;letter-spacing:.08em}
.vault-note{background:var(--sage);padding:14px 18px;border-radius:8px;font-size:15px;color:var(--ink-2)}
@media(min-width:721px){.vault-note{margin-left:48px;margin-right:48px;max-width:1344px}}
@media(min-width:1440px){.vault-note{margin-left:auto;margin-right:auto}}
.proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:20px;padding-bottom:40px}
@media(max-width:1000px){.proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.proof{margin:0}
.proof-open{position:relative;display:block;width:100%;padding:0;border:0;background:#E3E6DA;cursor:zoom-in;aspect-ratio:3/2;overflow:hidden;border-radius:6px}
.proof-open img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.proof-shield{position:absolute;inset:0}
.proof figcaption{display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.1em}
.fav{background:none;border:0;font-size:22px;cursor:pointer;min-width:44px;min-height:44px;color:var(--ink)}
.fav.on{color:var(--bad)}
.send-picks{padding-bottom:90px}
.send-picks form{display:flex;flex-direction:column;gap:12px;max-width:720px}
.send-picks label{font-weight:600}
.send-picks textarea{font:16px var(--body);padding:14px;border:1px solid var(--line);border-radius:8px}
.send-picks .btn-quote{align-self:flex-start}
.vault-gallery img{-webkit-touch-callout:none}
.flashes{padding-top:16px}
.flash{padding:12px 16px;border-radius:8px;margin-bottom:8px}.flash-ok{background:#E5F0E2}.flash-error{background:#FBEAE5;color:#6D220F}

/* Offline page */
.offline-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--forest);color:#F1F2E8;padding:24px}
.offline-box{max-width:620px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.offline-box .logo-name{color:var(--lime)}.offline-box .logo-script{color:#F1F2E8}
.offline-box h1{font-family:var(--display);font-weight:400;font-size:72px;line-height:1;margin:28px 0 8px}
.offline-msg{font-size:19px;color:#D7DAC6}
.offline-box .btn-outline{border-color:#F1F2E8;color:#F1F2E8;margin-top:20px}