/* Woodbridge locksmith.ca, light workshop system: navy brand on cool paper */

:root{
  --ink:#EAEFF6;          /* band / footer surface */
  --base:#F6F8FB;         /* page background */
  --elev:#FFFFFF;         /* cards */
  --float:#F0F4FA;        /* highlighted cards */
  --line:rgba(14,32,66,.09);
  --line-strong:rgba(14,32,66,.16);

  --navy:#15305C;         /* brand: primary buttons, marks */
  --navy-700:#0F2448;
  --a400:#3A6FC4;         /* accent text on light */
  --a500:#2A5DB0;         /* icons, rules, focus */
  --a600:#1F4C95;
  --ice:#E3ECF8;

  --h:#0C1B36;            /* headings */
  --s100:#1E2B42;         /* strong body */
  --s300:#46546B;         /* body */
  --s500:#5E6B80;         /* muted */
  --s700:#7C879A;         /* faint */

  --r-card:20px;
  --r-soft:14px;
  --r-pill:999px;

  --sp-4:2rem;
  --sp-6:3rem;
  --sp-8:4rem;
  --sp-12:5.5rem;
  --sp-16:7rem;

  --shadow-1:0 1px 2px rgba(21,48,92,.06), 0 8px 24px -14px rgba(21,48,92,.22);
  --shadow-2:0 2px 4px rgba(21,48,92,.06), 0 24px 56px -26px rgba(21,48,92,.34);
  --inset:inset 0 1px 0 rgba(255,255,255,.9);

  --f-display:'Sora', 'Segoe UI', sans-serif;
  --f-body:'Manrope', 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--base); color:var(--s100);
  font-family:var(--f-body); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; color:var(--h); margin:0; line-height:1.12; letter-spacing:-.03em}
h1{font-size:clamp(2.1rem,4.4vw,3.25rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.125rem,1.7vw,1.35rem); letter-spacing:-.02em; line-height:1.3}
p{margin:0; color:var(--s300)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:1240px; margin:0 auto; padding:0 20px}
@media(min-width:768px){ .wrap{padding:0 32px} }
.sec{padding:var(--sp-12) 0}
@media(min-width:1024px){ .sec{padding:var(--sp-16) 0} }
.lede{font-size:1.0625rem; max-width:62ch; line-height:1.75}
.label{font-family:var(--f-display); font-size:.7rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--a500); margin-bottom:.9rem}
.narrow{max-width:62ch}

.grain{position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}

/* header */
.site-head{position:sticky; top:0; z-index:500; background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  box-shadow:0 6px 24px -18px rgba(21,48,92,.3)}
.head-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:72px}
.mark{display:flex; flex-direction:column; gap:.1rem; font-family:var(--f-display);
  font-weight:700; letter-spacing:-.035em; font-size:1.0625rem; color:var(--navy);
  border-radius:var(--r-soft); padding:4px 2px; line-height:1.1}
.mark .dot{color:var(--a500)}
.mark:focus-visible{outline:2px solid var(--a500); outline-offset:4px}
.mark .sub{font-family:var(--f-body); font-size:.58rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--s500)}

.nav{display:none; align-items:center; gap:.2rem}
.nav-link{position:relative; display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .8rem;
  border-radius:var(--r-pill); font-size:.9rem; font-weight:600; color:var(--s300);
  transition:color .2s ease, background-color .2s ease, transform .2s ease}
.nav-link:hover{color:var(--navy); background:rgba(42,93,176,.08)}
.nav-link:focus-visible{outline:2px solid var(--a500); outline-offset:2px; color:var(--navy)}
.nav-link:active{transform:translateY(1px)}
.nav-link.current{color:var(--navy)}
.nav-link.current::after{content:""; position:absolute; left:.8rem; right:.8rem; bottom:.28rem;
  height:2px; border-radius:2px; background:var(--a500)}

.nav-item{position:relative}
.nav-item::after{content:""; position:absolute; left:0; right:0; top:100%; height:24px;
  opacity:0; visibility:hidden; pointer-events:none}
.nav-item:hover::after,.nav-item:focus-within::after{opacity:1; visibility:visible; pointer-events:auto}
.nav-panel{position:absolute; top:calc(100% + 20px); left:50%; transform:translateX(-50%) translateY(8px);
  width:344px; padding:.5rem; background:var(--elev); border:1px solid var(--line-strong);
  border-radius:var(--r-card); box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.15,.64,1), visibility 0s linear .18s;
  transition-delay:.18s}
