/* Spectra: Franchise. Reads css/site.css for tokens, fonts, header, focus ring and the shared .cta button.
   One signature element: the hero's two lights (js/hero-light.js paints them on a canvas). Everything below is
   one column of ruled sections on one left edge, then the franchise enquiry form. No cards. */

#main{padding-top:0;--fr-w:min(1120px,calc(100% - 2*var(--gut) - var(--sal) - var(--sar)));--fr-y:clamp(40px,7vh,72px)}
.fr-in,.fr-block,.fr-pitch{width:var(--fr-w);margin-left:auto;margin-right:auto}

/* ---------- hero: headline over the two lights ---------- */
.fr-hero{position:relative;overflow:visible;min-height:min(78vh,700px);display:flex;align-items:center;
  padding:calc(var(--head) + var(--sat) + 24px) 0 clamp(40px,7vh,72px);touch-action:pan-y pinch-zoom}
.fr-h1{margin:0;color:var(--ink);font-family:var(--serif);font-stretch:118%;font-weight:800;
  font-size:clamp(40px,7.4vw,104px);line-height:1.02;letter-spacing:-.015em;max-width:12ch}
.fr-lede{margin:clamp(18px,3vh,28px) 0 0;max-width:34ch;color:var(--ink);font-size:clamp(19px,1.8vw,23px);line-height:1.4}
.fr-hero-cta{margin-top:clamp(22px,4vh,34px)}

/* ---------- ruled sections, one left edge ---------- */
.fr-block{border-top:1px solid var(--line);padding-top:var(--fr-y);padding-bottom:var(--fr-y)}
.fr-k{margin:0 0 clamp(16px,2.6vh,24px);color:var(--soft)}
.fr-h{margin:0;color:var(--ink);font-family:var(--serif);font-stretch:118%;font-weight:800;
  font-size:clamp(26px,3.8vw,48px);line-height:1.1;letter-spacing:-.005em;max-width:20ch}
.fr-p{margin:clamp(16px,2.6vh,24px) 0 0;color:var(--soft);font-size:clamp(18px,1.7vw,21px);line-height:1.5;max-width:44ch}

/* the one line: lit as it scrolls in (js/type-fx.js) */
.fr-pitch{margin-top:0;margin-bottom:0;padding-top:var(--fr-y);padding-bottom:var(--fr-y);border-top:1px solid var(--line);
  font-family:var(--sans);font-weight:300;font-size:clamp(34px,7.2vw,72px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}

.fr-sub{margin:0 0 10px;color:var(--dim);font-family:var(--mono);font-stretch:62%;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase}
.fr-sub:not(:first-of-type){margin-top:clamp(22px,3.6vh,32px)}
.fr-dots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;
  font-family:var(--serif);font-stretch:118%;font-weight:800;font-size:clamp(22px,3.3vw,44px);line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
.fr-dots li{display:inline}
.fr-dots li:not(:last-child)::after{content:"";display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--dim);vertical-align:.28em;margin:0 .5em}

