/* Pizzeria Bros franchise landing page
   Brand tokens read from the live Shopify theme (pizzeriabros.ca):
   bronze #A47C4D, bronze-dark #8C6839, ink #121212, navy #1D2B52, smoke #F8F8F8, Archivo. */

:root{
  --bronze:#A47C4D; --bronze-dk:#8C6839; --bronze-lt:#C9A97E;
  --ink:#121212; --ink-2:#1F1F1F; --ink-3:#272727;
  --navy:#1D2B52; --paper:#FFFFFF; --smoke:#F8F8F8; --line:#E4E1DC;
  --grey:#404040; --grey-lt:#9B9B9B;
  --s25:2px; --s50:4px; --s75:8px; --s100:12px; --s200:16px; --s300:24px;
  --s400:32px; --s500:40px; --s600:48px; --s700:64px; --s800:80px; --s900:96px;
  --ease:cubic-bezier(0.32,0.72,0,1);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --shell:1180px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Archivo,system-ui,sans-serif; font-size:16px; line-height:24px;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
img{max-width:100%; display:block}
.nav__logo img,.foot__inner img{object-fit:contain}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:0.006em; font-weight:700}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--bronze); outline-offset:3px; border-radius:var(--r-sm)}

.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:var(--s100) var(--s200); border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

.wrap{width:100%; max-width:var(--shell); margin:0 auto; padding-left:var(--s300); padding-right:var(--s300)}
.wrap--narrow{max-width:820px}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
.nav__inner{display:flex; align-items:center; gap:var(--s300); height:64px}
.nav__logo{flex:0 0 auto; display:flex; align-items:center}
.nav__logo img{height:30px; width:auto}
.nav__links{display:flex; gap:var(--s300); margin-left:auto; font-size:14px; line-height:20px; font-weight:600}
.nav__links a{text-decoration:none; color:var(--grey); transition:color .3s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__right{display:flex; align-items:center; gap:var(--s200); margin-left:var(--s300)}
.langsw{display:flex; border:1px solid var(--line); border-radius:var(--r-full); overflow:hidden}
.langsw__btn{appearance:none; border:0; background:transparent; font:inherit; font-size:12px; line-height:16px; font-weight:600;
  padding:var(--s75) var(--s100); cursor:pointer; color:var(--grey); transition:background .3s var(--ease), color .3s var(--ease)}
.langsw__btn.is-on{background:var(--ink); color:#fff}
.langsw__btn:active{transform:translateY(1px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s75);
  background:var(--bronze); color:#fff; text-decoration:none; font-weight:600;
  font-size:16px; line-height:24px; padding:var(--s75) var(--s100);
  border:0; border-radius:0; cursor:pointer;
  transition:background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn:hover{background:var(--bronze-dk); transform:translateY(-1px); box-shadow:0 8px 24px rgba(140,104,57,.28)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--sm{font-size:14px; line-height:20px}
.btn--lg{font-size:16px; line-height:24px; padding:var(--s100) var(--s300)}
.btn--full{width:100%; padding:var(--s200) var(--s300)}
.btn[disabled]{opacity:.55; cursor:progress; transform:none; box-shadow:none}
.link{display:inline-block; margin-top:var(--s300); font-weight:600; color:var(--bronze-dk); text-decoration:none; border-bottom:2px solid var(--bronze-lt); padding-bottom:var(--s25); transition:border-color .5s var(--ease)}
.link:hover{border-color:var(--bronze-dk)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(88vh,760px); display:flex; align-items:flex-end; overflow:hidden; background:var(--ink)}
.hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5}
.hero__scrim{position:absolute; inset:0; background:rgba(18,18,18,.55)}
.hero__inner{position:relative; padding-top:var(--s900); padding-bottom:var(--s800); color:#fff}
.eyebrow{font-size:12px; line-height:16px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-lt); margin-bottom:var(--s200)}
.eyebrow--dark{color:var(--bronze-dk)}
.hero__h1{
  max-width:680px; font-size:60px; line-height:1; white-space:pre-line; letter-spacing:0.006em;
  background:linear-gradient(90deg,#FFFFFF 0%,#9B9B9B 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{max-width:680px; margin-top:var(--s300); font-size:18px; line-height:28px; color:rgba(255,255,255,.82)}
.hero__cta{display:flex; align-items:center; gap:var(--s300); flex-wrap:wrap; margin-top:var(--s500)}
.hero__note{font-size:14px; line-height:20px; color:rgba(255,255,255,.66)}
.hero__proof{margin-top:var(--s600); padding-top:var(--s300); border-top:1px solid rgba(255,255,255,.2); font-size:14px; line-height:20px; color:rgba(255,255,255,.72); font-weight:500}

/* ---------- stats ---------- */
.stats{background:var(--ink-2); color:#fff; padding:var(--s500) 0}
.stats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s300)}
.stat{display:flex; flex-direction:column; gap:var(--s75)}
.stat__n{font-size:36px; line-height:40px; font-weight:700; color:var(--bronze-lt)}
.stat__n em{font-style:normal; font-size:20px; line-height:28px}
.stat__l{font-size:14px; line-height:20px; color:rgba(255,255,255,.68)}

/* ---------- sections ---------- */
.sect{padding:var(--s900) 0}
.sect--smoke{background:var(--smoke)}
.sect--dark{background:var(--ink); color:#fff}
.sect h2{font-size:36px; line-height:40px; max-width:680px}
.h2--center{margin-left:auto; margin-right:auto; text-align:center}
.sect .eyebrow{text-align:inherit}
.h2--center + .cards, .h2--center + .steps, .h2--center + .quotes, .h2--center + .faq{margin-top:var(--s700)}
.sect--dark .eyebrow, .sect .eyebrow{margin-bottom:var(--s200)}
.sect > .wrap > .eyebrow{text-align:center}
.sect > .wrap > .eyebrow:first-child{text-align:center}

.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s700); align-items:center}
.split--rev .split__media{order:-1}
.split__text h2{margin-bottom:var(--s300)}
.split__text p{color:var(--grey); font-size:18px; line-height:28px}
.split__text p + p{margin-top:var(--s200)}
.split__media img{border-radius:var(--r-lg); width:100%; object-fit:cover}
.split__media figcaption{margin-top:var(--s100); font-size:12px; line-height:16px; color:var(--grey-lt)}
.split__text .eyebrow{text-align:left}

/* ---------- tagline reveal ---------- */
.tagline{padding:var(--s900) 0; background:var(--paper)}
.tagline__text{max-width:680px; margin:0 auto; text-align:center; font-size:36px; line-height:40px; font-weight:700; letter-spacing:0.006em}
.tagline__text .w{color:rgba(18,18,18,.28); transition:color .7s var(--ease)}
.tagline__text .w.on{color:var(--ink)}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s300)}
.card{background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--r-lg); padding:var(--s400); transition:border-color .7s var(--ease), transform .7s var(--ease)}
.card:hover{border-color:var(--bronze-dk); transform:translateY(-2px)}
.card h3{font-size:20px; line-height:28px; margin-bottom:var(--s100); color:#fff}
.card p{font-size:14px; line-height:20px; color:rgba(255,255,255,.66)}

/* ---------- ticks ---------- */
.ticks{list-style:none; margin:var(--s300) 0 0; padding:0; display:grid; gap:var(--s100)}
.ticks li{position:relative; padding-left:var(--s300); font-size:16px; line-height:24px; color:var(--grey)}
.ticks li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:var(--r-full); background:var(--bronze)}
.ticks--light li{color:rgba(255,255,255,.75)}

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s400)}
.step{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s400)}
.step__n{display:block; font-size:14px; line-height:20px; font-weight:700; color:var(--bronze); letter-spacing:.1em; margin-bottom:var(--s200)}
.step h3{font-size:20px; line-height:28px; margin-bottom:var(--s75)}
.step p{font-size:14px; line-height:20px; color:var(--grey)}

