/* ============================================================
   Canal Winchester Wallpaper Hanging
   Palette: Ivory & Brass / Greige  ·  Type: EB Garamond + Hanken Grotesk
   Signature: a fine brass "matted frame" keyline (gallery-matting motif)
   All contrast pairs verified >= WCAG AA before authoring.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ivory:#F5F1E9; --paper:#FBF8F2; --greige:#ECE4D6; --stone:#DED4C3;
  --espresso:#241E17; --espresso-2:#322A20; --footer:#191510;
  --head:#211C15; --body:#453E32; --muted:#665E4F; --muted-deep:#574F41;
  --brass:#6E5A2E;         /* brass text/links on light (AA) */
  --brass-deco:#9C7A3C;    /* large numerals / eyebrows / icons / rules on light (>=3:1) */
  --brass-dk:#D4B87E;      /* brass large/deco on espresso */
  --brass-dk-2:#CBB07A;    /* brass eyebrow on footer */
  --on-dark:#EFE8DA; --on-dark-muted:#B8AE9A;
  --line:#877E6E;          /* control borders (>=3:1) */
  --rule:#DDD4C4;          /* hairlines (decorative) */
  --error:#A6382C; --btn-text:#F5F1E9;

  --serif:"EB Garamond", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw:1240px;
  --gutter:clamp(1.15rem, 4vw, 3rem);
  --sp-section:clamp(4.5rem, 9vw, 8rem);
  --radius:3px;
  --shadow-sm:0 1px 2px rgba(30,24,16,.05), 0 6px 18px rgba(30,24,16,.05);
  --shadow-md:0 2px 6px rgba(30,24,16,.06), 0 20px 44px rgba(30,24,16,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ivory); color:var(--body);
  font-family:var(--sans); font-weight:400; font-size:clamp(1rem,.97rem + .2vw,1.075rem);
  line-height:1.72; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html.nav-locked, html.nav-locked body{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brass); text-decoration:none; }
a:hover{ color:var(--head); }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--head); font-weight:500; line-height:1.12; margin:0; letter-spacing:.002em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2.5px solid var(--brass); outline-offset:3px; border-radius:2px; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sp-section); }
.eyebrow{
  font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass); margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--brass-deco); flex:0 0 auto; }
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:var(--brass-dk); }
.eyebrow--light::before{ background:var(--brass-dk); }
.section__head{ max-width:64ch; }
.section__head.center{ margin-inline:auto; text-align:center; }
h2.h-lg{ font-size:clamp(2rem,1.5rem + 2.3vw,3.25rem); }
h2.h-lg .accent{ font-style:italic; color:var(--brass); }
.lead{ font-size:clamp(1.08rem,1.02rem + .4vw,1.28rem); color:var(--muted-deep); line-height:1.65; }

/* ---------- Buttons ---------- */
.btn{
  --bx:1.6rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-weight:600; font-size:.9rem; letter-spacing:.02em;
  padding:.92rem var(--bx); border-radius:var(--radius); cursor:pointer;
  border:1px solid transparent; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  text-align:center;
}
.btn:focus-visible{ outline-offset:4px; }
.btn--primary{ background:var(--espresso); color:var(--btn-text); border-color:var(--espresso); }
.btn--primary:hover{ background:var(--espresso-2); color:var(--btn-text); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--head); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--head); color:var(--head); transform:translateY(-2px); }
.btn--onDark{ background:var(--paper); color:var(--espresso); border-color:var(--paper); }
.btn--onDark:hover{ background:transparent; color:var(--on-dark); border-color:var(--brass-dk); transform:translateY(-2px); }
.btn--lineDark{ background:transparent; color:var(--on-dark); border-color:rgba(212,184,126,.5); }
.btn--lineDark:hover{ border-color:var(--brass-dk); color:var(--brass-dk); transform:translateY(-2px); }
.btn--block{ width:100%; }

/* text link with brass underline reveal */
.tlink{ font-family:var(--sans); font-weight:600; font-size:.9rem; letter-spacing:.02em; color:var(--brass);
  display:inline-flex; align-items:center; gap:.5rem; }
