/* Hallmark · macrostructure: Founder-Letter (bespoke, story-led) · tone: soft/warm/luxury-calm · anchor hue: sage-green
 * theme: custom-tuned · paper cream oklch(97% 0.01 85) · accent sage oklch(64% 0.05 130) · Playfair Display + DM Sans
 * Next Chapter Downsizing & Design — compassionate Edmonton downsizing + move management.
 */
:root {
  --cream:#faf7f2; --oat:#f0ebe1; --sand:#e8e4de; --paper-2:#f4efe7;
  --sage:#8b9e7c; --sage-deep:#6b7e5c; --sage-pale:#e8efe2; --green-700:#55653d;
  --gold:#c4a35a; --gold-deep:#a9863f; --gold-pale:#e8d9a8;
  --ink:#3a3a33; --ink-soft:#605b4d; --line:#e3ddd1;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'DM Sans', system-ui, sans-serif;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem;
  --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;
  --radius:14px; --radius-lg:22px;
  --shadow:0 1px 2px rgba(58,58,51,.04), 0 12px 32px rgba(58,58,51,.07);
  --shadow-soft:0 8px 30px rgba(107,126,92,.10);
  --ease-out:cubic-bezier(.16,1,.3,1); --dur:.5s;
  --measure:65ch; --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; letter-spacing:.005em;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.1;
  letter-spacing:-.01em; margin:0; overflow-wrap:anywhere; min-width:0}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-6)}
.eyebrow{font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sage-deep); margin:0 0 var(--sp-3)}
.lede{font-size:1.2rem; color:var(--ink-soft); max-width:var(--measure)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body);
  font-weight:600; font-size:1rem; line-height:1; padding:.95rem 1.5rem; border-radius:999px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); white-space:nowrap}
.btn--primary{background:var(--green-700); color:#fff; box-shadow:var(--shadow-soft)}
.btn--primary:hover{background:#465429; transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--sage); background:var(--sage-pale)}
.btn--gold{background:var(--gold); color:#3a2f16}
.btn--gold:hover{background:var(--gold-deep); color:#fff; transform:translateY(-2px)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--gold-deep); outline-offset:3px; border-radius:6px}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(250,247,242,.88);
  backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--line)}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  min-height:68px; max-width:var(--wrap); margin:0 auto; padding:.6rem var(--sp-6)}
.brandmark{display:flex; flex-direction:column; text-decoration:none; line-height:1}
.brandmark b{font-family:var(--font-body); font-weight:700; letter-spacing:.22em; font-size:.82rem; color:var(--ink)}
.brandmark span{font-family:var(--font-display); font-style:italic; font-size:1.02rem; color:var(--sage-deep)}
.nav__links{display:none; gap:var(--sp-6); align-items:center}
.nav__links a{text-decoration:none; color:var(--ink-soft); font-weight:500; font-size:.98rem}
.nav__links a:hover{color:var(--sage-deep)}
.nav__cta{display:inline-flex}
@media(min-width:860px){.nav__links{display:flex}}

/* hero */
.hero{padding:var(--sp-16) 0 var(--sp-12)}
.hero__grid{display:grid; gap:var(--sp-8); align-items:center}
.hero h1{font-size:clamp(2.5rem,7vw,4.4rem)}
.hero .lede{margin-top:var(--sp-6)}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-8)}
.hero__trust{margin-top:var(--sp-6); font-size:.92rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center}
.hero__trust b{color:var(--sage-deep)}
.hero__art{position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3; background:linear-gradient(150deg,var(--sage-pale),var(--oat) 55%,var(--gold-pale));
  box-shadow:var(--shadow); border:1px solid var(--line)}
.hero__art img{width:100%; height:100%; object-fit:cover}
.hero__badge{position:absolute; left:var(--sp-4); bottom:var(--sp-4); background:rgba(250,247,242,.94);
  border-radius:999px; padding:.5rem 1rem; font-size:.85rem; font-weight:600; color:var(--sage-deep); box-shadow:var(--shadow)}
@media(min-width:860px){
  .hero__grid{grid-template-columns:1.05fr .95fr}
  .hero__art{aspect-ratio:4/5}
}

