/* ============================================================
   THUNDER BAY DEVELOPERS · stylesheet
   Light paper monochrome, typography-led. Bricolage Grotesque for
   display, Schibsted Grotesk for body. The only accent is the red
   of the heart. Every hidden-until-animated state is gated on
   html.js so the page reads in full without JavaScript.
   ============================================================ */
:root{
  --paper:#F4F4F1;
  --ink:#141413;
  --ink-2:#55554F;
  --ink-3:#66665F;   /* labels and small text: 5.2:1 on the paper */
  --rule:#D8D8D2;
  --rule-strong:#B4B4AD;
  --red:#C1272D;
  --display:"Bricolage Grotesque","Bricolage Fallback","Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Schibsted Grotesk","Schibsted Fallback","Inter","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,4.5vw,72px);
  --ease:cubic-bezier(.2,.7,.1,1);
}

/* Metric-matched local fallbacks (Arial scaled to the web fonts' width, ascent and
   descent, measured in Chrome) so text set before the web fonts arrive occupies the
   same lines and the swap cannot reflow the page. */
@font-face{font-family:"Bricolage Fallback";src:local("Arial Bold"),local("Arial");font-weight:800;size-adjust:92.66%;ascent-override:100.37%;descent-override:29.14%;line-gap-override:0%}
@font-face{font-family:"Schibsted Fallback";src:local("Arial");font-weight:400 500;size-adjust:104.41%;ascent-override:93.38%;descent-override:24.9%;line-gap-override:0%}
@font-face{font-family:"Schibsted Fallback";src:local("Arial Bold"),local("Arial");font-weight:600 700;size-adjust:104.41%;ascent-override:93.38%;descent-override:24.9%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}

/* Layers: the dot field sits behind the page, click-through */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.site-head,main,.foot{position:relative;z-index:1}
/* Reduced motion: one still frame, in the hero only */
html.still #field{position:absolute;bottom:auto;height:100vh;height:100svh}

.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--ink);color:var(--paper);padding:.6rem 1rem;font-size:.875rem;border-radius:999px}
.skip:focus{top:1rem}

/* ---------- Type roles ---------- */
.label{
  font-family:var(--body);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0;
}
.display{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0}
.copy{color:var(--ink-2);font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.55;margin:0}

/* Line-mask reveal: each line rises inside its own clipped box.
   The box carries a little room above and below for ascenders and descenders. */
.ln{display:block;overflow:hidden;padding:.06em .08em .16em 0;margin:-.06em 0 -.16em 0}
.ln>span{display:block}
html.js .rvl .ln>span{transform:translateY(112%);transition:transform 1.05s var(--ease)}
html.js .rvl.in .ln>span{transform:none}
html.js .rvl.in .ln:nth-child(2)>span{transition-delay:.09s}
html.js .rvl.in .ln:nth-child(3)>span{transition-delay:.18s}

/* Fade-and-rise reveal on scroll */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}
.rv.d2{transition-delay:.24s}
.rv.d3{transition-delay:.36s}

/* ---------- Header ---------- */
.site-head{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(18px,2.4vw,34px) var(--gutter);
}
.brand{display:inline-block}
.brand img{width:clamp(104px,9vw,136px);height:auto}
.site-nav{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.5rem)}
/* Vertical padding gives every link a 44px touch target; the underline keeps its 3px gap */
.nav-link{position:relative;display:inline-block;font-size:.9375rem;font-weight:500;padding:.65rem 0;white-space:nowrap}
.nav-link::after{content:"";position:absolute;left:0;bottom:calc(.65rem - 3px);height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.nav-link:focus-visible::after{transform:scaleX(1)}
.arrow{display:inline-block;margin-left:.45em;transition:transform .5s var(--ease)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding:clamp(5.5rem,13vh,8.5rem) var(--gutter) clamp(22px,3.2vw,44px);
}
.hero-body{align-self:center;padding:clamp(1rem,3vh,2.5rem) 0 clamp(2rem,5vh,4rem)}
.eyebrow{margin:0 0 clamp(1.1rem,2.2vw,1.9rem)}
.hero-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.45rem,5.3vw,8rem);line-height:.94;letter-spacing:-.04em;
  margin:0;color:var(--ink);
}
.hero-title .ln>span{text-wrap:balance}