.tlink svg{ transition:transform .25s var(--ease); }
.tlink:hover{ color:var(--head); }
.tlink:hover svg{ transform:translateX(4px); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:130; /* above drawer(110) + overlay(105) */
  background:rgba(245,241,233,.86); backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{ border-bottom-color:var(--rule); box-shadow:0 1px 0 rgba(30,24,16,.02), 0 10px 30px rgba(30,24,16,.06); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px; }
.site-header.is-scrolled .header__inner{ min-height:64px; }
.header__inner{ transition:min-height .3s var(--ease); }

.brand{ display:inline-flex; align-items:center; gap:.7rem; color:var(--head); }
.brand__mark{ width:34px; height:34px; flex:0 0 auto; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--serif); font-weight:600; font-size:1.12rem; letter-spacing:.01em; color:var(--head); }
.brand__sub{ font-family:var(--sans); font-weight:600; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin-top:.28rem; }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{ font-family:var(--sans); font-weight:500; font-size:.9rem; color:var(--body); padding:.5rem .7rem; border-radius:var(--radius); position:relative; }
.nav a::after{ content:""; position:absolute; left:.7rem; right:.7rem; bottom:.32rem; height:1px; background:var(--brass-deco); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav a:hover{ color:var(--head); }
.nav a:hover::after{ transform:scaleX(1); }

.header__cta{ display:flex; align-items:center; gap:1rem; }
.header__phone{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--head); white-space:nowrap; }
.header__phone svg{ color:var(--brass-deco); }
.header__cta .btn{ padding:.7rem 1.15rem; font-size:.85rem; }

.nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); cursor:pointer; align-items:center; justify-content:center; color:var(--head); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:20px; height:2px; background:currentColor; position:relative; transition:transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav-overlay{ position:fixed; inset:0; z-index:105; background:rgba(24,20,14,.5); opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease); }
.nav-overlay.is-open{ opacity:1; visibility:visible; }
.mobile-nav{
  position:fixed; top:0; right:0; z-index:110; height:100%; width:min(86vw,360px);
  background:var(--paper); box-shadow:-24px 0 60px rgba(24,20,14,.18);
  transform:translateX(100%); transition:transform .34s var(--ease);
  display:flex; flex-direction:column; padding:calc(74px + 1.5rem) 1.6rem 2rem; overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav a.m-link{ font-family:var(--serif); font-size:1.35rem; color:var(--head); padding:.7rem 0; border-bottom:1px solid var(--rule); }
.mobile-nav a.m-link:hover{ color:var(--brass); }
.mobile-nav .m-actions{ margin-top:1.5rem; display:grid; gap:.7rem; }
.mobile-nav .m-phone{ font-family:var(--sans); font-weight:600; color:var(--head); display:inline-flex; align-items:center; gap:.55rem; justify-content:center; padding:.4rem; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:74px; }
.hero__frame{ position:relative; }
.hero__media{ position:relative; height:clamp(30rem,82vh,50rem); overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(24,20,14,.74) 0%, rgba(24,20,14,.5) 34%, rgba(24,20,14,.16) 62%, rgba(24,20,14,.08) 100%);
}
/* brass matted keyline */
.hero__mat{ position:absolute; inset:clamp(.9rem,2.2vw,1.8rem); border:1px solid rgba(212,184,126,.55); pointer-events:none; }
.hero__inner{ position:absolute; inset:0; display:flex; align-items:flex-end; }
.hero__content{ max-width:44rem; padding-bottom:clamp(2.6rem,6vw,5rem); }
.hero__eyebrow{ color:var(--brass-dk); font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.26em; text-transform:uppercase; display:flex; align-items:center; gap:.75rem; margin:0 0 1.2rem; }
.hero__eyebrow::before{ content:""; width:34px; height:1px; background:var(--brass-dk); }
.hero h1{ color:#FCFAF4; font-size:clamp(2.35rem,1.6rem + 3.6vw,4.4rem); font-weight:500; line-height:1.06; letter-spacing:.004em; text-shadow:0 2px 30px rgba(20,16,10,.35); }
.hero h1 .it{ font-style:italic; }
.hero__sub{ color:#F0EADF; font-size:clamp(1.05rem,1rem + .5vw,1.3rem); line-height:1.6; margin:1.4rem 0 2rem; max-width:38rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:1.4rem 2rem; margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid rgba(240,234,223,.22); }
.hero__trust li{ display:flex; align-items:center; gap:.6rem; color:#EFE9DE; font-size:.86rem; font-weight:500; letter-spacing:.01em; }
.hero__trust svg{ color:var(--brass-dk); flex:0 0 auto; }
.hero__tag{ position:absolute; right:clamp(1.4rem,2.8vw,2.6rem); top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(240,234,223,.7); white-space:nowrap; }

/* ---------- Intro / value ---------- */
.intro__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.intro__media{ position:relative; }
.intro__media .framed{ position:relative; }
.framed{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); }
.framed img{ width:100%; height:100%; object-fit:cover; }
.intro__media::before{ content:""; position:absolute; inset:-14px -14px auto auto; width:58%; height:58%; border:1px solid var(--brass-deco); border-radius:var(--radius); z-index:-1; }
.intro__media::after{ content:""; position:absolute; left:-14px; bottom:-14px; width:42%; height:42%; background:var(--greige); border-radius:var(--radius); z-index:-1; }
.intro__body p + p{ margin-top:0; }
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.6rem; margin-top:2rem; }
.feature{ display:flex; gap:.8rem; align-items:flex-start; }
.feature svg{ color:var(--brass-deco); flex:0 0 auto; margin-top:.15rem; }
.feature b{ font-family:var(--sans); font-weight:600; color:var(--head); display:block; font-size:.98rem; }
.feature span{ font-size:.9rem; color:var(--muted); }

/* ---------- Services ---------- */
.services{ background:var(--greige); }
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:clamp(2.2rem,4vw,3.2rem); }
.svc{
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:2rem 1.7rem 1.8rem;
  position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  overflow:hidden;
}
.svc::before{ content:""; position:absolute; left:0; top:0; height:100%; width:2px; background:var(--brass-deco); transform:scaleY(0); transform-origin:top; transition:transform .34s var(--ease); }
.svc:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--stone); }
.svc:hover::before{ transform:scaleY(1); }
.svc__num{ font-family:var(--serif); font-size:1rem; color:var(--brass-deco); letter-spacing:.04em; }
.svc__icon{ width:44px; height:44px; margin:1rem 0 1.15rem; color:var(--espresso); }
.svc__icon svg{ width:100%; height:100%; }
.svc h3{ font-size:1.42rem; margin-bottom:.55rem; }
.svc p{ font-size:.96rem; color:var(--muted); margin:0; }