/* founder note */
.founder{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--sp-20) 0}
.founder__grid{display:grid; gap:var(--sp-8); align-items:start}
.founder__photo{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); aspect-ratio:4/5; background:var(--sand); max-width:360px}
.founder__photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
.founder h2{font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:var(--sp-6)}
.founder__body p{margin-bottom:var(--sp-4); color:#4a473d; max-width:var(--measure)}
.founder__sign{margin-top:var(--sp-6); font-family:var(--font-display); font-style:italic; font-size:1.25rem; color:var(--sage-deep)}
.founder__sign small{display:block; font-family:var(--font-body); font-style:normal; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:.3rem}
@media(min-width:860px){.founder__grid{grid-template-columns:360px 1fr; gap:var(--sp-16)}}

/* values band */
.values{padding:var(--sp-16) 0}
.values__grid{display:grid; grid-template-columns:1fr; gap:var(--sp-8)}
.value{display:flex; gap:var(--sp-4); align-items:flex-start}
.value__ic{flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--sage-pale); color:var(--sage-deep)}
.value__ic svg{width:22px; height:22px}
.value h3{font-size:1.15rem; font-family:var(--font-body); font-weight:700; margin-bottom:.2rem}
.value p{font-size:.96rem; color:var(--ink-soft)}
@media(min-width:640px){.values__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-8) var(--sp-12)}}
@media(min-width:960px){.values__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* services */
.services{background:var(--sage-pale); padding:var(--sp-20) 0}
.services__head{max-width:var(--measure); margin-bottom:var(--sp-12)}
.services__head h2{font-size:clamp(2rem,4.5vw,3rem)}
.services__grid{display:grid; grid-template-columns:1fr; gap:var(--sp-8)}
.svc{background:var(--cream); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)}
.svc:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(58,58,51,.10)}
.svc__img{aspect-ratio:3/2; background:linear-gradient(150deg,var(--oat),var(--gold-pale)); position:relative}
.svc__img img{width:100%; height:100%; object-fit:cover}
.svc__n{position:absolute; top:.7rem; left:.9rem; font-family:var(--font-display); font-style:italic; font-size:1.1rem; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.35)}
.svc__body{padding:var(--sp-6); flex:1}
.svc__body h3{font-size:1.3rem; margin-bottom:.5rem}
.svc__body p{font-size:.97rem; color:var(--ink-soft)}
@media(min-width:640px){.services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.services__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* how it works */
.how{padding:var(--sp-20) 0}
.how__head{text-align:center; max-width:var(--measure); margin:0 auto var(--sp-16)}
.how__head h2{font-size:clamp(2rem,4.5vw,3rem)}
.steps{display:grid; grid-template-columns:1fr; gap:var(--sp-8); counter-reset:step; position:relative}
.step{position:relative; padding-left:calc(56px + var(--sp-4))}
.step::before{counter-increment:step; content:counter(step); position:absolute; left:0; top:-4px;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.4rem; color:#fff; background:var(--green-700)}
.step:nth-child(even)::before{background:var(--gold); color:#3a2f16}
.step h3{font-size:1.25rem; margin-bottom:.3rem}
.step p{font-size:.97rem; color:var(--ink-soft); max-width:42ch}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-6)}
  .step{padding-left:0; padding-top:calc(56px + var(--sp-4)); text-align:center}
  .step::before{left:50%; transform:translateX(-50%); top:0}
  .step p{margin:0 auto}
}

