/* ============================================================
Client: Cassel Contriving (Hunter Cassel) · Berlin Heights, OH
Industry: Historical masonry restoration + custom masonry
Brand personality: deliberate, craft-first, transparent
Primary persona: Historic / older-home owner fearing cheap cement repairs
Primary conversion: Schedule assessment (call 419-577-8392)
Metaphor: MORTAR & MEMORY — heritage craft journal
Layout DNA: photo plate → caption → serif headline below (magazine, not navy split)
Opening: full-bleed masonry plate with journal caption strip under image
Type: Fraunces (display) + Source Sans 3 (UI) — craft editorial, not condensed trade
Palette: limestone #f2ebe0 · brick #8f3a2a · charcoal #2c2824 · moss #3f4f3c
Signature: "journal plate" modules with fig captions + lime-mortar callouts
Non-goals: NOT AAR navy/red multi-page ticket; NOT asphalt utility; no condensed caps identity
Swap-test: AAR logo would look wrong on limestone serif journal
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Source+Sans+3:wght@400;600;700&display=swap');
:root{
  --limestone:#f2ebe0; --paper:#faf6ef; --brick:#8f3a2a; --brick-deep:#6e2c20;
  --charcoal:#2c2824; --mute:#5c564e; --line:#ddd2c2; --moss:#3f4f3c;
  --font-d:'Fraunces',Georgia,serif; --font-b:'Source Sans 3',system-ui,sans-serif;
  --wrap:min(1120px,calc(100% - 2rem)); --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-b);background:var(--limestone);color:var(--charcoal);line-height:1.55}
img{max-width:100%;display:block;height:auto}
a{color:var(--brick)} a:hover{color:var(--brick-deep)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:99}
.wrap{width:var(--wrap);margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;min-height:4.25rem}
.logo img{width:clamp(130px,28vw,168px);height:auto}
.nav{display:none;gap:.15rem;align-items:center;font-weight:700;font-size:.92rem;letter-spacing:.03em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--charcoal);padding:.45rem .55rem}
.nav a:hover,.nav a.is-active{color:var(--brick)}
.nav .cta{background:var(--brick);color:#fff!important;padding:.55rem .85rem;margin-left:.25rem}
.nav .cta:hover{background:var(--brick-deep)}
.menu-btn{font-family:var(--font-b);font-weight:700;text-transform:uppercase;border:1px solid var(--line);background:#fff;padding:.5rem .75rem;cursor:pointer}
.nav-mobile{display:none!important;flex-direction:column;padding:0 0 .75rem;border-bottom:1px solid var(--line)}
.nav-mobile.is-open{display:flex!important}
.nav-mobile a{font-weight:700;text-transform:uppercase;text-decoration:none;color:var(--charcoal);padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
@media(min-width:960px){.nav{display:flex}.menu-btn{display:none!important}.nav-mobile,.nav-mobile.is-open{display:none!important}}

/* Opening: photo plate + caption + headline BELOW */
.plate-hero{background:var(--paper);border-bottom:1px solid var(--line)}
.plate-hero__img{position:relative}
.plate-hero__img img{width:100%;max-height:min(58vh,520px);object-fit:cover;object-position:50% 40%}
.plate-hero__cap{position:absolute;left:0;right:0;bottom:0;padding:.55rem 1rem;background:linear-gradient(transparent,rgba(44,40,36,.72));color:#f2ebe0;font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.plate-hero__copy{width:var(--wrap);margin:0 auto;padding:1.75rem 0 2.25rem}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);margin:0 0 .55rem}
.plate-hero h1{font-family:var(--font-d);font-weight:700;font-size:clamp(2rem,5.2vw,3.35rem);line-height:1.08;margin:0 0 .75rem;color:var(--charcoal);letter-spacing:-.01em}
.lede{font-size:1.12rem;color:var(--mute);max-width:38rem;margin:0 0 1.25rem}
.actions{display:flex;flex-wrap:wrap;gap:.55rem}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-b);font-weight:700;text-decoration:none;border:2px solid transparent;padding:.8rem 1.15rem;font-size:1rem;cursor:pointer}
a.btn--brick,a.btn.btn--brick{background:var(--brick);color:#fff!important}
a.btn--brick:hover{background:var(--brick-deep);color:#fff!important}
a.btn--line,a.btn.btn--line{background:transparent;color:var(--charcoal)!important;border-color:var(--charcoal)}
a.btn--line:hover{background:var(--charcoal);color:#fff!important}
a.btn--ghost,a.btn.btn--ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.5)}

.journal{padding:2.5rem 0}
.journal h2{font-family:var(--font-d);font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 .5rem}
.journal .sub{color:var(--mute);margin:0 0 1.5rem;max-width:36rem}
.plates{display:grid;gap:1.25rem}
@media(min-width:800px){.plates{grid-template-columns:1fr 1fr}}
.fig{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig figcaption{padding:1rem 1.1rem 1.15rem}
.fig h3{font-family:var(--font-d);font-size:1.35rem;margin:0 0 .35rem}
.fig p{margin:0;color:var(--mute);font-size:.95rem}
.fig a{font-weight:700;text-decoration:none;color:var(--brick);display:inline-block;margin-top:.65rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}

.pull{background:var(--charcoal);color:#f2ebe0;padding:2.5rem 0;margin:0}
.pull blockquote{width:var(--wrap);margin:0 auto;font-family:var(--font-d);font-size:clamp(1.25rem,2.5vw,1.65rem);line-height:1.35;font-weight:500}
.pull cite{display:block;margin-top:1rem;font-family:var(--font-b);font-size:.95rem;font-style:normal;color:#b8aea0;font-weight:600}

.steps{display:grid;gap:1rem;margin:1.5rem 0}
@media(min-width:700px){.steps{grid-template-columns:1fr 1fr 1fr}}
.step{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brick);padding:1.15rem 1.1rem}
.step strong{display:block;font-family:var(--font-d);font-size:1.15rem;margin-bottom:.35rem}
.step span{color:var(--mute);font-size:.95rem}

.prose{max-width:42rem}
.prose h2{font-family:var(--font-d);font-size:1.75rem;margin:2rem 0 .6rem}
.prose p{color:var(--mute);margin:0 0 1rem}
.prose ul{color:var(--mute)}
.prose a.btn--brick{color:#fff!important}
.faq details{background:#fff;border:1px solid var(--line);margin-bottom:.5rem;padding:.85rem 1rem}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin:.5rem 0 0;color:var(--mute)}

.page-hero{background:var(--charcoal);color:#f2ebe0;padding:2.5rem 0;border-bottom:4px solid var(--brick)}
.page-hero h1{font-family:var(--font-d);font-size:clamp(1.9rem,4vw,2.8rem);margin:.35rem 0 .5rem}
.page-hero p{margin:0;color:#c4b9a8;max-width:36rem}
.block{padding:2.25rem 0 3rem}

.form-card{background:#fff;border:1px solid var(--line);padding:1.5rem;max-width:36rem}
.form-card label{display:block;font-weight:600;font-size:.88rem;margin:.65rem 0 .25rem}
.form-card input,.form-card textarea{width:100%;padding:.65rem .7rem;border:1px solid var(--line);font:inherit;background:var(--paper)}
.form-card .row{display:grid;gap:.75rem}
@media(min-width:560px){.form-card .row{grid-template-columns:1fr 1fr}}
.form-ok{display:none;padding:1rem;background:#e8f0e6;border:1px solid var(--moss);margin-top:1rem}
.form-ok.is-on{display:block}

.site-footer{background:var(--charcoal);color:#c4b9a8;padding:2.5rem 0 5rem;margin-top:2rem}
.site-footer a{color:#e8dfd2;text-decoration:none}
.site-footer .foot{display:grid;gap:1.5rem}
@media(min-width:700px){.site-footer .foot{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h4{font-family:var(--font-d);color:#f2ebe0;margin:0 0 .5rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.3rem}
.legal{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;opacity:.85}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:.4rem;padding:.45rem .55rem calc(.45rem + env(safe-area-inset-bottom));background:rgba(44,40,36,.96);border-top:3px solid var(--brick);transform:translateY(110%);transition:transform .25s var(--ease)}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta .btn{flex:1;padding:.65rem;font-size:.9rem}
@media(min-width:960px){.sticky-cta{display:none}}
@media(max-width:899px){
  .actions{display:grid;grid-template-columns:1fr;width:100%}
  .actions .btn{width:100%}
  .plate-hero__copy{padding:1.25rem 0 1.5rem}
}