.nav-item:hover .nav-panel,.nav-item:focus-within .nav-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  transition-delay:0s}
.panel-link{display:flex; gap:.75rem; align-items:flex-start; padding:.7rem .8rem;
  border-radius:var(--r-soft); transition:background-color .2s ease, transform .2s ease}
.panel-link:hover{background:rgba(42,93,176,.08)}
.panel-link:focus-visible{outline:2px solid var(--a500); outline-offset:-2px}
.panel-link:active{transform:translateY(1px)}
.panel-link i{color:var(--a500); font-size:.95rem; margin-top:.3rem; width:1rem; text-align:center}
.panel-link strong{display:block; font-family:var(--f-display); font-size:.875rem; font-weight:600; color:var(--h)}
.panel-link small{display:block; font-size:.78rem; color:var(--s500); line-height:1.5}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; white-space:nowrap;
  font-family:var(--f-display); font-weight:600; font-size:.9rem; letter-spacing:-.01em;
  padding:.8rem 1.5rem; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer;
  transition:transform .2s cubic-bezier(.34,1.2,.64,1), background-color .2s ease, border-color .2s ease, color .2s ease}
.btn-primary{background:var(--navy); color:#fff; box-shadow:0 10px 26px -12px rgba(21,48,92,.6)}
.btn-primary:hover{background:var(--a600); transform:translateY(-2px)}
.btn-primary:focus-visible{outline:2px solid var(--a500); outline-offset:3px}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled]{opacity:.6; cursor:not-allowed; transform:none}
.btn-ghost{border-color:rgba(21,48,92,.28); color:var(--navy); background:#fff}
.btn-ghost:hover{border-color:var(--a500); background:var(--ice); transform:translateY(-2px)}
.btn-ghost:focus-visible{outline:2px solid var(--a500); outline-offset:3px}
.btn-ghost:active{transform:translateY(1px)}
.btn-sm{padding:.55rem 1.05rem; font-size:.82rem}

/* "Ask for estimate" button in the header */
.btn-estimate{border-color:rgba(21,48,92,.3); color:var(--navy); background:#fff; margin-left:.35rem}
.btn-estimate:hover{border-color:var(--a500); background:var(--ice); transform:translateY(-1px)}
.btn-estimate:focus-visible{outline:2px solid var(--a500); outline-offset:3px}
.btn-estimate:active{transform:translateY(1px)}
.btn-estimate.current{border-color:var(--a500); background:var(--ice)}

.lang-toggle{position:relative; display:inline-flex; align-items:center; background:rgba(42,93,176,.07);
  border:1px solid rgba(42,93,176,.24); border-radius:var(--r-pill); padding:3px; cursor:pointer;
  width:fit-content; transition:border-color .2s, background-color .2s}
.lang-toggle:hover{border-color:rgba(42,93,176,.5); background:rgba(42,93,176,.13)}
.lang-toggle:focus-visible{outline:2px solid var(--a500); outline-offset:3px; border-radius:var(--r-pill)}
.lang-pill{position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); background:var(--navy);
  border-radius:var(--r-pill); transition:transform .35s cubic-bezier(.34,1.15,.64,1); pointer-events:none}
.lang-toggle.is-en .lang-pill{transform:translateX(100%)}
.lang-opt{position:relative; z-index:1; font-family:var(--f-display); font-size:.62rem; font-weight:700;
  letter-spacing:.1em; padding:4px 10px; color:var(--s500); transition:color .25s;
  pointer-events:none; user-select:none}
.lang-toggle:not(.is-en) .lang-opt:nth-child(2),
.lang-toggle.is-en .lang-opt:nth-child(3){color:#fff}
/* The drawer is light too, so the drawer variant keeps the same colours. */
.lang-toggle-dark .lang-opt{color:var(--s500)}
.lang-toggle-dark:not(.is-en) .lang-opt:nth-child(2),
.lang-toggle-dark.is-en .lang-opt:nth-child(3){color:#fff}

#hamburger{transition:background-color .2s, border-color .2s, transform .2s}
#hamburger:hover{background:var(--ice) !important; border-color:rgba(42,93,176,.5) !important}
#hamburger:focus-visible{outline:2px solid var(--a500); outline-offset:3px}
#hamburger:active{transform:translateY(1px)}
.ham-btn{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:var(--r-soft); border:1px solid rgba(21,48,92,.22);
  background:#EEF3FA; color:var(--navy); cursor:pointer}
.ham-btn:hover{background:var(--ice); border-color:rgba(42,93,176,.5)}
.ham-btn:focus-visible{outline:2px solid var(--a500); outline-offset:3px}
.ham-lines{display:flex; flex-direction:column; gap:5px; width:18px; pointer-events:none}
.ham-line{display:block; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .32s cubic-bezier(.34,1.2,.64,1), opacity .2s ease, width .32s cubic-bezier(.34,1.2,.64,1)}
.ham-line:nth-child(2){width:12px}
#hamburger.is-open .ham-line:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#hamburger.is-open .ham-line:nth-child(2){opacity:0; width:0}
#hamburger.is-open .ham-line:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

#drawerBackdrop{position:fixed; inset:0; z-index:590; background:rgba(12,27,54,.4); opacity:0;
  pointer-events:none; transition:opacity .35s ease}
#drawerBackdrop.open{opacity:1; pointer-events:auto}
#mobileDrawer{display:flex; position:fixed; top:0; left:0; right:0; bottom:0; z-index:600;
  flex-direction:column; overflow-y:auto; min-height:100vh; height:100dvh;
  transform:translateX(100%); visibility:hidden;
  transition:transform .42s cubic-bezier(.32,.72,0,1), visibility 0s linear .42s}
#mobileDrawer.open{transform:translateX(0); visibility:visible;
  transition:transform .42s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s}
.drawer-head{display:flex; align-items:center; justify-content:space-between; height:72px;
  padding:0 20px; border-bottom:1px solid var(--line)}
.drawer-body{padding:1.5rem 20px 3rem; display:flex; flex-direction:column; gap:.15rem}
.drawer-link{display:flex; align-items:center; gap:.8rem; padding:.9rem .25rem;
  font-family:var(--f-display); font-size:1.05rem; font-weight:600; color:var(--h);
  border-bottom:1px solid var(--line); transition:color .2s ease, transform .2s ease}
.drawer-link i{color:var(--a500); width:1.2rem; font-size:.9rem}
.drawer-link:hover{color:var(--a500); transform:translateX(4px)}
.drawer-link:focus-visible{outline:2px solid var(--a500); outline-offset:2px}
.drawer-link:active{transform:translateX(2px)}
.drawer-sub{padding-left:1.6rem; font-size:.95rem; font-weight:500; color:var(--s300)}
.drawer-foot{margin-top:1.75rem; display:flex; flex-direction:column; gap:1rem}

.card{background:var(--elev); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-1); padding:1.75rem}
.card-hi{background:var(--float)}
.card h3{margin:1.1rem 0 .55rem}
.card p{font-size:.94rem}
.card-link{display:block; transition:transform .28s cubic-bezier(.34,1.15,.64,1), border-color .28s ease}
.card-link:hover{transform:translateY(-4px); border-color:rgba(42,93,176,.4)}
.card-link:focus-visible{outline:2px solid var(--a500); outline-offset:3px}
.card-link:active{transform:translateY(-1px)}
.card-more{display:inline-flex; align-items:center; gap:.45rem; margin-top:1.15rem;
  font-family:var(--f-display); font-size:.82rem; font-weight:600; color:var(--a500)}
