/* Javu Photography — rebuilt standalone site
   Type: Forum (display) + Cormorant Garamond (body). Measurements taken from the original at 1280px. */
:root{
  --white:#fff;
  --ink:#1d1d1d;          /* body copy, buttons */
  --char:#3b3b3b;         /* headings, nav, rules */
  --olive:#5e5e50;        /* soft headings + copy */
  --sage:#686f60;         /* intro copy */
  --moss:#91967c;         /* "oh, hey there!" */
  --fern:#5c6153;         /* "Magical moments" */
  --bark:#6b6550;         /* about copy */
  --f-display:"Forum", "Times New Roman", serif;
  --f-body:"Cormorant Garamond", Garamond, "Times New Roman", serif;
  --wrap:1143px;
  --pad-x:max(16px, env(safe-area-inset-left, 0px));
  --pad-x-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:17.8px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:var(--f-display)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Shared type ---------- */
.eyebrow{font-family:var(--f-display);font-size:14px;line-height:20px;letter-spacing:.29em;text-transform:uppercase}
.display{font-family:var(--f-display);font-size:clamp(30px,3.9vw,49.8px);line-height:1.15;letter-spacing:.12em;text-transform:uppercase}
.h2{font-family:var(--f-display);font-size:clamp(28px,2.92vw,37.4px);line-height:1.4}
.h3{font-family:var(--f-display);font-size:21.4px;line-height:31px;letter-spacing:.15em;text-transform:uppercase}
.h4{font-family:var(--f-display);font-size:17.8px;line-height:23.7px;letter-spacing:.17em;text-transform:uppercase}
.name{font-family:var(--f-display);font-size:32px;line-height:44.8px}
.copy{font-family:var(--f-body);font-size:19.6px;line-height:1.6}
.copy-s{font-family:var(--f-body);font-size:17.8px;line-height:1.75}

/* Underline button (text + 1px rule) */
.btn{display:inline-block;padding:15px 0;font-family:var(--f-display);font-size:14.08px;line-height:24px;letter-spacing:.21em;text-transform:uppercase;color:inherit;background:none;border:0;cursor:pointer}
.btn span{position:relative;display:inline-block;padding-bottom:8px}
.btn span::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(to right,currentColor 50%,currentColor 50%) 100% 0/200% auto;transition:background-position .3s, opacity .3s}
.btn:hover span::before{opacity:.55}

/* ---------- Layout helpers ---------- */
.wrap{max-width:calc(var(--wrap) + 32px);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x-r)}
.block{padding-block:38px}
.spacer-40{height:40px}.spacer-80{height:80px}.spacer-120{height:120px}
.center{text-align:center}
.narrow{max-width:948px;margin:0 auto}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:30;height:80px;background:var(--white);color:var(--char)}
.site-header.over{position:absolute;top:0;left:0;right:0;background:transparent;color:var(--white)}
.site-header .bar{height:80px;display:flex;align-items:center;justify-content:center;padding-left:var(--pad-x);padding-right:var(--pad-x-r);position:relative}
.logo{font-family:var(--f-display);font-size:17.8px;line-height:27.8px;letter-spacing:.19em;text-transform:uppercase;padding:8.9px;white-space:nowrap}
.burger{position:absolute;right:max(15px, env(safe-area-inset-right, 0px));top:25px;width:30px;height:30px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:inherit;padding:0}
.burger i,.burger i::before,.burger i::after{display:block;width:22px;height:1px;background:currentColor;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0}
.burger i::before{top:-7px}.burger i::after{top:7px}

