/* ============================================================
   MARIA HOWARD PHOTOGRAPHY — shared stylesheet
   Ivory-first palette with sage as a supporting accent
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  /* ── BRAND PALETTE (MH Brand Profile 2026) ── */
  --midnight: #0D1B2A;   /* headings, nav, footer */
  --harbor:   #2F4761;   /* headings + darkest body copy allowed */
  --slate:    #5B7FA6;   /* rules, captions, hover states */
  --mist:     #A9C2D9;   /* quiet panels, accents on dark */
  --cloud:    #E8ECF1;   /* page ground - tinted */
  --white:    #FBFCFD;   /* page ground - bright */

  /* semantic aliases used through the sheet */
  --text:     var(--midnight);
  --text-mid: var(--harbor);   /* never lighter than Harbor - brand rule */
  --text-lt:  var(--harbor);
  --rule:     rgba(91,127,166,.28);

  --head: 'Playfair Display', Georgia, serif;
  --body: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* legacy aliases so existing rules keep resolving */
  --ivory:   var(--white);
  --ivory-2: var(--cloud);
  --cream:   var(--white);
  --sage-lt: var(--mist);
  --sage:    var(--slate);
  --sage-dk: var(--harbor);
  --olive:   var(--midnight);
  --taupe:   var(--slate);
  --serif: var(--head);
  --sans:  var(--body);
}

html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  font-size:17px;
  line-height:1.8;
  background:var(--white);
  background:var(--ivory);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:inherit;}

/* ============================ NAV ============================ */
nav{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:.85rem 2.5rem;
  background:rgba(251,252,253,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-wordmark{display:flex;align-items:center;flex:0 1 auto;min-width:0;}
.nav-wordmark img{
  height:82px;width:auto;display:block;
  max-width:100%;object-fit:contain;
}
@media(max-width:1200px){.nav-wordmark img{height:68px;}}
@media(max-width:900px){.nav-wordmark img{height:52px;}}
.nav-links{
  display:flex;gap:2rem;list-style:none;align-items:center;
  flex:0 0 auto;white-space:nowrap;
}
@media(max-width:1200px){.nav-links{gap:1.5rem;}}
.nav-links a{
  font-family:var(--body);
  font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--harbor);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav-links a:hover{color:var(--midnight);}
.nav-links a.active{color:var(--midnight);border-bottom-color:var(--slate);}

/* mobile menu toggle */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.3rem;}
.nav-toggle span{
  display:block;width:22px;height:1.5px;background:var(--midnight);
  margin:5px 0;transition:.25s;
}

/* ======================= SHARED TYPE ======================== */
.tag{
    font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);
  display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.2rem;
}
.tag::before{content:'';display:block;width:26px;height:1px;background:var(--slate);}
.tag.center{justify-content:center;}
.tag.center::before{display:none;}

h1.display{
  font-family:var(--head);font-weight:400;
  font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.1;
  letter-spacing:-.015em;color:var(--midnight);
}
h2.display{
  font-family:var(--head);font-weight:400;
  font-size:clamp(2rem,3.2vw,3rem);line-height:1.2;
  letter-spacing:-.01em;color:var(--midnight);
}
.display em{font-style:italic;font-weight:400;color:var(--harbor);}
.display.on-dark em{color:var(--sage-lt);}

p.lede{
  font-family:var(--body);font-weight:300;
  font-size:1.08rem;line-height:1.85;color:var(--harbor);
}
p.body{
  font-family:var(--body);font-weight:300;
  font-size:1.06rem;line-height:1.85;color:var(--harbor);
  margin-bottom:1.05rem;
}