.card-more i{font-size:.7rem; transition:transform .28s cubic-bezier(.34,1.2,.64,1)}
.card-link:hover .card-more i{transform:translateX(4px)}
.ico{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:var(--r-soft); background:var(--ice); color:var(--a500);
  border:1px solid rgba(42,93,176,.16); font-size:1.05rem}

.glow{position:relative; isolation:isolate; overflow:hidden}
.glow::before{content:""; position:absolute; inset:-15% -25% auto -25%; height:130%; z-index:-1;
  background:
    radial-gradient(52% 50% at 12% 6%, rgba(58,111,196,.14), transparent 64%),
    radial-gradient(40% 44% at 90% 0%, rgba(21,48,92,.08), transparent 66%),
    radial-gradient(60% 50% at 60% 100%, rgba(227,236,248,.9), transparent 72%);
  pointer-events:none}

.media{position:relative; overflow:hidden; border-radius:var(--r-card);
  border:1px solid var(--line); box-shadow:var(--shadow-2); background:var(--ice)}
.media img{width:100%; height:100%; object-fit:cover}
.media::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(12,27,54,.22), rgba(12,27,54,0) 45%)}
.media .tint{position:absolute; inset:0; background:#DCE6F5; mix-blend-mode:multiply;
  opacity:.35; pointer-events:none}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .35s ease}