/* testimonial */
.quote{background:#46543a; color:#f6f4ec; padding:var(--sp-24) 0}
.quote__in{max-width:820px; margin:0 auto; text-align:center}
.quote blockquote{margin:0}
.quote p{font-family:var(--font-display); font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.35; font-style:normal}
.quote cite{display:block; margin-top:var(--sp-8); font-style:normal; font-family:var(--font-body); font-size:.95rem; letter-spacing:.06em; color:var(--gold-pale)}
.quote cite b{display:block; font-size:1.05rem; letter-spacing:0; color:#fff; margin-bottom:.15rem}

/* booking CTA */
.cta{padding:var(--sp-24) 0; text-align:center}
.cta h2{font-size:clamp(2.1rem,5vw,3.4rem); max-width:16ch; margin:0 auto var(--sp-6)}
.cta p{max-width:52ch; margin:0 auto var(--sp-8); color:var(--ink-soft); font-size:1.1rem}
.cta__row{display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; align-items:center}
.cta__phone{font-family:var(--font-display); font-size:1.2rem; color:var(--sage-deep); text-decoration:none; padding:.4rem .6rem}
.cta__phone:hover{color:var(--gold-deep)}

/* footer */
.foot{background:var(--ink); color:#cfc9bb; padding:var(--sp-16) 0 var(--sp-8)}
.foot__grid{display:grid; gap:var(--sp-8); grid-template-columns:1fr}
.foot .brandmark b{color:#fff} .foot .brandmark span{color:var(--gold-pale)}
.foot__c a{color:#e7e1d3; text-decoration:none; display:block; margin-top:.4rem}
.foot__c a:hover{color:#fff}
.foot__note{font-size:.9rem; color:#9c968a; max-width:40ch; margin-top:var(--sp-3)}
.foot__legal{margin-top:var(--sp-12); padding-top:var(--sp-6); border-top:1px solid #4a473d; font-size:.85rem; color:#8f897d;
  display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between}
@media(min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}

/* reveal + reduced motion */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none; transition:opacity .12s}
  .btn,.svc{transition:none}
}

/* small-screen safety (320–520px): keep the nav CTA one line, tighten gutters */
@media(max-width:520px){
  .wrap{padding:0 var(--sp-4)}
  .nav__in{padding:.6rem var(--sp-4); gap:var(--sp-3)}
  .nav__cta{padding:.66rem .95rem; font-size:.86rem}
  .brandmark b{font-size:.74rem; letter-spacing:.16em}
  .brandmark span{font-size:.9rem}
  .hero{padding:var(--sp-12) 0 var(--sp-8)}
  .btn{font-size:.95rem}
}
@media(max-width:360px){ .brandmark span{display:none} }

/* ── article (SEO guide) pages ── */
.crumbs{font-size:.9rem; color:var(--ink-soft); padding:var(--sp-8) 0 0; max-width:760px; margin:0 auto}
.crumbs a{color:var(--sage-deep); text-decoration:none} .crumbs a:hover{color:var(--gold-deep)}
.crumbs span{margin:0 .4rem; color:var(--line)}
.article article{max-width:760px; margin:0 auto; padding:0 var(--sp-6) var(--sp-16)}
.article h1{font-size:clamp(2rem,5vw,3.1rem); margin:var(--sp-6) 0 var(--sp-4)}
.article > article > .lede{font-size:1.2rem; color:var(--ink-soft); margin-bottom:var(--sp-8)}
.article .prose{margin:var(--sp-10) 0}
.article .prose h2{font-size:1.5rem; margin-bottom:var(--sp-3)}
.article .prose p{margin-bottom:var(--sp-4); color:#4a473d}
.article .faq{margin:var(--sp-12) 0}
.article .faq h2{font-size:1.5rem; margin-bottom:var(--sp-4)}
.article .faq details{border-top:1px solid var(--line); padding:var(--sp-4) 0}
.article .faq summary{font-family:var(--font-display); font-size:1.15rem; cursor:pointer; color:var(--ink); list-style:none}
.article .faq summary::-webkit-details-marker{display:none}
.article .faq summary::before{content:'+'; color:var(--sage-deep); font-weight:700; margin-right:.6rem}
.article .faq details[open] summary::before{content:'–'}
.article .faq p{margin-top:var(--sp-3); color:#4a473d}
.article .related{margin-top:var(--sp-12); padding-top:var(--sp-8); border-top:1px solid var(--line)}
.article .related h2{font-size:1.3rem; margin-bottom:var(--sp-4)}
.article .related ul{list-style:none; padding:0; margin:0; display:grid; gap:var(--sp-3)}
.article .related a{color:var(--sage-deep); text-decoration:none; font-weight:500}
.article .related a:hover{color:var(--gold-deep)}
.article-cta{background:var(--sage-pale); padding:var(--sp-16) 0; text-align:center}
.article-cta h2{font-size:clamp(1.6rem,4vw,2.4rem); max-width:22ch; margin:0 auto var(--sp-4)}
.article-cta p{color:var(--ink-soft); max-width:50ch; margin:0 auto var(--sp-6)}

/* ── guides list on the home ── */
.guides{padding:var(--sp-20) 0; background:var(--paper-2); border-top:1px solid var(--line)}
.guides__head{max-width:var(--measure); margin-bottom:var(--sp-8)}
.guides__head h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.guides__grid{display:grid; grid-template-columns:1fr; gap:var(--sp-4)}
.guide{display:block; text-decoration:none; padding:var(--sp-4) var(--sp-6); background:var(--cream); border:1px solid var(--line);
  border-radius:var(--radius); color:var(--ink); font-family:var(--font-display); font-size:1.1rem;
  transition:transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)}
.guide:hover{transform:translateX(4px); border-color:var(--sage)}
.guide span{display:block; font-family:var(--font-body); font-size:.9rem; color:var(--ink-soft); margin-top:.2rem; font-weight:400}
@media(min-width:720px){.guides__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}