/* ======================== BUTTONS ========================== */
.btn{
  display:inline-block;font-family:var(--body);
  font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;padding:.9rem 2.3rem;
  transition:all .22s;cursor:pointer;border:1px solid transparent;
}
.btn-solid{background:var(--midnight);color:var(--white);}
.btn-solid:hover{background:var(--harbor);}
.btn-outline{border:1px solid var(--midnight);color:var(--midnight);background:transparent;}
.btn-outline:hover{background:var(--midnight);color:var(--white);}
.btn-light{border-color:rgba(255,255,255,.65);color:#fff;background:transparent;}
.btn-light:hover{background:var(--white);color:var(--midnight);}
.arrow-link{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--body);
  font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--harbor);
  transition:gap .2s,color .2s;
}
.arrow-link:hover{gap:1rem;color:var(--midnight);}

/* ========================= HERO ============================ */
/* Full-bleed but NEVER cropped: container matches image ratio */
.hero{position:relative;width:100%;background:var(--ivory);}
.hero-frame{
  position:relative;width:100%;
  aspect-ratio:3/2;              /* matches donkey-walk 2400x1600 */
  max-height:78vh;
  overflow:hidden;
}
.hero-frame img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 62%;
}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(13,27,42,.72) 0%,
    rgba(13,27,42,.30) 45%,
    rgba(13,27,42,.06) 100%);
}
.hero-copy{
  position:absolute;left:4rem;right:4rem;bottom:3.5rem;
  max-width:640px;
}
.hero-copy .tag{color:var(--mist);}
.hero-copy .tag::before{background:var(--mist);}
.hero-copy h1{color:#fff;margin-bottom:1.2rem;text-shadow:0 2px 26px rgba(0,0,0,.42);}
.hero-copy p{
  font-family:var(--body);font-weight:400;font-size:1.1rem;line-height:1.75;
  color:var(--white);max-width:470px;margin-bottom:2.2rem;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.hero-btns{display:flex;flex-wrap:wrap;gap:1.2rem;}

/* page header (inner pages) */
.page-head{
  padding:5.5rem 4rem 4rem;
  text-align:center;background:var(--cream);
  border-bottom:1px solid var(--rule);
}
.page-head h1{
  font-family:var(--head);font-weight:400;
  font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.12;
  letter-spacing:-.015em;color:var(--midnight);
}
.page-head h1 em{font-style:italic;font-weight:400;color:var(--harbor);}
.page-head p{
  font-family:var(--body);font-weight:400;font-size:1.09rem;
  line-height:1.8;color:var(--harbor);
  max-width:640px;margin:1.4rem auto 0;
}

/* ==================== SPLIT / STORY ======================== */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:stretch;
}
.split-media{
  background:var(--ivory-2);
  display:flex;align-items:center;justify-content:center;
  padding:3rem;
}
.split-media img{
  width:100%;height:auto;
  max-height:82vh;object-fit:contain;   /* NOTHING is cropped */
}
.split-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem 5rem;
}
.split-copy.bg-white{background:var(--white);}
.split-copy.bg-cloud{background:var(--cloud);}
.signature{
  font-family:var(--head);font-style:italic;font-size:1.75rem;
  font-weight:400;color:var(--harbor);margin-top:1.6rem;
}
.meta-row{
  display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2.4rem;
  padding-top:1.8rem;border-top:1px solid var(--rule);
}
.meta-label{
  font-family:var(--body);font-weight:700;color:var(--slate);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage);display:block;margin-bottom:.25rem;
}
.meta-value{font-family:var(--head);font-weight:400;font-size:1.15rem;color:var(--midnight);}

/* ==================== TRIPTYCH (3 side by side) ============= */
.triptych-wrap{padding:6.5rem 4rem;background:var(--cream);}
.triptych-head{text-align:center;margin-bottom:3.5rem;}
.triptych{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;align-items:start;
}
.tri-item{}
.tri-frame{
  width:100%;background:var(--ivory-2);
  overflow:hidden;
}
/* each frame gets its ratio inline so nothing is cropped */
.tri-frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.tri-item:hover .tri-frame img{transform:scale(1.035);}
.tri-cap{
  margin-top:.9rem;font-family:var(--body);font-weight:700;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-dk);
}
.tri-note{
  font-family:var(--head);font-style:italic;font-weight:400;font-size:1.15rem;
  color:var(--harbor);margin-top:.25rem;
}