/* ---------- investment ---------- */
.invest{display:grid; gap:var(--s200)}
.invest__row{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s400)}
.invest__row h3{font-size:18px; line-height:28px; margin-bottom:var(--s75)}
.invest__row p{font-size:16px; line-height:24px; color:var(--grey)}

/* ---------- territories ---------- */
.locs{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s300)}
.loc{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s400)}
.loc--featured{border-color:var(--bronze); background:rgba(164,124,77,.06)}
.loc__tag{font-size:12px; line-height:16px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-dk); margin-bottom:var(--s100)}
.loc h3{font-size:20px; line-height:28px; margin-bottom:var(--s100)}
.loc p{font-size:16px; line-height:24px; color:var(--grey)}
.locs__note{margin-top:var(--s300); text-align:center; font-size:14px; line-height:20px; color:var(--grey-lt)}

/* ---------- quotes ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s300)}
.quote{margin:0; background:var(--smoke); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s400)}
.quote p{font-size:18px; line-height:28px; font-weight:500}
.quote cite{display:block; margin-top:var(--s200); font-style:normal; font-size:12px; line-height:16px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-dk)}

/* ---------- form ---------- */
.apply__wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--s700); align-items:start}
.apply__intro h2{margin-bottom:var(--s300)}
.apply__intro p{color:rgba(255,255,255,.7); font-size:18px; line-height:28px}
.apply__intro .eyebrow{text-align:left}
.form{background:var(--paper); color:var(--ink); border-radius:var(--r-xl); padding:var(--s500)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s200)}
.field{margin-bottom:var(--s300); min-width:0}
.field label,.field legend{display:block; font-size:14px; line-height:20px; font-weight:600; margin-bottom:var(--s75); padding:0}
.opt{font-weight:400; color:var(--grey-lt)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%; font:inherit; font-size:16px; line-height:24px; color:var(--ink);
  padding:var(--s100); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.field textarea{resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C9C5BE}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bronze); box-shadow:0 0 0 3px rgba(164,124,77,.18); outline:none}