/* Opening choreography (JS only): the headline lines rise while the
   header, eyebrow, sub copy and CTA fade in; short fades keep the
   largest paint (the sub copy) early. The opacity and transform end
   states are also inlined in the document head. */
html.js .hero-title .ln>span{transform:translateY(112%);transition:transform .7s var(--ease)}
html.js.type-in .hero-title .ln>span{transform:none}
html.js.type-in .hero-title .ln:nth-child(2)>span{transition-delay:.08s}
html.js .site-head,html.js .rise{opacity:0}
html.js .rise{transform:translateY(12px)}
html.js.ui-in .site-head{opacity:1;transition:opacity .45s var(--ease)}
html.js.ui-in .rise{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
html.js.ui-in .rise.d2{transition-delay:.1s}

/* The tagline column takes the width it needs and sits at the right edge;
   the lead column gives way first so the tagline never breaks */
.hero-foot{display:grid;grid-template-columns:minmax(0,36rem) auto;justify-content:space-between;align-items:end;gap:2rem}
.hero-lead{display:grid;gap:1.6rem;justify-items:start}
.hero-sub{font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.5;color:var(--ink-2);margin:0;max-width:36rem}
.hero-meta{display:flex;justify-content:flex-end;align-items:flex-end;gap:2.75rem}
.hero-meta .label{white-space:nowrap}
.cue{display:inline-flex;align-items:center;gap:.7rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cue-line{width:1px;height:38px;background:var(--ink-3);transform-origin:top;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:top}
  42%{transform:scaleY(1);transform-origin:top}
  58%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.8rem;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:1rem 1.6rem;font:inherit;font-weight:500;font-size:1rem;line-height:1;
  cursor:pointer;border-radius:999px;
  transition:transform .5s var(--ease),background .3s,opacity .3s;
}
.btn .arrow{margin-left:0}
.btn:active{transform:scale(.97)}
.btn[aria-busy="true"]{opacity:.75;cursor:progress}

/* ---------- Statement ---------- */
/* Section headings stay below the hero's 5.3vw so the headline is the largest type on the page */
.statement{padding:clamp(7rem,16vw,15rem) var(--gutter) clamp(5rem,11vw,10rem)}
.statement-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(1rem,2vw,2rem)}
.statement-inner .label{grid-column:1/-1;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.statement-title{grid-column:1/8;align-self:end;font-size:clamp(2.25rem,5vw,5.5rem);max-width:10.5em}
.statement-copy{grid-column:8/13;align-self:end;max-width:34rem}
/* The ledger runs the full width under the heading and paragraph: where an
   owner's hours go today, and what runs on its own once it is built. One line
   per row on wide screens, same hairline idiom as the services list. */
.ledger{
  grid-column:1/-1;margin-top:clamp(3rem,6vw,5.5rem);
  width:100%;max-width:76rem;border-collapse:collapse;
  font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.45;
}
.ledger th{
  font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3,#6B6B65);
  text-align:left;padding:0 1.25rem .9rem 0;border-bottom:1px solid var(--ink,#141413);
}
.ledger td{padding:1rem 1.25rem 1rem 0;border-bottom:1px solid var(--hair,#D8D8D2);vertical-align:top;color:var(--ink-2,#55554F)}
.ledger td:first-child{color:var(--ink,#141413);font-weight:500;width:38%}
.ledger th:last-child,.ledger td:last-child{padding-right:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Services: a table of contents with hairlines ---------- */
.services{padding:clamp(3rem,7vw,6rem) var(--gutter) clamp(6rem,12vw,11rem)}
.services-head{display:grid;gap:clamp(1.25rem,2.5vw,2rem);border-bottom:1px solid var(--ink);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.services-title{font-size:clamp(2rem,4.6vw,5rem);max-width:14ch}
.svc-list{list-style:none;margin:0;padding:0}
.svc{
  display:grid;grid-template-columns:3.5rem minmax(0,6fr) minmax(0,5fr);
  gap:1.25rem clamp(1.25rem,3vw,3rem);align-items:start;
  padding:clamp(1.75rem,3.6vw,3.25rem) 0;border-bottom:1px solid var(--rule);
  transition:border-color .5s;
}
.svc-num{padding-top:.6em}
.svc-title{
  position:relative;font-family:var(--display);font-weight:800;
  font-size:clamp(1.75rem,3.4vw,3.5rem);line-height:1;letter-spacing:-.03em;margin:0;
  transition:transform .65s var(--ease);
}
.svc-title::before{
  content:"";position:absolute;left:-.62em;top:.42em;width:.2em;height:.2em;border-radius:50%;
  background:var(--red);transform:scale(0);transition:transform .5s var(--ease);
}
.svc-body{display:grid;gap:1.25rem;padding-top:.35em}
.svc .copy{max-width:32rem;transition:color .5s}
.svc-points{list-style:none;margin:0;padding:0;max-width:32rem}
.svc-points li{padding:.55rem 0;border-top:1px solid var(--rule);font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.svc-foot{display:grid;grid-template-columns:3.5rem minmax(0,6fr) minmax(0,5fr);gap:0 clamp(1.25rem,3vw,3rem)}
.svc-aside{grid-column:3;margin-top:clamp(1.5rem,3vw,2.5rem);max-width:32rem;font-size:.9375rem}

/* ---------- Pulse (the heart stage) ---------- */
.pulse{position:relative;min-height:200vh;min-height:200svh}
.pulse-stage{
  position:sticky;top:0;height:100vh;height:100svh;
  display:grid;align-content:end;
  padding:0 var(--gutter) clamp(2.5rem,6vh,5rem);
}
.pulse-copy{max-width:32rem}
.pulse-copy .label{display:block;margin-bottom:1.25rem}
.pulse-title{font-size:clamp(2.25rem,4.8vw,5rem);margin-bottom:1.25rem}

/* ---------- Questions ---------- */
.faq{padding:clamp(4rem,9vw,8rem) var(--gutter) clamp(6rem,12vw,11rem);border-top:1px solid var(--rule)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2.5rem clamp(2rem,6vw,7rem);align-items:start}
.faq-intro{position:sticky;top:clamp(2rem,8vh,5rem)}
.faq-title{font-size:clamp(2.25rem,5vw,5rem);margin-top:1.25rem}
.faq-list{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.3rem 0;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline-offset:2px}
.faq-item h3{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.7rem);letter-spacing:-.02em;line-height:1.15;margin:0}
.faq-mark{position:relative;flex:0 0 auto;width:.9rem;height:.9rem;margin-top:.35em}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.faq-mark::after{transform:rotate(90deg)}
.faq-item[open] .faq-mark::after{transform:rotate(0)}
/* Answers share the copy size and a 36rem measure (about 65 to 72 characters a line) */
.faq-item p{margin:0;padding:0 0 1.6rem;max-width:36rem;color:var(--ink-2);font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.6}
html.js .faq-item[open] p{animation:faq-in .5s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- Contact ---------- */
.contact{padding:clamp(6rem,12vw,11rem) var(--gutter) clamp(5rem,10vw,9rem);border-top:1px solid var(--rule)}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem clamp(3rem,8vw,9rem);align-items:start}
.contact-title{font-size:clamp(2.25rem,5vw,5rem);margin:1.25rem 0 1.25rem}
.contact-lines{margin:2rem 0 0}
.contact-lines a{display:inline-block;font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.7vw,1.6rem);letter-spacing:-.02em;line-height:1.3;padding:.5rem 0;position:relative;overflow-wrap:anywhere}
.contact-lines a::after{content:"";position:absolute;left:0;bottom:calc(.5rem - 2px);width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.contact-lines a:focus-visible::after{transform:scaleX(1)}
.how{margin:3rem 0 0;border-top:1px solid var(--rule)}
.how .label{display:block;font-weight:500;padding:1rem 0 .25rem}
.how-steps{list-style:none;padding:0;margin:0;counter-reset:step}
.how-steps li{display:grid;grid-template-columns:2rem 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.how-steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-size:.75rem;letter-spacing:.16em;color:var(--ink-3);padding-top:.2rem}

.form{display:grid;gap:1.75rem;align-content:start}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem clamp(1.5rem,3vw,2.5rem);align-items:start}
.field{display:grid;gap:.35rem;align-content:start}
.field label{font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
/* Fields keep the site-wide 2px focus ring (from :focus-visible) as well as the darker underline */
.field input,.field textarea{
  width:100%;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;background:transparent;
  font:inherit;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.4;color:var(--ink);
  padding:.55rem 0 .75rem;box-shadow:0 0 0 0 var(--ink);
  transition:border-color .3s,box-shadow .3s;resize:vertical;
}
.field textarea{min-height:5.5rem}
.field input:focus,.field textarea:focus{border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
.field.invalid input,.field.invalid textarea{border-bottom-color:var(--red);box-shadow:0 1px 0 0 var(--red)}
.field-err{margin:0;font-size:.8125rem;line-height:1.4;color:var(--red)}
.field-err[hidden]{display:none}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;padding-top:.5rem}
.form-status{margin:0;font-size:.9375rem;color:var(--ink-2);min-height:1.4em;max-width:30rem}
.form-status.ok{color:var(--ink)}
.form-status.err{color:var(--red)}
.form-note{margin:0;font-size:.9375rem;color:var(--ink-2)}
.form-note a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Footer ---------- */
.foot{
  padding:2.5rem var(--gutter) 2.75rem;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem 3rem;align-items:center;
  font-size:.875rem;color:var(--ink-2);
}
.foot-brand{display:inline-flex;align-items:center;min-height:44px}
.foot-brand img{width:72px}
.foot-line{margin:0;max-width:54rem}
/* Roots credit: the Print Pros Plus mark in ink, one line of copy, one link */
.foot-roots{grid-column:1/-1;display:flex;align-items:center;gap:1.25rem;margin:0;padding-top:1.25rem;border-top:1px solid var(--rule);max-width:54rem;color:var(--ink-2)}
.foot-roots-mark{display:inline-flex;flex:none;align-items:center;min-height:44px}
.foot-roots-mark img{width:auto;height:46px;opacity:.9}
.foot-roots span a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;padding:.6rem 0}
.foot-row{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.foot-row a{position:relative;padding:.6rem 0}
.foot-row a::after{content:"";position:absolute;left:0;bottom:calc(.6rem - 2px);width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.foot-row a:focus-visible::after{transform:scaleX(1)}

/* ---------- Hover: only for pointers that can hover, so a tap never leaves a
   row shifted or an underline stuck on a phone ---------- */
@media (hover:hover) and (pointer:fine){
  .nav-link:hover::after,.contact-lines a:hover::after,.foot-row a:hover::after{transform:scaleX(1)}
  .nav-cta:hover .arrow,.btn:hover .arrow{transform:translateX(4px)}
  .btn:hover{background:#000}
  .svc:hover{border-bottom-color:var(--ink)}
  .svc:hover .svc-title{transform:translateX(.6em)}
  .svc:hover .svc-title::before{transform:scale(1)}
  .svc:hover .copy{color:var(--ink)}
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .svc{grid-template-columns:2.5rem 1fr;gap:.9rem 1rem}
  .svc-body{grid-column:2}
  .svc-foot{grid-template-columns:2.5rem 1fr}
  .svc-aside{grid-column:2}
  .contact-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-intro{position:static}
  .statement-title{grid-column:1/-1}
  .statement-copy{grid-column:5/13;margin-top:clamp(2rem,4vw,3rem)}
  .ledger td:first-child{width:42%}
}
@media (max-width:900px){
  .hero-foot{grid-template-columns:1fr;gap:1.5rem}
  .hero-meta{justify-content:space-between}
}
@media (max-width:760px){
  .hero{padding-top:clamp(5rem,12vh,6.5rem)}
  .hero-body{padding-bottom:clamp(1.5rem,4vh,2.5rem)}
  /* Phones keep Questions and Contact: the FAQ is the page's answer to search, so it stays one tap away */
  .site-nav{gap:1.1rem}
  .site-nav a[href="#services"]{display:none}
  .nav-link{font-size:.875rem;padding:.7rem 0}
  .nav-link::after{bottom:calc(.7rem - 3px)}
  .statement-copy{grid-column:1/-1;max-width:34rem}
  .ledger{order:2;margin-top:clamp(2rem,6vw,3rem)}
  .pulse-stage{align-content:start;padding-top:clamp(3.5rem,8vh,5rem)}
  .form-row{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cue-line{animation:none;transform:none}
  html.js .rv,html.js .site-head,html.js .rise{opacity:1;transform:none;transition:none}
  html.js .rvl .ln>span,html.js .hero-title .ln>span{transform:none;transition:none}
  .svc-title,.btn,.arrow,.faq-mark::before,.faq-mark::after{transition:none}
  .nav-link::after,.svc,.svc .copy,.svc-title::before,.contact-lines a::after,.foot-row a::after{transition:none}
  html.js .faq-item[open] p{animation:none}
}