/* ======================= QUOTE BAND ======================== */
.quote-band{
  background:var(--midnight);padding:6.5rem 4rem;text-align:center;
}
.quote-band .tag{color:var(--mist);margin-bottom:2.2rem;}
.quote-band .tag::before{background:var(--mist);}
.quote-band blockquote{
  font-family:var(--head);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,2.7vw,2.4rem);line-height:1.5;
  color:var(--white);max-width:840px;margin:0 auto 1.8rem;
}
.quote-band cite{
  font-style:normal;font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mist);
}

/* ==================== REQUEST INFO BLOCK =================== */
.request{
  padding:6.5rem 4rem;background:var(--ivory);
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;
  border-top:1px solid var(--rule);
}
.request-form .fg{margin-bottom:1.6rem;}
.request-form label{
  display:block;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.55rem;
}
.request-form input,.request-form select,.request-form textarea{
  width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--rule);
  padding:.7rem 0;font-family:var(--body);font-size:1.02rem;
  font-weight:300;color:var(--midnight);outline:none;
  transition:border-color .2s;-webkit-appearance:none;border-radius:0;
}
.request-form input:focus,.request-form select:focus,.request-form textarea:focus{
  border-color:var(--harbor);
}
.request-form textarea{resize:vertical;min-height:88px;}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 1.8rem;}

/* ================== PORTFOLIO MASONRY ====================== */
/* CSS columns = every photo keeps its true aspect ratio */
.masonry{
  padding:4.5rem 4rem 6.5rem;
  column-count:3;column-gap:1.4rem;
}
.m-item{
  break-inside:avoid;margin-bottom:1.4rem;
  position:relative;overflow:hidden;background:var(--ivory-2);
}
.m-item img{width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.m-item:hover img{transform:scale(1.04);}
.m-veil{
  position:absolute;inset:0;background:rgba(13,27,42,0);
  transition:background .35s;display:flex;align-items:flex-end;padding:1.3rem;
}
.m-item:hover .m-veil{background:rgba(13,27,42,.32);}
.m-veil span{
  font-family:var(--head);font-style:italic;font-weight:400;font-size:1.15rem;
  color:rgba(255,255,255,0);transition:color .35s;letter-spacing:.03em;
}
.m-item:hover .m-veil span{color:rgba(255,255,255,.9);}

/* portfolio statement */
.statement{
  padding:6rem 4rem;background:var(--cloud);text-align:center;
}
.statement p.big{
  font-family:var(--head);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.45;
  color:var(--midnight);max-width:840px;margin:0 auto;
}
.statement p.small{
  font-family:var(--body);font-weight:300;font-size:1.06rem;line-height:1.8;color:var(--harbor);
  max-width:560px;margin:2rem auto 0;
}

/* ===================== PRICING ============================= */
.pricing-wrap{padding:5.5rem 4rem 7rem;background:var(--cream);}
.pricing-cols{display:grid;grid-template-columns:repeat(3,1fr);}
.p-col{
  padding:0 3.2rem;border-right:1px solid var(--rule);
  transition:background .35s;
}
.p-col:first-child{padding-left:0;}
.p-col:last-child{border-right:none;padding-right:0;}
.p-col:hover{background:var(--cloud);}
.p-num{
  font-family:var(--body);color:var(--slate);
  font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage);display:block;margin-bottom:1.6rem;
}
.p-name{
  font-family:var(--head);font-weight:400;font-size:1.5rem;
  letter-spacing:.01em;color:var(--text);margin-bottom:1rem;
}
.p-price{
  font-family:var(--head);font-weight:400;font-size:4.4rem;
  line-height:1;color:var(--harbor);display:flex;align-items:flex-start;gap:.15rem;
}
.p-price sup{font-size:1.5rem;margin-top:.65rem;font-weight:400;}
.p-dur{
  font-family:var(--body);font-size:.92rem;font-weight:600;color:var(--slate);
  letter-spacing:.06em;margin:.5rem 0 2.2rem;display:block;
}
.p-rule{height:1px;background:var(--rule);margin-bottom:2.2rem;}
.p-desc{
  font-family:var(--body);font-weight:400;font-size:1rem;line-height:1.8;
  color:var(--harbor);margin-bottom:1.9rem;
}
.p-list{list-style:none;margin-bottom:2.2rem;}
.p-list li{
  font-family:var(--body);font-size:.99rem;font-weight:400;color:var(--harbor);
  padding:.45rem 0;border-bottom:1px solid rgba(91,127,166,.18);
  display:flex;align-items:flex-start;gap:.65rem;line-height:1.6;
}
.p-list li::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:var(--slate);flex-shrink:0;margin-top:.5rem;
}
.p-policy-btn{
  background:none;border:none;cursor:pointer;font-family:var(--body);font-weight:700;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate);margin-top:1.1rem;display:block;
  text-decoration:underline;text-underline-offset:3px;padding:0;
}
.p-policy{
  display:none;margin-top:.9rem;font-family:var(--body);
  font-size:.95rem;font-weight:400;line-height:1.8;color:var(--harbor);
}
.p-policy.open{display:block;}
.p-policy p{margin-bottom:.35rem;}