.reveal.visible{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

.grid{display:grid; gap:1.25rem}
.g2,.g3,.g4{grid-template-columns:1fr}
@media(min-width:720px){ .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }

.hero{position:relative; padding:var(--sp-8) 0 var(--sp-12)}
@media(min-width:1024px){ .hero{padding:var(--sp-12) 0 var(--sp-12)} }
.hero-grid{display:grid; gap:2.5rem; align-items:center}
@media(min-width:1024px){ .hero-grid{grid-template-columns:1.15fr .85fr; gap:3.5rem} }
.hero p.lede{margin-top:1.25rem; font-size:1.125rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.hero-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.5rem; margin-top:2.5rem;
  padding-top:1.75rem; border-top:1px solid var(--line-strong)}
.hero-facts div{min-width:130px}
.hero-facts strong{display:block; font-family:var(--f-display); font-size:1rem; color:var(--h)}
.hero-facts span{font-size:.8rem; color:var(--s500)}

.page-head{padding:var(--sp-8) 0 var(--sp-4); position:relative}
@media(min-width:1024px){ .page-head{padding:var(--sp-12) 0 var(--sp-6)} }

.split{display:grid; gap:2.5rem; align-items:center}
@media(min-width:900px){ .split{grid-template-columns:1fr 1fr; gap:3.5rem} }
@media(min-width:900px){ .split.flip .split-media{order:1} }

.hair li{padding:1.35rem 0; border-top:1px solid var(--line-strong); display:flex; gap:1rem; align-items:flex-start}
.hair li:last-child{border-bottom:1px solid var(--line-strong)}
.hair i{color:var(--a500); margin-top:.42rem; font-size:.85rem}
.hair strong{display:block; font-family:var(--f-display); color:var(--h); font-weight:600; margin-bottom:.15rem}
.hair span{font-size:.94rem; color:var(--s300)}

.band{background:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

.quote{background:var(--elev); border:1px solid var(--line); border-radius:var(--r-card);
  padding:1.75rem; box-shadow:var(--shadow-1)}
.quote p{color:var(--s100); font-size:.98rem}
.quote .who{margin-top:1.1rem; font-family:var(--f-display); font-size:.85rem; color:var(--h); font-weight:600}
.quote .where{font-size:.78rem; color:var(--s500)}
.stars{color:var(--a500); font-size:.75rem; margin-bottom:.9rem; letter-spacing:.18em}

.faq{max-width:840px}
.faq details{border-top:1px solid var(--line-strong)}
.faq details:last-of-type{border-bottom:1px solid var(--line-strong)}
.faq summary{list-style:none; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--f-display); font-weight:600; color:var(--h); font-size:1.02rem; line-height:1.45;
  transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--a500)}
.faq summary:focus-visible{outline:2px solid var(--a500); outline-offset:2px; border-radius:6px}
.faq summary::after{content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.72rem;
  color:var(--a500); position:absolute; right:.25rem; top:1.55rem;
  transition:transform .28s cubic-bezier(.34,1.2,.64,1)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .ans{padding:0 2.5rem 1.5rem 0; color:var(--s300); font-size:.95rem}

.cta{position:relative; overflow:hidden; border-radius:28px; padding:3rem 1.5rem; text-align:center;
  background:#fff; border:1px solid var(--line-strong); box-shadow:var(--shadow-2)}
@media(min-width:768px){ .cta{padding:4.5rem 3rem} }
.cta::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 70% at 14% 0%, rgba(58,111,196,.16), transparent 68%),
    radial-gradient(42% 62% at 88% 100%, rgba(21,48,92,.09), transparent 70%)}
.cta > *{position:relative; z-index:1}
.cta p{margin:1rem auto 0; max-width:56ch; color:var(--s300)}
.cta .hero-actions{justify-content:center}