/* ---------- Why professional (dark editorial band) ---------- */
.why{ background:var(--espresso); color:var(--on-dark); }
.why__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.why__media{ position:relative; }
.why__media .framed{ box-shadow:0 30px 60px rgba(0,0,0,.4); }
.why__media::after{ content:""; position:absolute; inset:auto -16px -16px auto; width:52%; height:52%; border:1px solid var(--brass-dk); border-radius:var(--radius); }
.why h2{ color:#FBF6EC; }
.why h2 .accent{ font-style:italic; color:var(--brass-dk); }
.why__lead{ color:var(--on-dark-muted); font-size:clamp(1.05rem,1rem + .35vw,1.2rem); margin:1.1rem 0 1.8rem; }
.spec{ display:grid; gap:0; border-top:1px solid rgba(212,184,126,.28); }
.spec__row{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.1rem; padding:1.05rem 0; border-bottom:1px solid rgba(212,184,126,.18); align-items:start; }
.spec__row dt{ font-family:var(--serif); font-size:1.05rem; color:var(--brass-dk); font-weight:500; min-width:2.2rem; }
.spec__row dd{ margin:0; }
.spec__row dd b{ display:block; font-family:var(--sans); font-weight:600; color:#F4EFE5; font-size:1rem; margin-bottom:.15rem; }
.spec__row dd span{ color:var(--on-dark-muted); font-size:.92rem; }

/* ---------- Process ---------- */
.process__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:clamp(2.4rem,4vw,3.4rem); }
.step{ position:relative; padding-top:1.6rem; }
.step__rule{ position:absolute; top:0; left:0; right:0; height:2px; background:var(--rule); overflow:hidden; }
.step__rule::after{ content:""; position:absolute; inset:0; width:38%; background:var(--brass-deco); }
.step__num{ font-family:var(--serif); font-size:clamp(2.6rem,2rem + 2vw,3.4rem); color:var(--brass-deco); line-height:1; font-weight:500; }
.step h3{ font-size:1.3rem; margin:.7rem 0 .5rem; }
.step p{ font-size:.94rem; color:var(--muted); margin:0; }

/* ---------- Gallery ---------- */
.gallery{ background:var(--greige); }
.gallery__grid{ columns:3; column-gap:1.1rem; margin-top:clamp(2.2rem,4vw,3.2rem); }
.gallery__item{
  display:block; width:100%; margin:0 0 1.1rem; padding:0; border:0; background:none; cursor:pointer;
  break-inside:avoid; border-radius:var(--radius); overflow:hidden; position:relative; line-height:0;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gallery__item img{ width:100%; height:auto; transition:transform .5s var(--ease); }
.gallery__item::after{ content:""; position:absolute; inset:8px; border:1px solid rgba(245,241,233,.0); transition:border-color .3s var(--ease); pointer-events:none; }
.gallery__item::before{ content:"View"; position:absolute; z-index:2; left:50%; bottom:14px; transform:translate(-50%,8px);
  font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#FCFAF4;
  background:rgba(36,30,23,.72); padding:.4rem .8rem; border-radius:2px; opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.gallery__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.gallery__item:hover img{ transform:scale(1.045); }
.gallery__item:hover::after{ border-color:rgba(245,241,233,.55); }
.gallery__item:hover::before{ opacity:1; transform:translate(-50%,0); }

.lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); background:rgba(20,16,11,.92); }
.lightbox.is-open{ display:flex; }
.lightbox__stage{ position:relative; max-width:min(1100px,94vw); max-height:88vh; display:flex; flex-direction:column; align-items:center; }
.lightbox__img{ max-width:100%; max-height:80vh; width:auto; height:auto; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox__bar{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; width:100%; margin-top:1rem; }
.lightbox__caption{ color:var(--on-dark); font-family:var(--serif); font-style:italic; font-size:1.02rem; }
.lightbox__count{ color:var(--on-dark-muted); font-family:var(--sans); font-size:.82rem; letter-spacing:.08em; }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:1px solid rgba(212,184,126,.4); background:rgba(36,30,23,.6); color:var(--on-dark); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease), border-color .2s var(--ease); }
.lb-btn:hover{ background:var(--espresso-2); border-color:var(--brass-dk); }
.lb-prev{ left:-4px; } .lb-next{ right:-4px; }
.lightbox__close{ position:absolute; top:-52px; right:0; width:46px; height:46px; border-radius:50%; border:1px solid rgba(212,184,126,.4); background:rgba(36,30,23,.6); color:var(--on-dark); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox__close:hover{ background:var(--espresso-2); border-color:var(--brass-dk); }

/* ---------- About ---------- */
.about__grid{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.about__media{ position:relative; }
.about__media .framed img{ aspect-ratio:5/4; }
.about__media::before{ content:""; position:absolute; inset:-16px auto auto -16px; width:54%; height:54%; border:1px solid var(--brass-deco); border-radius:var(--radius); z-index:-1; }
.about__sign{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--head); margin-top:1.6rem; }
.about__sign small{ display:block; font-family:var(--sans); font-style:normal; font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-top:.5rem; }

/* ---------- Service area ---------- */
.area{ background:var(--greige); }
.area__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.area__card{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-sm); }
.area__card h3{ font-size:1.5rem; margin-bottom:.4rem; }
.area__addr{ display:flex; gap:.7rem; align-items:flex-start; margin:1.2rem 0; padding-top:1.2rem; border-top:1px solid var(--rule); }
.area__addr svg{ color:var(--brass-deco); flex:0 0 auto; margin-top:.15rem; }
.area__addr span{ color:var(--body); }
.area__note{ color:var(--muted); font-size:.95rem; }

