/* ==========================================================================
   Heritage Estate Services — heritagees.ca
   Single stylesheet for the whole site. Edit here to change every page.

   Brand
     gold    #bf9e58   (carried over from the original site)
     ink     #1f2124   (header/footer ground — the logo is white, needs dark)
     paper   #ffffff / #f6f5f2 alternating section grounds
   Type
     display : Cambria / Constantia transitional serif — estate & legal register
     body    : Segoe UI / system humanist sans
   ========================================================================== */

:root{
  --gold:#bf9e58;
  --gold-dk:#a5853f;
  --gold-lt:#d8be86;

  --ink:#1f2124;
  --ink-2:#2b2e32;
  --text:#33373d;
  --text-2:#5d636c;
  --text-3:#868d97;

  --paper:#ffffff;
  --paper-2:#f6f5f2;
  --paper-3:#efedE8;
  --rule:#e2dfd8;
  --rule-2:#d6d2c9;

  --ok:#2f6b45;
  --ok-bg:#e6f2ea;
  --err:#a8251a;
  --err-bg:#fbeae8;

  --serif:"Cambria","Constantia","Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --wrap:1140px;
  --gut:24px;
  --shadow:0 2px 14px rgba(31,33,36,.08);
  --shadow-lg:0 10px 34px rgba(31,33,36,.13);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--gold-dk); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:2px
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.2; margin:0 0 .5em; text-wrap:balance; color:var(--ink)}
h1{font-size:clamp(30px,4.6vw,46px); letter-spacing:-.015em}
h2{font-size:clamp(25px,3.3vw,34px); letter-spacing:-.01em}
h3{font-size:21px}
h4{font-size:18px}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em; padding-left:1.3em}
li{margin-bottom:.45em}
hr{border:0; border-top:1px solid var(--rule); margin:34px 0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.wrap-narrow{max-width:780px; margin:0 auto; padding:0 var(--gut)}
.skip{position:absolute; left:-9999px; top:0; background:var(--gold); color:#fff; padding:11px 18px; z-index:200}
.skip:focus{left:8px; top:8px}

/* ---------- top bar ---------- */
.topbar{background:var(--ink-2); color:#cdd1d6; font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.07)}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; justify-content:flex-end; min-height:40px}
.topbar a{color:#e6e8ea}
.topbar a:hover{color:var(--gold-lt)}
.topbar .sep{color:#5a6068}

/* ---------- header / nav ---------- */
.site-head{background:var(--ink); position:sticky; top:0; z-index:100; box-shadow:0 1px 0 rgba(255,255,255,.06)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:84px}
.brand{display:block; flex:0 0 auto}
.brand img{width:250px; max-width:52vw}

.nav-toggle{
  display:none; background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff;
  padding:9px 13px; border-radius:3px; cursor:pointer; font:inherit; font-size:14px; align-items:center; gap:8px
}
.nav-toggle .bars{display:block; width:17px; height:11px; position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bars span{
  content:""; position:absolute; left:0; right:0; height:1.5px; background:#fff; transition:transform .22s, opacity .22s
}
.nav-toggle .bars::before{top:0}
.nav-toggle .bars span{top:5px}
.nav-toggle .bars::after{bottom:0}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars span{opacity:0}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-5px) rotate(-45deg)}

.nav{display:flex; align-items:center; gap:4px}
.nav a{
  display:block; color:#f0f1f2; font-size:14.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 14px; border-radius:2px; white-space:nowrap
}
.nav a:hover{color:var(--gold-lt); text-decoration:none}
.nav a[aria-current="page"]{color:var(--gold)}
.nav .has-sub{position:relative}
.nav .has-sub > a::after{content:""; display:inline-block; width:5px; height:5px; margin-left:7px; vertical-align:2px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg)}
.nav .sub{
  position:absolute; left:0; top:100%; min-width:250px; background:#fff; border:1px solid var(--rule);
  border-top:2px solid var(--gold); box-shadow:var(--shadow-lg); padding:6px 0; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s, transform .16s, visibility .16s
}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1; visibility:visible; transform:none}
.nav .sub a{
  color:var(--text); text-transform:none; letter-spacing:0; font-size:15.5px; padding:9px 18px; border-radius:0
}
.nav .sub a:hover{background:var(--paper-2); color:var(--gold-dk)}
.nav .cta{
  background:var(--gold); color:#fff; margin-left:10px; padding:11px 18px; border-radius:2px; font-weight:600
}
.nav .cta:hover{background:var(--gold-dk); color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--gold); color:#fff; border:0; cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:14px 28px; border-radius:2px; transition:background .18s
}
.btn:hover{background:var(--gold-dk); color:#fff; text-decoration:none}
.btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff; color:var(--ink)}
.btn-dark{background:var(--ink)}
.btn-dark:hover{background:#000}
.btn[disabled]{opacity:.6; cursor:not-allowed}

/* ---------- hero (home) ---------- */
.hero{position:relative; background:var(--ink); overflow:hidden}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(31,33,36,.9) 0%,rgba(31,33,36,.62) 55%,rgba(31,33,36,.4) 100%)}
.hero .wrap{position:relative; z-index:2; padding-top:96px; padding-bottom:100px; max-width:var(--wrap)}
.hero-inner{max-width:660px}
.hero .eyebrow{color:var(--gold); font-size:13px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 18px; font-weight:600}
.hero h1{color:#fff; font-size:clamp(32px,5vw,52px); margin-bottom:20px}
.hero p{color:#d8dade; font-size:19px; max-width:56ch; margin-bottom:30px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}

/* ---------- inner page banner ---------- */
.page-head{background:var(--ink); color:#fff; padding:52px 0 46px; position:relative}
.page-head::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gold)}
.page-head h1{color:#fff; margin:0 0 8px}
.page-head p{color:#b9bdc3; margin:0; max-width:60ch}
.crumbs{font-size:13.5px; color:#8d939b; margin:0 0 14px}
.crumbs a{color:#c3c7cc}
.crumbs a:hover{color:var(--gold-lt)}
.crumbs span{margin:0 7px; color:#5f656d}

/* ---------- sections ---------- */
.section{padding:74px 0}
.section-tight{padding:52px 0}
.section-alt{background:var(--paper-2)}
.section-ink{background:var(--ink); color:#c9cdd2}
.section-ink h2,.section-ink h3{color:#fff}
.sec-head{text-align:center; max-width:660px; margin:0 auto 46px}
.sec-head .eyebrow{color:var(--gold); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; margin:0 0 12px}
.sec-head h2{margin-bottom:12px}
.sec-head p{color:var(--text-2); margin:0}
.sec-head::after{content:""; display:block; width:54px; height:2px; background:var(--gold); margin:22px auto 0}

/* ---------- service cards ---------- */
/* 240px min lets all four cards sit on one row inside the 1140px wrap
   (4x240 + 3x24 gap = 1032, against 1092 of usable width). */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px}
.card{
  background:#fff; border:1px solid var(--rule); border-top:3px solid var(--gold);
  padding:30px 26px 26px; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s
}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px)}
.card h3{margin-bottom:10px; font-size:20px}
.card p{color:var(--text-2); font-size:15.5px; flex:1; margin-bottom:18px}
.card .more{font-size:14px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-dk)}
.card .more::after{content:" →"}
.card-ico{width:42px; height:42px; margin-bottom:16px; color:var(--gold)}
.card-ico svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4}

/* ---------- media rows (service detail pages) ---------- */
.media{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:44px; align-items:start}
.media img{border:1px solid var(--rule); background:#fff; width:100%}
.media-body h2:first-child{margin-top:0}
.prose h2{margin-top:1.6em; font-size:26px}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:0; list-style:none}
.prose ul li{position:relative; padding-left:26px; margin-bottom:.6em}
.prose ul li::before{
  content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  background:var(--gold); border-radius:50%
}
.prose a{text-decoration:underline; text-underline-offset:2px}

/* pricing panel — deliberately NOT hidden on small screens (the old site hid it) */
.panel{background:var(--paper-2); border-left:3px solid var(--gold); padding:26px 28px; margin:34px 0}
.panel h2,.panel h3{margin-top:0}
.panel :last-child{margin-bottom:0}

.download{
  display:inline-flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--rule-2);
  border-left:3px solid var(--gold); padding:15px 22px; margin:6px 0 20px; color:var(--ink); font-weight:600
}
.download:hover{background:var(--paper-2); text-decoration:none; border-color:var(--gold)}
.download small{display:block; font-weight:400; color:var(--text-3); font-size:13px; letter-spacing:.02em}
.download svg{flex:0 0 auto; width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.6}

/* ---------- team ---------- */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:28px}
.member{background:#fff; border:1px solid var(--rule); display:flex; flex-direction:column}
.member img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; background:var(--paper-3)}
.member-body{padding:22px 22px 24px}
.member h3{margin:0 0 3px; font-size:19px}
.member .role{color:var(--gold-dk); font-size:13px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; margin:0 0 14px}
.member blockquote{
  margin:0 0 14px; padding:0 0 0 15px; border-left:2px solid var(--gold);
  font-family:var(--serif); font-style:italic; color:var(--ink); font-size:16px; line-height:1.5
}
.member p.bio{color:var(--text-2); font-size:14.5px; margin:0}

/* Single team member. A lone card in the auto-fit grid would stretch across
   the whole row and scale the portrait up with it, so cap the width and lay
   the card out horizontally instead — photo beside the bio rather than a
   giant image above it. */
.team-single{grid-template-columns:minmax(0,660px); justify-content:center}
.team-single .member{flex-direction:row; min-height:340px}
.team-single .member img{flex:0 0 250px; width:250px; aspect-ratio:auto; align-self:stretch}
.team-single .member-body{padding:30px 30px 32px; align-self:center}
@media (max-width:620px){
  .team-single .member{flex-direction:column; min-height:0}
  .team-single .member img{flex:none; width:100%; aspect-ratio:3/4}
  .team-single .member-body{padding:22px 22px 24px}
}

/* ---------- gold CTA band ---------- */
.band{background:var(--gold); padding:30px 0}
.band .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
.band p{font-family:var(--serif); font-size:27px; color:var(--ink); margin:0; font-weight:600}
.band .btn{background:#fff; color:var(--ink)}
.band .btn:hover{background:var(--ink); color:#fff}

/* ---------- posts ---------- */
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:26px}
.post-card{background:#fff; border:1px solid var(--rule); padding:28px 26px; display:flex; flex-direction:column}
.post-card:hover{box-shadow:var(--shadow)}
.post-card .date{
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); margin:0 0 10px; font-weight:600
}
.post-card h3{margin-bottom:10px; font-size:20px}
.post-card h3 a{color:var(--ink)}
.post-card h3 a:hover{color:var(--gold-dk); text-decoration:none}
.post-card p{color:var(--text-2); font-size:15.5px; flex:1; margin-bottom:16px}
.post-card .more{font-size:14px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-dk)}
.post-card .more::after{content:" →"}

.article{max-width:760px; margin:0 auto}
.article .meta{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin:0 0 10px; font-weight:600}
.article h1{margin-bottom:26px}
.article p:first-of-type{font-size:19px; color:var(--text-2)}
.back-link{display:inline-block; margin-top:40px; font-size:15px; font-weight:600}
.back-link::before{content:"← "}

/* ---------- forms ---------- */
.form-panel{background:#fff; border:1px solid var(--rule); border-top:3px solid var(--gold); padding:34px 32px; box-shadow:var(--shadow)}
.form-panel h2{margin-top:0; margin-bottom:6px; font-size:27px}
.form-panel .lede{color:var(--text-2); font-size:15.5px; margin-bottom:24px}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-size:13.5px; font-weight:600; letter-spacing:.04em; color:var(--ink)}
.field label .req{color:var(--gold-dk)}
.field input,.field textarea{
  font-family:var(--sans); font-size:16px; color:var(--text); background:#fff;
  border:1px solid var(--rule-2); border-radius:2px; padding:12px 14px; width:100%; transition:border-color .15s
}
.field input:hover,.field textarea:hover{border-color:var(--text-3)}
.field input:focus,.field textarea:focus{border-color:var(--gold); outline:2px solid rgba(191,158,88,.28); outline-offset:0}
.field textarea{min-height:132px; resize:vertical}
.field .err-msg{font-size:13px; color:var(--err); display:none}
.field.invalid input,.field.invalid textarea{border-color:var(--err); background:#fffafa}
.field.invalid .err-msg{display:block}
/* honeypot — must stay reachable to bots but invisible & unfocusable for people */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.form-actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:22px}
.form-note{font-size:13px; color:var(--text-3); margin:0; flex:1; min-width:200px}
.form-msg{padding:14px 18px; border-radius:2px; margin-bottom:22px; font-size:15.5px; display:none}
.form-msg.show{display:block}
.form-msg.ok{background:var(--ok-bg); border-left:3px solid var(--ok); color:#1e4b2f}
.form-msg.err{background:var(--err-bg); border-left:3px solid var(--err); color:#7d1c13}
.is-sending .btn{opacity:.65; pointer-events:none}

/* consultation block with photo */
.consult{background:var(--ink); position:relative; overflow:hidden}
.consult-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.2}
.consult .wrap{position:relative; z-index:2; padding-top:70px; padding-bottom:70px}
.consult-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center}
.consult-copy h2{color:#fff}
.consult-copy p{color:#c2c6cb}
.consult-copy .phone{display:inline-block; font-family:var(--serif); font-size:31px; color:var(--gold); font-weight:600; margin-top:6px}
.consult-copy .phone:hover{color:var(--gold-lt); text-decoration:none}
.consult-copy .hours{font-size:14px; color:#9aa0a8; margin:2px 0 0}

/* ---------- contact details ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:44px; align-items:start}
.details{list-style:none; padding:0; margin:0}
.details li{display:flex; gap:15px; padding:16px 0; border-bottom:1px solid var(--rule)}
.details li:last-child{border-bottom:0}
.details svg{flex:0 0 auto; width:21px; height:21px; stroke:var(--gold); fill:none; stroke-width:1.6; margin-top:3px}
.details b{display:block; font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3); font-weight:600; margin-bottom:2px}
.details a{color:var(--ink)}
.details a:hover{color:var(--gold-dk)}
.map-embed{border:1px solid var(--rule); background:var(--paper-2); overflow:hidden; line-height:0}
.map-embed iframe{width:100%; height:340px; border:0; display:block; filter:grayscale(.25)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink); color:#a8aeb6; font-size:15px; padding:58px 0 0}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:44px}
.site-foot h4{color:#fff; font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px}
.site-foot img.foot-logo{width:210px; margin-bottom:20px}
.site-foot p{color:#9aa0a8; font-size:14.5px; line-height:1.7}
.site-foot ul{list-style:none; padding:0; margin:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:#c2c7cd}
.site-foot a:hover{color:var(--gold-lt)}
.foot-bottom{
  margin-top:46px; border-top:1px solid rgba(255,255,255,.1); padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:13px; color:#767d86
}

/* ---------- 404 / thank-you ---------- */
.centered{text-align:center; max-width:640px; margin:0 auto; padding:78px 0}
.centered .big{font-family:var(--serif); font-size:76px; color:var(--gold); line-height:1; margin:0 0 12px}
.centered .tick{
  width:66px; height:66px; margin:0 auto 22px; border-radius:50%; background:var(--ok-bg);
  display:flex; align-items:center; justify-content:center
}
.centered .tick svg{width:32px; height:32px; stroke:var(--ok); fill:none; stroke-width:2.4}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .media{grid-template-columns:1fr; gap:28px}
  .media img{max-width:330px}
  .consult-grid,.contact-grid{grid-template-columns:1fr; gap:34px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:34px}
  .site-foot .foot-about{grid-column:1 / -1}
}
@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,86vw); background:var(--ink-2);
    flex-direction:column; align-items:stretch; gap:0; padding:88px 20px 30px;
    transform:translateX(100%); transition:transform .26s ease; overflow-y:auto;
    box-shadow:-8px 0 30px rgba(0,0,0,.3)
  }
  .nav.open{transform:none}
  .nav a{padding:14px 10px; border-bottom:1px solid rgba(255,255,255,.09); font-size:15px}
  .nav .has-sub > a::after{float:right; margin-top:7px}
  .nav .sub{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:transparent; border:0; border-left:2px solid var(--gold); margin:0 0 0 10px; padding:0;
    max-height:0; overflow:hidden; transition:max-height .26s ease
  }
  .nav .has-sub.open .sub{max-height:340px}
  .nav .sub a{color:#d4d8dc; padding:12px 14px; font-size:14.5px}
  .nav .sub a:hover{background:rgba(255,255,255,.05); color:var(--gold-lt)}
  .nav .cta{margin:16px 0 0; text-align:center; border-bottom:0}
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden;
    transition:opacity .26s, visibility .26s; z-index:99
  }
  .nav-backdrop.on{opacity:1; visibility:visible}
  body.nav-open{overflow:hidden}
}
@media (max-width:640px){
  body{font-size:16px}
  .section{padding:52px 0}
  .hero .wrap{padding-top:64px; padding-bottom:68px}
  .fields{grid-template-columns:1fr}
  .form-panel{padding:26px 20px}
  .band .wrap{flex-direction:column; align-items:flex-start}
  .band p{font-size:23px}
  .foot-grid{grid-template-columns:1fr}
  .topbar .wrap{justify-content:center; font-size:13px}
  .media img{max-width:100%}
}

/* ---------- print ---------- */
@media print{
  .topbar,.site-head,.band,.consult,.nav-backdrop,.form-panel{display:none!important}
  body{font-size:12pt; color:#000}
  .site-foot{background:none; color:#000; border-top:1px solid #999}
}