.prose p{margin-bottom:1.15rem}
.prose p:last-child{margin-bottom:0}
.prose h2{margin:2.75rem 0 1rem}
.prose h3{margin:2rem 0 .75rem}
.prose ul.bul{margin:1rem 0 1.5rem; display:grid; gap:.65rem}
.prose ul.bul li{padding-left:1.7rem; position:relative; color:var(--s300)}
.prose ul.bul li::before{content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.3rem; font-size:.72rem; color:var(--a500)}
.prose a{color:var(--a500); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{color:var(--navy)}
.prose a:focus-visible{outline:2px solid var(--a500); outline-offset:2px}

.form-grid{display:grid; gap:1.1rem}
@media(min-width:640px){ .form-grid.two{grid-template-columns:1fr 1fr} }
.field label{display:block; font-family:var(--f-display); font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--s300); margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border-radius:var(--r-soft); background:#fff;
  border:1px solid var(--line-strong); color:var(--h); font-family:var(--f-body); font-size:.95rem;
  transition:border-color .2s ease, background-color .2s ease}
.field textarea{min-height:150px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--s700)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(42,93,176,.45)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--a500); outline-offset:2px; border-color:var(--a500)}
#status{margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--r-soft); font-size:.9rem}
#status.success{background:#E6F0FB; border:1px solid rgba(42,93,176,.4); color:var(--navy-700)}
#status.error{background:#FDECEC; border:1px solid rgba(190,60,60,.4); color:#8A1F1F}
.privacy-note{font-size:.78rem; color:var(--s500); text-align:center; margin-top:1rem}
.privacy-note a{color:var(--a500); text-decoration:underline; text-underline-offset:3px}
.privacy-note a:hover{color:var(--navy)}
.privacy-note a:focus-visible{outline:2px solid var(--a500); outline-offset:2px}

.info-list li{display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-top:1px solid var(--line)}
.info-list li:first-child{border-top:none; padding-top:0}
.info-list i{color:var(--a500); margin-top:.35rem; width:1.1rem; text-align:center}
.info-list strong{display:block; font-family:var(--f-display); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--s500); font-weight:600; margin-bottom:.2rem}
.info-list a{color:var(--h); font-size:1rem; transition:color .2s ease}
.info-list a:hover{color:var(--a500)}
.info-list a:focus-visible{outline:2px solid var(--a500); outline-offset:2px}

.site-foot{background:var(--ink); border-top:1px solid var(--line); padding:var(--sp-8) 0 var(--sp-4)}
.foot-grid{display:grid; gap:2.5rem}
@media(min-width:820px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr} }
.foot-grid h4{font-family:var(--f-display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--s500); font-weight:600; margin-bottom:1rem}
.foot-list{display:grid; gap:.6rem}
.foot-list a,.foot-list span{font-size:.9rem; color:var(--s300); transition:color .2s ease}
.foot-list a:hover{color:var(--a500)}
.foot-list a:focus-visible{outline:2px solid var(--a500); outline-offset:2px}
.foot-bottom{margin-top:var(--sp-6); padding-top:1.5rem; border-top:1px solid var(--line-strong);
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; align-items:center;
  font-size:.82rem; color:var(--s500)}
.foot-bottom a{color:var(--s500); text-decoration:underline; text-underline-offset:3px; transition:color .2s ease}
.foot-bottom a:hover{color:var(--a500)}
.foot-bottom a:focus-visible{outline:2px solid var(--a500); outline-offset:2px}

/* Email address, set larger than the surrounding text so it is easy to read and tap. */
.foot-list a.email-link{font-family:var(--f-display); font-size:1.08rem; font-weight:600;
  color:var(--navy); letter-spacing:-.01em; word-break:break-all}
.foot-list a.email-link:hover{color:var(--a500)}
.info-list a.email-link{font-family:var(--f-display); font-size:1.3rem; font-weight:600;
  color:var(--navy); letter-spacing:-.015em; word-break:break-all}
.info-list a.email-link:hover{color:var(--a500)}

.skip{position:absolute; left:-9999px; top:0; z-index:900; background:var(--navy); color:#fff;
  padding:.7rem 1.2rem; border-radius:0 0 var(--r-soft) 0; font-weight:700}
.skip:focus{left:0}

