/* Queen City Estate Sales
   Direction: warm craft. The audience has usually just lost a parent or is being
   forced to downsize, so the register is plainspoken and reassuring rather than
   polished. Their real brand turquoise carries the accent; clay is the surprise,
   used only for the process numerals. */

@font-face{font-family:'Bitter';src:url('fonts/Bitter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Bitter';src:url('fonts/Bitter-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'SourceSans';src:url('fonts/SourceSans3-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'SourceSans';src:url('fonts/SourceSans3-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --paper:#FBF8F3;
  --ink:#1C1B19;
  --muted:#6B6560;
  --rule:#E3DCD2;
  --teal:#23DDD9;        /* sampled from their own logo */
  --teal-ink:#0B7E7C;    /* darkened for text - #23DDD9 fails contrast on paper */
  --clay:#C4623D;        /* the surprise */
  --disp:'Bitter',Georgia,serif;
  --body:'SourceSans',Helvetica,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17.5px;line-height:1.68;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink)}
.wrap{width:min(100% - 3rem,var(--maxw));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:#fff;padding:.6rem 1rem}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
strong{font-weight:600}

/* ---- top bar + masthead --------------------------------------------------- */
.topbar{background:var(--ink);color:#CFC8C0;font-size:.82rem}
.topbar-in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.5rem 0}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:var(--teal)}
.topbar-c i{opacity:.4;font-style:normal;margin:0 .4rem}

.mast{position:sticky;top:0;z-index:30;background:rgba(251,248,243,.95);
  backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--rule)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.8rem 0}
.brand{display:block;text-decoration:none;line-height:0}
.brand img{width:196px;height:auto}
.mast nav{display:flex;align-items:center;gap:1.3rem}
.mast nav a{text-decoration:none;color:var(--ink);font-size:.88rem;font-weight:600;
  padding-bottom:.2rem;border-bottom:2px solid transparent}
.mast nav a:hover{border-bottom-color:var(--teal)}
.nav-cta{background:var(--teal);color:var(--ink) !important;padding:.62rem 1.05rem;
  border-bottom:none !important;font-weight:600}
.nav-cta:hover{background:var(--ink);color:#fff !important}

/* ---- hero ----------------------------------------------------------------- */
.hero{padding:3.6rem 0 3rem}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:3.4rem;align-items:center}
.eyebrow{margin:0 0 1rem;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-ink);font-weight:600}
.hero h1{margin:0 0 1.2rem;font-family:var(--disp);font-weight:700;
  font-size:clamp(2.6rem,5.6vw,4.2rem);line-height:1.02;letter-spacing:-.015em}