/* Overlay menu */
.menu{position:fixed;inset:0;z-index:9999;background:var(--white);color:var(--char);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;padding:80px var(--pad-x-r) 40px var(--pad-x)}
.menu.open{opacity:1;visibility:visible}
.menu .logo{position:absolute;top:17px;left:50%;transform:translateX(-50%)}
.menu-close{position:absolute;right:max(15px, env(safe-area-inset-right, 0px));top:25px;width:30px;height:30px;background:none;border:0;cursor:pointer;color:var(--char)}
.menu-close::before,.menu-close::after{content:"";position:absolute;left:4px;top:14px;width:22px;height:1px;background:currentColor;transform:rotate(45deg)}
.menu-close::after{transform:rotate(-45deg)}
.menu ul{list-style:none;margin:0;padding:0;text-align:center}
.menu a{display:block;font-family:var(--f-display);font-size:clamp(24px,2.64vw,33.8px);line-height:1.2;padding:15px 0;color:var(--char);transition:opacity .25s}
.menu a:hover{opacity:.6}
body.menu-open{overflow:hidden}

/* ---------- Hero slideshow (home) ---------- */
.hero{margin-bottom:38px;position:relative;height:100vh;height:100svh;min-height:520px;max-height:1100px;overflow:hidden;color:var(--white);background:#d9d4cd}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;display:grid;place-items:center}
.hero .slide.active{opacity:1;z-index:1}
.hero .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .tint{position:absolute;inset:0}
.hero .slide h1,.hero .slide h2{position:relative;z-index:2;text-align:center;max-width:min(760px,82vw);font-weight:400}
.hero .side-left{position:absolute;z-index:3;left:45px;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap}
.hero .side-right{position:absolute;z-index:3;right:20px;top:50%;transform:translate(50%,-50%) rotate(90deg);transform-origin:center;white-space:nowrap;color:var(--white)}
.hero .side-right .btn{padding:15px 20px}
.slide-nav{display:flex;align-items:center;justify-content:center;gap:22px;font-family:var(--f-display);font-size:14px;line-height:20px;letter-spacing:.29em;font-variant-numeric:tabular-nums}
.slide-nav .sep{margin:0 .7em}
.hero .slide-nav{position:absolute;z-index:3;left:0;right:0;bottom:30px}
.arrow{width:40px;height:20px;position:relative;background:none;border:0;cursor:pointer;color:inherit;padding:0}
.arrow::before{content:"";position:absolute;top:4px;width:12px;height:12px;border-left:1px solid currentColor;border-bottom:1px solid currentColor}
.arrow.prev::before{left:0;transform:rotate(45deg) translate(3px,-3px)}
.arrow.next::before{right:0;transform:rotate(-135deg) translate(3px,-3px)}

/* ---------- Banner (full-bleed photo with text) ---------- */
.banner{position:relative;overflow:hidden;color:var(--white);display:flex;align-items:center}
.banner > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .tint{position:absolute;inset:0}
.banner .inner{position:relative;z-index:1;width:100%;max-width:calc(953px + 32px);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x-r);display:flex;flex-direction:column;gap:30px}
.banner .inner.left{max-width:calc(var(--wrap) + 32px);align-items:flex-start;text-align:left}
.banner .inner.center{align-items:center;text-align:center}
.banner .inner .btn{margin-top:4px}
.banner.h680{height:680px}.banner.h800{height:800px}
.banner.bottom{align-items:flex-end}
.banner-wrap{padding-bottom:38px}
.banner-wrap.pt{padding-top:38px}

/* Photo with text overlay (natural image ratio) */
.overlay-photo{position:relative;color:var(--white)}
.overlay-photo img{width:100%;height:auto}
.overlay-photo .tint{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.overlay-photo .inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px var(--pad-x-r) 24px var(--pad-x)}
.overlay-photo .inner > *{max-width:557px}

/* ---------- Home ---------- */
.intro h2{color:var(--moss);text-align:center;margin-bottom:30px}
.intro .copy{color:var(--sage);display:grid;gap:38px}
.rule{border:0;border-top:.8px solid var(--char);margin:0}