.mob-cta{display:flex; align-items:center; gap:.6rem}

/* Photographic slots. Aspect ratios reserved so nothing shifts on load. */
.media-hero{aspect-ratio:4/3}
.media-wide{aspect-ratio:3/2}
.media-band{aspect-ratio:16/6}
@media(max-width:640px){ .media-band{aspect-ratio:4/3} }
.split-media.media{align-self:stretch}
.media-photo{aspect-ratio:5/4}
@media(min-width:900px){
  .split .media-photo{aspect-ratio:auto; min-height:420px}
  /* the text sets the row height; the photo fills it instead of stretching it */
  .split .media-photo img{position:absolute; inset:0}
}

/* Tone classes from the earlier dark treatment, now neutral. */
.media.tone-soft .tint,.media.tone-strong .tint,.media.tone-max .tint{opacity:.3}

/* Nav: eight items, a dropdown, the estimate button, the language pill and the phone
   button have to sit on one line inside the 1240px container, in French as well. */
.nav{gap:0}
.nav-link{padding:.5rem .45rem; font-size:.815rem; white-space:nowrap}
.nav-link.current::after{left:.45rem; right:.45rem}
.nav-panel{width:392px}
.mark > span{white-space:nowrap}
@media(min-width:1280px){ .nav{display:flex} .ham-btn{display:none} .mob-cta{display:none} }
@media(max-width:1279px){ .nav{display:none} .ham-btn{display:inline-flex} }
/* Desktop: the French labels plus the estimate button only fit once the header
   buttons lose their icons and the links tighten a little. */
@media(min-width:1280px){
  .nav-link{padding:.5rem .34rem; font-size:.8rem}
  .nav-link.current::after{left:.34rem; right:.34rem}
  .nav .btn-sm{padding:.55rem .85rem; gap:.4rem}
  .nav .btn-estimate i{display:none}
  .nav .btn-estimate{margin-left:.25rem}
  .nav .btn-primary.btn-sm{margin-left:.3rem !important}
}
/* Hover bridge must be at least as tall as the trigger to panel gap (28px). */
.nav-item::after{height:30px}

/* Accent line under the hero heading. Plain rule, not a pill or a badge. */
.accent-line{font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.05rem,2.1vw,1.42rem); line-height:1.35; letter-spacing:-.02em;
  color:var(--a600); margin-top:1.35rem; padding-left:1.05rem;
  border-left:3px solid var(--a500)}
.hero .accent-line + p.lede{margin-top:1.5rem}

/* Mobile service: photo mosaic beside the copy */
.mobile-grid{display:grid; gap:2.5rem; align-items:center}
@media(min-width:960px){ .mobile-grid{grid-template-columns:1fr 1.05fr; gap:3.5rem} }
.mosaic{display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem}
@media(min-width:560px){ .mosaic{grid-template-columns:repeat(3,1fr)} }
.mosaic .media{margin:0; aspect-ratio:3/4; border-radius:var(--r-soft); box-shadow:var(--shadow-1)}
.check-list{display:grid; gap:.7rem; margin-top:1.5rem}
.check-list li{display:flex; gap:.75rem; align-items:flex-start; color:var(--s100); font-size:.98rem}
.check-list i{color:var(--a500); margin-top:.38rem; font-size:.8rem}

/* Recent work gallery. The client's own photos, several of them small, so tiles stay compact. */
/* 1 big (2x2) + 2 wide (2x1) + 10 regular = 18 cells: fills 6, 3 and 2 columns exactly. */
.gallery{display:grid; grid-template-columns:repeat(2,1fr); grid-auto-flow:dense; gap:.75rem; margin-top:2.5rem}
@media(min-width:640px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1024px){ .gallery{grid-template-columns:repeat(6,1fr); gap:1rem} }
.gallery figure{margin:0; aspect-ratio:3/4; border-radius:var(--r-soft); box-shadow:var(--shadow-1)}
.gallery figure.big{grid-column:span 2; grid-row:span 2; aspect-ratio:auto}
.gallery figure.wide{grid-column:span 2; aspect-ratio:auto}
/* Spanning tiles take their height from the grid rows, not from the photo. */
.gallery figure.big img,.gallery figure.wide img{position:absolute; inset:0}
.gallery .media img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gallery .media:hover img{transform:scale(1.04)}