/* booking block */
.booking{
  padding:6rem 4rem;background:var(--ivory-2);text-align:center;
  border-top:1px solid var(--rule);
}
.booking h2{margin-bottom:1rem;}
.booking p{
  font-family:var(--body);font-weight:300;font-size:1.06rem;line-height:1.8;color:var(--harbor);
  max-width:560px;margin:0 auto 2.4rem;
}
.booking-btns{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;}
.booking-note{
  font-family:var(--head);font-style:italic;font-weight:400;font-size:1.15rem;
  color:var(--harbor);margin-top:1.8rem;
}

/* ===================== CONTACT PAGE ======================== */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;
}
.contact-left{
  padding:6rem 5rem;background:var(--ivory-2);
  display:flex;flex-direction:column;justify-content:center;
}
.contact-right{
  padding:6rem 5rem;background:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
}
.contact-details{display:flex;flex-direction:column;gap:1.5rem;margin-top:2.4rem;}
.cd-label{
  font-family:var(--body);font-weight:700;color:var(--slate);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-dk);display:block;margin-bottom:.2rem;
}
.cd-value{font-family:var(--head);font-weight:400;font-size:1.2rem;color:var(--midnight);}
.cd-value a:hover{color:var(--sage-dk);}
.flex-note{
  margin-top:2.4rem;padding:1.6rem 1.8rem;
  background:var(--cloud);border-left:2px solid var(--slate);
}
.flex-note p{
  font-family:var(--body);font-weight:300;font-size:1rem;line-height:1.8;color:var(--harbor);margin:0;
}
.faq{padding:6rem 4rem;background:var(--ivory);border-top:1px solid var(--rule);}
.faq-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;
  max-width:1200px;margin:3.5rem auto 0;
}
.faq-item h3{
  font-family:var(--head);font-weight:400;font-size:1.35rem;
  color:var(--text);margin-bottom:.7rem;
}
.faq-item p{font-family:var(--body);font-weight:300;font-size:1rem;line-height:1.8;color:var(--harbor);}