.field--fs{border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s300); margin-bottom:var(--s300)}
.field--fs legend{font-size:16px; line-height:24px; padding:0 var(--s75); margin-bottom:var(--s200)}
.radios{display:flex; gap:var(--s200)}
.radio{display:flex; align-items:center; gap:var(--s75); flex:1; border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s100); cursor:pointer; font-weight:600; transition:border-color .5s var(--ease), background .5s var(--ease)}
.radio:hover{border-color:#C9C5BE}
.radio:has(input:checked){border-color:var(--bronze); background:rgba(164,124,77,.08)}
.radios--stack{flex-direction:column; gap:var(--s75)}
.radios--stack .radio{flex:none}
.capital-no{background:var(--smoke); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s300); margin-bottom:var(--s300)}
.capital-no h3{font-size:18px; line-height:28px; margin-bottom:var(--s75)}
.capital-no p{font-size:14px; line-height:20px; color:var(--grey)}
.consent{display:flex; gap:var(--s100); align-items:flex-start; font-size:14px; line-height:20px; color:var(--grey); margin-bottom:var(--s100); cursor:pointer}
.consent input{margin-top:var(--s50); flex:0 0 auto}
.err{margin:var(--s50) 0 0; font-size:12px; line-height:16px; color:#A32020; min-height:0}
.err--block{margin-bottom:var(--s200)}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea,.field--fs.is-bad{border-color:#A32020}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__foot{margin-top:var(--s200); font-size:12px; line-height:16px; color:var(--grey-lt); text-align:center}
.form__ok,.form__fail{margin-top:var(--s300); border-radius:var(--r-lg); padding:var(--s300)}
.form__ok{background:rgba(164,124,77,.1); border:1px solid var(--bronze-lt)}
.form__ok h3{font-size:20px; line-height:28px; margin-bottom:var(--s75)}
.form__ok p{font-size:14px; line-height:20px; color:var(--grey)}
.form__fail{background:#FBEDED; border:1px solid #E0B4B4; font-size:14px; line-height:20px; color:#A32020}

/* ---------- faq ---------- */
.faq{display:grid; gap:var(--s100)}
.qa{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s300)}
.qa summary{font-weight:600; font-size:16px; line-height:24px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s200); align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; font-size:20px; line-height:28px; color:var(--bronze); flex:0 0 auto; transition:transform .5s var(--ease)}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{margin-top:var(--s100); font-size:16px; line-height:24px; color:var(--grey)}

/* ---------- final ---------- */
.final{position:relative; overflow:hidden; background:var(--ink); color:#fff; text-align:center; padding:var(--s900) 0}
.final__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32}
.final__inner{position:relative}
.final h2{font-size:36px; line-height:40px; max-width:680px; margin:0 auto var(--s200)}
.final p{max-width:680px; margin:0 auto var(--s400); font-size:18px; line-height:28px; color:rgba(255,255,255,.75)}

/* ---------- footer ---------- */
.foot{background:var(--ink-2); color:rgba(255,255,255,.6); padding:var(--s600) 0}
.foot__inner{display:grid; gap:var(--s300); justify-items:center; text-align:center}
.foot__inner img{height:44px; width:auto}
.foot__links{display:flex; flex-wrap:wrap; gap:var(--s300); justify-content:center; font-size:14px; line-height:20px}
.foot__links a{text-decoration:none; transition:color .3s var(--ease)}
.foot__links a:hover{color:#fff}
.foot__legal{font-size:12px; line-height:16px; max-width:680px; color:rgba(255,255,255,.42)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(64px); filter:blur(6px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease)}
.reveal.on{opacity:1; transform:none; filter:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .stats__grid{grid-template-columns:repeat(2,1fr); gap:var(--s400)}
  .cards,.steps,.quotes,.locs{grid-template-columns:1fr}
  .split,.apply__wrap{grid-template-columns:1fr; gap:var(--s500)}
  .split--rev .split__media{order:0}
  .nav__links{display:none}
}
@media (max-width:640px){
  .wrap{padding-left:var(--s200); padding-right:var(--s200)}
  .sect{padding:var(--s700) 0}
  .hero{min-height:auto}
  .hero__inner{padding-top:var(--s700); padding-bottom:var(--s600)}
  .hero__h1{font-size:36px; line-height:40px}
  .hero__sub,.split__text p,.apply__intro p,.final p{font-size:16px; line-height:24px}
  .sect h2,.final h2,.tagline__text{font-size:30px; line-height:36px}
  .form{padding:var(--s300)}
  .form__row{grid-template-columns:1fr; gap:0}
  .tagline{padding:var(--s700) 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; filter:none; transition:none}
  .tagline__text .w{color:var(--ink); transition:none}
  *{transition-duration:.01ms !important}
}