/* ---------- Map ---------- */
.map__frame{ position:relative; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--stone); }
.map__frame iframe{ display:block; width:100%; height:clamp(280px,40vw,420px); border:0; filter:saturate(.92); }
.map__fallback{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.9rem; padding:1.5rem; background:linear-gradient(135deg,var(--stone),var(--greige)); z-index:0; }
.map__fallback svg{ color:var(--brass-deco); }
.map__fallback b{ font-family:var(--serif); font-size:1.15rem; color:var(--head); }
.map__fallback span{ color:var(--muted-deep); font-size:.95rem; }

/* ---------- Contact ---------- */
.contact{ background:var(--espresso); color:var(--on-dark); }
.contact__grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.contact h2{ color:#FBF6EC; }
.contact h2 .accent{ font-style:italic; color:var(--brass-dk); }
.contact__intro{ color:var(--on-dark-muted); margin:1rem 0 2rem; font-size:1.08rem; }
.contact__list li{ display:flex; gap:.9rem; align-items:flex-start; padding:1rem 0; border-top:1px solid rgba(212,184,126,.2); }
.contact__list li:first-child{ border-top:0; }
.contact__list svg{ color:var(--brass-dk); flex:0 0 auto; margin-top:.2rem; }
.contact__list b{ display:block; font-family:var(--sans); font-weight:600; color:#F4EFE5; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.2rem; }
.contact__list a, .contact__list span{ color:var(--on-dark); font-size:1.05rem; }
.contact__list a:hover{ color:var(--brass-dk); }

.form-card{ background:var(--paper); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.6rem); box-shadow:0 30px 70px rgba(0,0,0,.34); }
.form-card h3{ font-size:1.6rem; color:var(--head); margin-bottom:.4rem; }
.form-card > p{ color:var(--muted); font-size:.95rem; margin-bottom:1.6rem; }
.field{ margin-bottom:1.15rem; }
.field label{ display:block; font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.03em; color:var(--head); margin-bottom:.42rem; }
.field .req{ color:var(--brass); }
.field input, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--head); background:var(--ivory);
  border:1px solid var(--line); border-radius:var(--radius); padding:.8rem .9rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:#8b8271; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(110,90,46,.16); }
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-card .btn--primary{ margin-top:.4rem; }
.form-note{ margin-top:1rem; font-size:.82rem; color:var(--muted); text-align:center; }