.lede{margin:0 0 2rem;font-size:1.12rem;color:#403C38;max-width:46ch}
.hero-call{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;margin:0}
.call-k{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.bignum{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.7rem);
  line-height:1.15;text-decoration:none;color:var(--ink);
  box-shadow:inset 0 -.24em 0 var(--teal)}
.bignum:hover{box-shadow:inset 0 -1em 0 var(--teal)}
.textlink{margin-top:.7rem;font-weight:600;font-size:.94rem}
.hero-fig{margin:0}
.hero-fig img{width:100%;border:1px solid var(--rule)}

/* ---- signature: the traced Charlotte skyline ------------------------------
   Tiled at its NATURAL aspect, not stretched: preserveAspectRatio="none" across
   a full-width band flattens the buildings into a wobbly line. Applied as a
   mask rather than a background-image so one file can be recoloured per use -
   currentColor does not resolve inside an externally referenced SVG. */
.skyband{
  height:56px;
  background-color:var(--ink);
  -webkit-mask-image:url('img/skyline.svg');  mask-image:url('img/skyline.svg');
  -webkit-mask-repeat:repeat-x;               mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;                mask-size:auto 100%;
  -webkit-mask-position:left bottom;          mask-position:left bottom;
}

/* ---- generic sections ----------------------------------------------------- */
.sec{padding:3.8rem 0}
.sec-h{margin:0 0 .9rem;font-family:var(--disp);font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.1}
.sec-sub{margin:0 0 2.4rem;color:var(--muted);max-width:62ch;font-size:1.04rem}

.why{background:#fff;border-block:1px solid var(--rule)}
.why-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:2.6rem;align-items:start}
.why-fig{margin:1.4rem 0 0}
.why-fig img{width:100%;border:1px solid var(--rule)}
.why-tx p{margin:0 0 1.1rem;max-width:62ch}

/* ---- how it works: giant faint clay numerals ------------------------------ */
.stages{display:grid;gap:2.2rem}
.stage{display:grid;grid-template-columns:auto 1fr;gap:1.8rem;align-items:start;margin:0}
.stage-n{margin:0;font-family:var(--disp);font-weight:700;
  font-size:clamp(3.4rem,7vw,5.6rem);line-height:.82;color:var(--clay);opacity:.3;
  width:2.2ch;text-align:right}
.stage-tx h3{margin:.3rem 0 .5rem;font-family:var(--disp);font-weight:600;font-size:1.32rem}
.stage-tx p{margin:0;color:#403C38;max-width:64ch}

.rate{display:grid;grid-template-columns:auto auto 1fr;gap:.6rem 1.5rem;align-items:baseline;
  margin:2.8rem 0 0;padding-top:1.8rem;border-top:2px solid var(--ink)}
.rate-k{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rate-v{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1;color:var(--ink)}
.rate-n{color:var(--muted);font-size:.98rem;max-width:58ch}

/* ---- services ------------------------------------------------------------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:2.8rem;align-items:center;margin:0 0 3rem}
.svc-alt .svc-fig{order:-1}
.svc-tx h3{margin:0 0 .8rem;font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.svc-tx p{margin:0 0 1rem;color:#403C38}
.svc-fig{margin:0}
.svc-fig img{width:100%;border:1px solid var(--rule)}
.tick{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.28rem 1rem}
.tick li{position:relative;padding-left:1.3rem;font-size:.98rem}
.tick li::before{content:"";position:absolute;left:0;top:.52em;width:.6rem;height:.6rem;background:var(--teal)}

.shots-k{margin:2.6rem 0 1.2rem;font-family:var(--disp);font-weight:600;font-size:1.12rem}
.shots{column-count:4;column-gap:1rem}
.shot{margin:0 0 1rem;break-inside:avoid;display:inline-block;width:100%}
.shot img{width:100%;border:1px solid var(--rule)}

/* ---- sales ---------------------------------------------------------------- */
.sales{background:#fff;border-block:1px solid var(--rule)}
.sales-in{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center}
.sales p{max-width:56ch}
.sales-call{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:1.6rem}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  font-weight:600;font-size:.92rem;padding:.9rem 1.6rem}
.btn:hover{background:var(--teal);color:var(--ink)}
.sales-fig{margin:0}
.sales-fig img{width:100%;border:1px solid var(--rule)}

/* ---- team ----------------------------------------------------------------- */
.team-in{display:grid;grid-template-columns:.62fr 1.38fr;gap:3rem;align-items:start}
.team-fig{margin:0}
.team-fig img{width:100%;border:1px solid var(--rule)}
.team-fig figcaption{margin-top:.7rem}
.team-fig b{display:block;font-family:var(--disp);font-weight:600;font-size:1.06rem}
.team-fig span{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.team-tx p{margin:0 0 1.1rem;color:#403C38;max-width:62ch}

/* ---- testimonials --------------------------------------------------------- */
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.2rem}
.quotes blockquote{margin:0;padding:1.6rem 1.8rem;background:#fff;border-left:4px solid var(--teal)}
.quotes p{margin:0 0 1rem;font-size:1.02rem;color:#403C38}
.quotes cite{font-style:normal;font-weight:600;font-size:.9rem;color:var(--muted)}

/* ---- faq ------------------------------------------------------------------ */
.faq{background:#fff;border-block:1px solid var(--rule)}
.faq-in{display:grid;grid-template-columns:.62fr 1.38fr;gap:3rem;align-items:start}
.faq-k{position:sticky;top:6.5rem}
.faq-k p{color:var(--muted)}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{cursor:pointer;list-style:none;padding:.95rem 2rem .95rem 0;position:relative;
  font-family:var(--disp);font-weight:600;font-size:1.04rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:.2rem;top:.8rem;
  font-size:1.4rem;line-height:1;color:var(--teal-ink);font-family:var(--body)}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details p{margin:0 0 1.15rem;color:#403C38;max-width:66ch}

/* ---- consultation --------------------------------------------------------- */
.consult{background:var(--ink);color:#EDE8E1;padding:4rem 0}
.consult-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.4rem;align-items:start}
.consult h2{margin:0 0 1rem;font-family:var(--disp);font-weight:700;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.05;color:#fff}
.consult-tx p{color:#BDB6AE;max-width:44ch}
.consult-dl{margin:2rem 0 0;border-top:1px solid rgba(255,255,255,.2)}
.consult-dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid rgba(255,255,255,.2)}
.consult-dl dt{margin:0;color:#9A938B;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.consult-dl dd{margin:0}
.consult-dl a{color:var(--teal);text-decoration:none}
.consult-dl a:hover{text-decoration:underline}

.cform{background:var(--paper);color:var(--ink);padding:1.8rem}
.cform label{display:block;margin:0 0 1rem}
.cform .lbl{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.32rem;font-weight:600}
.cform .lbl b{color:var(--clay)}
.cform input,.cform textarea,.cform select{
  width:100%;font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--ink);
  background:#fff;border:1px solid var(--rule);padding:.6rem .7rem;border-radius:0}
.cform select{appearance:none;cursor:pointer}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:3px solid var(--teal);outline-offset:0;border-color:var(--teal-ink)}
.cform textarea{resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
.cform button{font-family:var(--body);font-weight:600;font-size:.94rem;
  background:var(--teal);color:var(--ink);border:0;padding:1rem 1.9rem;cursor:pointer;margin-top:.4rem}
.cform button:hover{background:var(--ink);color:#fff}
.cnote{margin:.85rem 0 0;font-size:.86rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.notice{margin:0 0 1.3rem;padding:.9rem 1.1rem;border-left:4px solid var(--teal);
  background:#fff;font-size:.95rem;line-height:1.6}
.notice.bad{border-left-color:var(--clay)}

/* ---- footer --------------------------------------------------------------- */
.foot{background:var(--ink);color:#B4ADA5;padding:0 0 2rem}
.foot-sky{background-color:var(--paper);height:40px;margin-bottom:2.4rem}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr .9fr;gap:2.2rem;align-items:start}
.foot-brand{margin:0 0 .5rem}
.foot-brand img{width:210px;height:auto;margin-bottom:.5rem}
.foot-brand span{font-size:.85rem}
.foot-c{margin:0;font-size:.84rem;color:#7E7870}
.foot-nav{display:flex;flex-direction:column;gap:.3rem}
.foot-nav a{color:#B4ADA5;text-decoration:none;font-size:.9rem}
.foot-nav a:hover{color:var(--teal)}
.foot-c2{display:flex;flex-direction:column;gap:.3rem}
.foot-c2 a{color:#B4ADA5;text-decoration:none;font-size:.9rem}
.foot-c2 a:hover{color:var(--teal)}

/* ---- motion: scoped to html.js so content is never hidden without JS ------ */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  html.js .reveal.in{opacity:1;transform:none}
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:1000px){
  .hero-in,.why-in,.svc,.sales-in,.team-in,.faq-in,.consult-in{grid-template-columns:1fr;gap:2rem}
  .faq-k{position:static}
  .svc-alt .svc-fig{order:0}
  .shots{column-count:3}
  .quote-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  body{font-size:16.5px}
  .mast-in{flex-direction:column;align-items:flex-start;gap:.7rem}
  .mast nav{flex-wrap:wrap;gap:.6rem 1rem}
  .mast nav a{font-size:.82rem}
  .brand img{width:158px}
  .topbar-in{font-size:.72rem;gap:.15rem}
  .hero{padding:2.2rem 0 2rem}
  .stage{grid-template-columns:1fr;gap:.2rem}
  .stage-n{text-align:left;width:auto}
  .rate{grid-template-columns:1fr;gap:.3rem}
  .shots{column-count:2}
  .tick{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .skyband{height:38px}
}

/* The final clean-out shot is the cleared room - the "after". Captioned, because
   it is the single most persuasive image on the page. */
.shot-after figcaption{margin-top:.5rem;font-family:var(--disp);font-weight:600;
  font-size:.95rem;color:var(--teal-ink)}
.sales-fig{display:grid;gap:.9rem}