.square-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.square-grid button{padding:0;border:0;background:#f3f1ee;cursor:zoom-in;aspect-ratio:1/1;overflow:hidden;display:block;width:100%}
.square-grid img{width:100%;height:100%;object-fit:cover}

.testimonials{max-width:calc(954px + 32px);margin:0 auto;padding:38px var(--pad-x-r) 38px var(--pad-x)}
.t-track{display:grid}
.t-slide{grid-area:1/1;display:grid;grid-template-columns:381px minmax(0,477px);justify-content:space-between;align-items:center;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.t-slide.active{opacity:1;visibility:visible}
.t-photo{width:381px;aspect-ratio:381/508;max-width:100%;background-size:cover;background-repeat:no-repeat}
.t-text{text-align:center;color:var(--char);display:flex;flex-direction:column;align-items:center}
.t-text .eyebrow{margin-bottom:60px}
.t-text .t-name{font-family:var(--f-display);font-size:32px;line-height:44.8px;margin-bottom:30px}
.t-text blockquote{margin:0 0 25px;color:var(--ink);font-size:17.8px;line-height:31.1px}
.t-text .slide-nav{color:var(--ink)}

/* ---------- About ---------- */
.side-photo{display:grid;grid-template-columns:532px minmax(0,1fr);gap:clamp(30px,6.2vw,79px);align-items:start}
.side-photo img{width:100%;height:auto}
.side-photo .text{color:var(--bark);padding-top:116px;padding-right:2px}
.side-photo .text h2{margin-bottom:39px}
.side-photo .copy{text-align:center;display:grid;gap:7px}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,557px);gap:30px;align-items:start;color:var(--olive)}
.two-col .copy{padding-top:3px}

/* ---------- Clients ---------- */
.lead-text{max-width:752px;margin:0 auto;text-align:center}
.lead-text .h3{color:var(--char)}
.justified{position:relative}
.justified .row{display:flex;gap:20px;margin-bottom:20px}
.justified button{padding:0;border:0;background:#f3f1ee;cursor:zoom-in;overflow:hidden;flex:none}
.justified img{width:100%;height:100%;object-fit:cover}
.reserve{color:var(--olive);text-align:center}
.reserve .h4{margin-bottom:35px}
.reserve p{font-size:14px;line-height:23.9px}

/* ---------- Investment ---------- */
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;text-align:center;color:var(--olive)}
.values .name{margin-bottom:24px}
.pricing h2{color:var(--char);text-align:center;margin-bottom:40px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:39px}
.card{text-align:center}
.card .ph{position:relative;aspect-ratio:355/474;background-size:cover;background-position:center;overflow:hidden}
.card .over{position:absolute;inset:0;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:40px;opacity:0;transition:opacity .45s}
.card:hover .over,.card:focus-within .over{opacity:1}
.card .over .h3,.card .below .h3{color:var(--char)}
.card .over .eyebrow,.card .below .eyebrow{color:var(--ink);letter-spacing:.29em}
.card .below{padding-top:30px;display:flex;flex-direction:column;gap:10px}
.packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;text-align:center}
.packages .h3{color:var(--char);margin-bottom:31px}
.packages .copy-s{color:var(--ink)}
.quote{text-align:center}
.quote .h3{color:var(--olive);margin-bottom:35px}
.quote .h2{color:var(--char)}
.touch{text-align:center;color:var(--olive)}
.touch a{text-decoration:underline;text-underline-offset:3px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;color:var(--char)}
.faq-grid h2{margin-bottom:35px}
.faq-grid .copy-s{color:var(--char)}
.faq-grid .copy-s.ink{color:var(--ink)}