/* success panel — display:none so the client script toggles it to block
   (NOT the [hidden] attribute, whose !important UA rule would beat inline display) */
#form-success{ display:none; text-align:center; padding:2rem 1rem; }
#form-success .fs-badge{ width:64px; height:64px; margin:0 auto 1.1rem; border-radius:50%; background:rgba(110,90,46,.12); color:var(--brass); display:flex; align-items:center; justify-content:center; }
#form-success h3{ color:var(--head); font-size:1.5rem; margin-bottom:.4rem; }
#form-success p{ color:var(--muted); margin:0; }

/* error messages: the client script injects .error-message with an inline
   #ff6b6b colour (~2.6:1, fails AA). Override to an AA-passing token, and
   supply the fadeIn keyframes the script's inline style references. */
.error-message{ color:var(--error) !important; font-weight:600; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Footer ---------- */
.footer{ background:var(--footer); color:var(--on-dark); padding-block:clamp(3rem,6vw,4.5rem) 1.6rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; }
.footer .brand__name{ color:#F4EFE5; }
.footer__about{ color:var(--on-dark-muted); font-size:.95rem; margin-top:1.1rem; max-width:34ch; }
.footer h4{ font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-dk-2); margin-bottom:1rem; }
.footer__links li{ margin-bottom:.55rem; }
.footer__links a{ color:var(--on-dark); font-size:.96rem; }
.footer__links a:hover{ color:var(--brass-dk); }
.footer__contact li{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.8rem; color:var(--on-dark); font-size:.96rem; }
.footer__contact svg{ color:var(--brass-dk); flex:0 0 auto; margin-top:.2rem; }
.footer__contact a{ color:var(--on-dark); }
.footer__contact a:hover{ color:var(--brass-dk); }
.footer__bottom{ margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(212,184,126,.16); display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; align-items:center; }
.footer__bottom p{ margin:0; color:var(--on-dark-muted); font-size:.84rem; }

/* ---------- Mobile sticky call bar ---------- */
.mobilebar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; grid-template-columns:1fr 1fr; gap:.6rem; padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background:rgba(245,241,233,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid var(--rule); }
.mobilebar .btn{ padding:.8rem; font-size:.85rem; }

/* ---------- Reveal (progressive enhancement) ---------- */
[data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  html.js-reveal [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  html.js-reveal [data-reveal].is-visible{ opacity:1; transform:none; }
  html.js-reveal [data-reveal][data-reveal="d1"]{ transition-delay:.08s; }
  html.js-reveal [data-reveal][data-reveal="d2"]{ transition-delay:.16s; }
  html.js-reveal [data-reveal][data-reveal="d3"]{ transition-delay:.24s; }
}
@media print{ [data-reveal]{ opacity:1 !important; transform:none !important; } .site-header,.mobilebar,.nav-overlay,.mobile-nav{ display:none !important; } }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav, .header__phone{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .header__cta .btn{ display:none; }
  .why__grid, .intro__grid, .about__grid, .area__grid, .contact__grid{ grid-template-columns:1fr; }
  .why__media, .about__media, .intro__media{ order:-1; }
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .process__grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1.4rem; }
  .gallery__grid{ columns:2; }
}
@media (max-width:640px){
  :root{ --sp-section:clamp(3.4rem,11vw,5rem); }
  .services__grid{ grid-template-columns:1fr; }
  .feature-row{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .gallery__grid{ columns:1; }
  .footer__grid{ grid-template-columns:1fr; gap:2rem; }
  .hero__tag{ display:none; }
  .hero__actions .btn{ flex:1 1 auto; }
  .mobilebar{ display:grid; }
  body{ padding-bottom:0; }
  .contact{ padding-bottom:calc(var(--sp-section) + 4rem); }
}
@media (max-width:400px){
  .hero__trust{ gap:.7rem 1.2rem; }
  .lb-prev{ left:2px; } .lb-next{ right:2px; }
}