/* ======================== FOOTER =========================== */
footer{background:var(--midnight);padding:4rem 4rem 2.5rem;}
.footer-top{
  display:flex;flex-wrap:wrap;gap:3rem;
  justify-content:space-between;align-items:flex-start;
  padding-bottom:2.8rem;margin-bottom:2.2rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand{display:block;}
.footer-brand img{height:72px;width:auto;display:block;}
@media(max-width:900px){.footer-brand img{height:58px;margin:0 auto;}}

.footer-tagline{
  font-family:var(--body);font-size:.95rem;font-weight:300;color:var(--mist);
  margin-top:.45rem;letter-spacing:.04em;
}
.footer-col{display:flex;flex-direction:column;gap:.75rem;}
.footer-col a{
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mist);transition:color .2s;
}
.footer-col a:hover{color:var(--white);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.footer-copy{font-family:var(--body);font-size:.86rem;font-weight:300;color:var(--mist);}

/* ======================= RESPONSIVE ======================== */
@media(max-width:1100px){
  .masonry{column-count:2;}
  .faq-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  nav{padding:1rem 1.4rem;flex-wrap:wrap;}
  .nav-toggle{display:block;}
  .nav-links{
    display:none;width:100%;flex-direction:column;
    gap:1.2rem;padding:1.4rem 0 .4rem;align-items:flex-start;
  }
  .nav-links.open{display:flex;}

  .hero-frame{aspect-ratio:4/3;max-height:none;}
  .hero-copy{left:1.4rem;right:1.4rem;bottom:2rem;}

  .page-head{padding:3.5rem 1.4rem 2.8rem;}

  .split{grid-template-columns:1fr;}
  .split-media{padding:1.6rem;order:-1;}
  .split-media img{max-height:none;}
  .split-copy{padding:3.5rem 1.4rem;}

  .triptych-wrap{padding:3.5rem 1.4rem;}
  .triptych{grid-template-columns:1fr;gap:2rem;}

  .quote-band{padding:4rem 1.4rem;}

  .request{grid-template-columns:1fr;gap:2.5rem;padding:3.5rem 1.4rem;}
  .form-2col{grid-template-columns:1fr;}

  .masonry{column-count:1;padding:2.5rem 1.4rem 4rem;}
  .statement{padding:3.5rem 1.4rem;}

  .pricing-wrap{padding:3rem 1.4rem 4rem;}
  .pricing-cols{grid-template-columns:1fr;}
  .p-col{
    border-right:none;border-bottom:1px solid var(--rule);
    padding:2.6rem 0;
  }
  .p-col:last-child{border-bottom:none;}
  .booking{padding:4rem 1.4rem;}

  .contact-grid{grid-template-columns:1fr;}
  .contact-left,.contact-right{padding:3.5rem 1.4rem;}
  .faq{padding:3.5rem 1.4rem;}
  .faq-grid{grid-template-columns:1fr;gap:2rem;}

  footer{padding:2.8rem 1.4rem 2rem;}
  .footer-top{flex-direction:column;gap:2rem;}
  .footer-bottom{flex-direction:column;text-align:center;}
}


/* ══════════ BRAND KEYWORD STRIP ══════════ */
.keywords{
  background:var(--white);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:2.2rem 4rem;
}
.keywords ul{
  list-style:none;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;
  gap:0;max-width:1000px;margin:0 auto;
}
.keywords li{
  font-family:var(--body);font-size:13px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--harbor);
  padding:0 2.2rem;border-left:1px solid var(--rule);
}
.keywords li:first-child{border-left:none;}
@media(max-width:900px){
  .keywords{padding:1.6rem 1.2rem;}
  .keywords li{padding:.45rem 1rem;border-left:none;font-size:11px;}
}

/* ══════════ VOICE / CREST BAND ══════════ */
.voice{
  background:var(--cloud);padding:5.5rem 4rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.voice-crest{width:132px;height:auto;margin-bottom:2rem;opacity:.95;}
.voice p{
  font-family:var(--head);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.45;
  color:var(--midnight);max-width:640px;
}
.voice-rule{width:120px;height:1px;background:var(--slate);margin-top:2rem;}
@media(max-width:900px){
  .voice{padding:3.5rem 1.2rem;}
  .voice-crest{width:104px;}
}

/* ══════════ TAGLINE UNDER HERO ══════════ */
.tagline{
  background:var(--white);padding:3.4rem 4rem;text-align:center;
  border-bottom:1px solid var(--rule);
}
.tagline p{
  font-family:var(--head);font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.55;
  color:var(--midnight);max-width:720px;margin:0 auto;
}
@media(max-width:900px){.tagline{padding:2.4rem 1.2rem;}}