/* ---------- Contact ---------- */
.form{max-width:572px;margin:0 auto;color:var(--char);text-align:center}
.form .field{margin-bottom:40px}
.form .lbl{display:block;font-family:var(--f-display);font-size:14px;line-height:21px;letter-spacing:.25em;text-transform:uppercase}
.form input[type=text],.form input[type=email],.form textarea{display:block;width:100%;border:0;border-bottom:.8px solid var(--char);background:transparent;padding:10px 0;font-family:var(--f-body);font-size:17.8px;color:var(--ink);border-radius:0;outline:none}
.form input[type=text],.form input[type=email]{height:50px}
.form textarea{height:176px;resize:vertical}
.form input:focus,.form textarea:focus{border-bottom-color:var(--ink);border-bottom-width:1.5px}
.radios{display:flex;flex-direction:column;align-items:center;padding-top:10px}
.radios label{display:inline-flex;align-items:center;gap:10px;font-size:17.8px;line-height:31.1px;color:var(--ink);padding:5px 0;cursor:pointer}
.radios input{accent-color:var(--char);margin:0;width:13px;height:13px}
.form .send{margin-top:110px;color:var(--ink)}
.form .status{min-height:31px;font-size:17.8px;color:var(--olive)}
.hp{position:absolute;left:-9999px}
.proverb{text-align:center}
.proverb .h3{color:var(--olive);max-width:923px;margin:0 auto 27px}
.proverb .eyebrow{color:#fffdfb}

/* ---------- Footer ---------- */
.site-footer{background:var(--white);padding:61px 0 60px}
.site-footer .inner{max-width:calc(var(--wrap) + 32px + 26px);margin:0 auto;padding-left:max(3px, env(safe-area-inset-left, 0px));padding-right:var(--pad-x-r);position:relative}
.site-footer nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.site-footer nav a{display:block;font-family:var(--f-display);font-size:14.08px;line-height:25.8px;letter-spacing:.25em;text-transform:uppercase;color:var(--char);padding:0 12.8px;transition:opacity .25s}
.site-footer nav a:hover{opacity:.6}
.site-footer small{display:block;margin-top:30px;padding-left:13px;font-family:var(--f-body);font-size:14px;line-height:24px;color:var(--ink)}
.to-top{position:absolute;right:max(16px, env(safe-area-inset-right, 0px));top:3px;width:18px;height:20px;color:var(--ink);opacity:.9}
.to-top svg{width:14px;height:16px}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:10000;background:rgba(255,255,255,.98);display:flex;align-items:center;justify-content:center;padding:calc(56px + env(safe-area-inset-top,0px)) 70px calc(56px + env(safe-area-inset-bottom,0px))}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));width:30px;height:30px;background:none;border:0;cursor:pointer;color:var(--char)}
.lb-close::before,.lb-close::after{content:"";position:absolute;left:3px;top:14px;width:24px;height:1px;background:currentColor;transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lightbox .arrow{position:absolute;top:50%;color:var(--char)}
.lightbox .arrow.prev{left:calc(18px + env(safe-area-inset-left,0px))}
.lightbox .arrow.next{right:calc(18px + env(safe-area-inset-right,0px))}
.lb-count{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-family:var(--f-display);font-size:13px;letter-spacing:.29em;color:var(--char)}

.card .below .details{display:none;margin-top:6px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .side-photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .side-photo .text{padding-top:40px}
  .t-slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .t-photo{width:100%}
}
@media (max-width:860px){
  .banner.h680{height:560px}.banner.h800{height:620px}
  .square-grid{gap:10px}
  .values,.faq-grid,.packages{grid-template-columns:1fr;gap:50px}
  .cards{grid-template-columns:1fr;max-width:420px;margin:0 auto;gap:50px}
  .card .over{display:none}
  .card .below .details{display:block}
  .side-photo{grid-template-columns:1fr}
  .side-photo img{max-width:532px;margin:0 auto}
  .two-col{grid-template-columns:1fr;gap:12px}
  .t-slide{grid-template-columns:1fr;gap:30px;justify-items:center}
  .t-photo{width:min(381px,100%)}
  .t-text .eyebrow{margin-bottom:24px}
  .hero .side-left,.hero .side-right{display:none}
  .overlay-photo img{height:620px;object-fit:cover}
}
@media (max-width:600px){
  .square-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .display{letter-spacing:.08em}
  .h3{font-size:18px}
  .copy{font-size:18px}
  .lightbox{padding-left:16px;padding-right:16px}
  .lightbox .arrow{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .site-footer nav ul{flex-direction:column;align-items:center}
  .site-footer .inner{text-align:center}
  .site-footer small{padding-left:0}
  .to-top{position:static;display:inline-block;margin-top:20px}
  .form .send{margin-top:50px}
}