/* why partner: three plain columns on a hairline, stacked on a phone */
.fr-three{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(24px,4vw,56px)}
@media (min-width:760px){.fr-three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fr-three li{padding:18px 0;border-top:1px solid var(--line);color:var(--ink);font-family:var(--serif);font-stretch:118%;font-weight:800;
  font-size:clamp(20px,2.2vw,28px);line-height:1.2;letter-spacing:-.005em}
.fr-three li:first-child{border-top:0;padding-top:0}
@media (min-width:760px){.fr-three li,.fr-three li:first-child{border-top:0;padding:0}}

/* ---------- hero CTA + the form ---------- */
.fr-cta{min-height:56px;padding:0 28px;font-size:16px}
.fr-apply{display:grid;gap:clamp(28px,5vw,64px);scroll-margin-top:calc(var(--head) + 16px)}
@media (min-width:960px){.fr-apply{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.fr-side{display:grid;gap:14px;align-content:start}
.fr-apply-h{margin:0;font-size:clamp(24px,3vw,36px)}
.fr-apply-h:focus{outline:none}
.fr-callrow{margin:6px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6em;min-height:44px;align-content:center}
.fr-tel-k{color:var(--soft);font-size:17px}
.fr-tel-n{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-family:var(--serif);font-stretch:118%;font-weight:800;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.005em;
  text-decoration:underline;text-decoration-color:rgba(252,252,252,.4);text-underline-offset:5px}
@media (hover:hover){.fr-tel-n:hover{text-decoration-color:currentColor}}
.fr-main{min-width:0}
.fr-a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(252,252,252,.4);text-underline-offset:3px}
@media (hover:hover){.fr-a:hover{text-decoration-color:currentColor}}
.fr-fine{margin:0;font-size:14px;line-height:1.5;color:var(--soft)}
.fr-consent{display:flex;flex-wrap:wrap;align-items:center;gap:0 .3em;max-width:60ch}
.fr-consent .fr-a,.fr-done .fr-a{display:inline-flex;align-items:center;min-height:44px}
.fr-form{display:flex;flex-direction:column;gap:24px;--fr-err:#ff8a73}
.fr-two{display:grid;gap:24px 20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.fr-req,.fr-opt{color:var(--dim);font-weight:400}
.fr-field{position:relative;display:flex;flex-direction:column;gap:8px;padding-bottom:2px}
.fr-field label{font-size:14px;color:var(--soft);letter-spacing:.01em}
.fr-field input[type="text"],.fr-field input[type="tel"],.fr-field input[type="email"],.fr-field textarea{
  appearance:none;-webkit-appearance:none;width:100%;min-height:48px;padding:12px 14px;
  background:var(--raise);border:1px solid var(--line);border-radius:2px;color:var(--ink);font:inherit;font-size:16px;line-height:1.4}
.fr-field textarea{min-height:110px;resize:vertical}
.fr-field input:focus-visible,.fr-field textarea:focus-visible{outline:none}
.fr-field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--spectrum);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.fr-field:focus-within::after{transform:scaleX(1)}
.fr-field:focus-within input,.fr-field:focus-within textarea{border-color:var(--dim)}
.fr-field.has-error input,.fr-field.has-error textarea{border-color:var(--fr-err)}
.fr-hint{margin:0;font-size:13px;color:var(--dim)}
.fr-count{margin:0;text-align:right;font-size:12px;color:var(--dim)}
.fr-count.is-near{color:var(--ink)}
.fr-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fr-err{margin:0;font-size:13px;line-height:1.4;color:var(--fr-err)}
.fr-err:empty{display:none}
.fr-notice{margin:0;padding:12px 14px;background:var(--raise);border:1px solid var(--fr-err);border-radius:2px;font-size:15px;line-height:1.5;color:var(--ink)}
.fr-notice a{color:var(--ink)}
.fr-submit{width:100%;min-height:52px;font-size:16px;margin-top:4px}
.fr-submit[disabled]{opacity:.55;pointer-events:none}
.fr-done{display:grid;gap:14px;max-width:52ch;padding-top:8px}
.fr-done-h{margin:0;font-family:var(--serif);font-stretch:118%;font-weight:800;color:var(--ink);font-size:clamp(26px,4vw,44px);line-height:1.15}
.fr-done-h:focus{outline:none}
.fr-done-p{margin:0;color:var(--soft);font-size:18px}

.sfoot .sf-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(252,252,252,.4);text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .fr-field::after{transition:none}
}


/* 30 Sep (client): the section headings go bold, the list words go light */
.fr-k,.fr-sub{font-family:var(--serif);font-stretch:118%;font-weight:800;text-transform:none;letter-spacing:-.005em;color:var(--ink)}
.fr-k{font-size:clamp(24px,2.8vw,36px);line-height:1.15;margin-bottom:clamp(20px,3vh,32px)}
.fr-sub{font-size:clamp(16px,1.5vw,20px);line-height:1.3;margin-bottom:12px}
.fr-dots{font-family:var(--sans);font-stretch:100%;font-weight:300;letter-spacing:-.01em}
.fr-three li{font-family:var(--sans);font-stretch:100%;font-weight:300;letter-spacing:-.01em;font-size:clamp(22px,2.4vw,30px)}