/* Blue Hills Service Co. — commercial site.
   Tokens come from site.css. This file is the commercial page only. */

.c-nav{background:var(--ink)}
.c-nav .wrap{display:flex;align-items:center;gap:14px;height:74px}
.c-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.c-brand svg{width:32px;height:26px;flex:none}
.c-brand span{font-family:'Rubik',sans-serif;font-weight:700;letter-spacing:-.03em;font-size:17px;color:var(--cream)}
.c-navlinks{display:flex;gap:28px;font-family:'Rubik',sans-serif;font-weight:500;font-size:15px}
.c-navlinks a{color:#9AA6B0;text-decoration:none}
.c-navlinks a:hover{color:var(--cream)}
.grow{flex:1}

.btn{font-family:'Rubik',sans-serif;font-weight:600;font-size:17px;padding:16px 30px;border-radius:var(--pill);
  display:inline-block;text-decoration:none;border:0;cursor:pointer;text-align:center}
.btn-coral{background:var(--coral);color:#0F1A22}
.btn-coral:hover{background:var(--coral-deep)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ghost{background:transparent;color:var(--cream);border:1.5px solid #46545F}
.btn-sm{font-size:15px;padding:11px 22px}

.kicker{font-family:'Rubik',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3{font-family:'Rubik',sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.03}

.hero{position:relative;min-height:560px;display:flex;align-items:center;background:var(--ink);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 32%,rgba(28,43,54,.35) 88%)}
.hero .wrap{position:relative;padding-top:64px;padding-bottom:64px}
.hero h1{color:var(--cream);font-size:clamp(40px,5.4vw,74px);margin-top:22px}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero p{font-family:'Rubik',sans-serif;font-weight:500;font-size:clamp(17px,2vw,22px);color:#B9C2C9;margin-top:24px;max-width:560px}
.hero .cta{display:flex;align-items:center;gap:22px;margin-top:32px;flex-wrap:wrap}
.hero .cta span{font-family:'Rubik',sans-serif;font-weight:500;font-size:16px;color:#9AA6B0}

.sect{padding:76px 0}
.sect-white{background:var(--white);border-top:1px solid #EFE8E1;border-bottom:1px solid #EFE8E1}
.sect-ink{background:var(--ink)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px 32px}
.card h3{color:var(--ink);font-size:23px;margin-top:14px}
.card p{font-size:15px;color:var(--slate);line-height:1.65;margin-top:11px}

.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:64px;align-items:center}
.split-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.split h2,.split-even h2{color:var(--ink);font-size:clamp(30px,3.4vw,44px);margin-top:14px}
.split p,.split-even p{font-size:16px;color:var(--slate);line-height:1.7;margin-top:16px}

.steps{display:flex;flex-direction:column;gap:22px}
.step{display:flex;gap:16px;align-items:flex-start}
.step b{font-family:'Rubik',sans-serif;font-weight:700;font-size:13px;color:var(--cream);background:var(--ink);
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.step h3{color:var(--ink);font-size:19px}
.step p{font-size:14.5px;color:var(--slate);line-height:1.6;margin-top:4px}

ul.ticks{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:16px}
ul.ticks li{display:flex;gap:11px;font-size:15.5px;color:var(--ink);line-height:1.5}
ul.ticks li::before{content:"\2022";color:var(--coral-btn);font-weight:700}

.serves{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;margin-top:20px}
.serves b{font-family:'Rubik',sans-serif;font-weight:700;letter-spacing:-.03em;color:var(--cream);font-size:clamp(24px,3vw,34px)}
.serves i{font-style:normal;color:var(--coral);font-size:clamp(24px,3vw,34px);font-weight:700}

.faqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 56px;margin-top:32px}
.faqs h3{color:var(--ink);font-size:21px}
.faqs p{font-size:15px;color:var(--slate);line-height:1.65;margin-top:9px}

.formgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:60px}
.formcard{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px 36px}
.row{display:grid;gap:18px;margin-top:18px}
.row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
label{display:block;font-family:'Rubik',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);margin-bottom:7px}
input,select,textarea{width:100%;background:var(--white);border:1px solid #D9D1C9;border-radius:10px;
  height:46px;padding:0 13px;font-family:'Figtree',sans-serif;font-size:16px;color:var(--ink)}
textarea{height:84px;padding:11px 13px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--coral);outline:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{background:#F3EAE3;border-radius:14px;padding:20px 24px;margin-top:24px}
.note b{font-family:'Rubik',sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
.note p{font-size:14.5px;color:var(--slate);line-height:1.6;margin-top:7px}
.formmsg{font-size:15px;line-height:1.6;margin-top:16px;display:none}
.formmsg.ok{display:block;color:#1C2B36;background:#F3EAE3;border-radius:12px;padding:16px 18px}
.formmsg.err{display:block;color:#8C2F12}

.c-foot{background:var(--ink)}
.c-foot .wrap{display:flex;align-items:center;gap:14px;padding-top:40px;padding-bottom:40px;flex-wrap:wrap}
.c-foot span{font-family:'Rubik',sans-serif;font-weight:500;font-size:15px;color:#9AA6B0}

@media (max-width:900px){
  .cards,.split,.split-even,.faqs,.formgrid{grid-template-columns:1fr;gap:26px}
  .c-navlinks{display:none}
  .sect{padding:48px 0}
  .row-2,.row-3,.row-21{grid-template-columns:1fr}
  .hero{min-height:0}
}

/* ---------- motion ----------
   Rules that matter:
   1. Reveal styles are scoped to html.js, so with JS off or broken nothing hides.
   2. The reduced-motion block below force-shows everything. site.css already kills
      animation and transition globally under that query, which would otherwise strand
      a .reveal element at opacity 0 forever. */

html.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
html.js .reveal.in{opacity:1;transform:none}

/* hero: one orchestrated entrance, staggered by depth */
html.js .hero .wrap > *{opacity:0;transform:translateY(16px);
  animation:rise .78s cubic-bezier(.22,.61,.36,1) forwards}
html.js .hero .wrap > *:nth-child(1){animation-delay:.06s}
html.js .hero .wrap > *:nth-child(2){animation-delay:.16s}
html.js .hero .wrap > *:nth-child(3){animation-delay:.30s}
html.js .hero .wrap > *:nth-child(4){animation-delay:.42s}
@keyframes rise{to{opacity:1;transform:none}}

/* the photograph drifts, very slowly. 24s, 4% - felt rather than seen. */
html.js .hero img{animation:drift 24s ease-out forwards}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1)}}

/* hovers: a lift small enough to read as material, not as a toy */
.card,.formcard{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(28,43,54,.09);border-color:#DCD3CA}
.btn{transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}
.btn-coral:hover,.btn-ink:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(28,43,54,.16)}
.btn:active{transform:translateY(0)}
.step b{transition:transform .25s ease}
.step:hover b{transform:scale(1.08)}
.c-navlinks a{transition:color .18s ease}

/* nav gains a hairline once you leave the hero, so it reads as attached */
.c-nav{transition:box-shadow .3s ease}
.c-nav.stuck{box-shadow:0 1px 0 rgba(240,102,63,.55)}

@media (prefers-reduced-motion:reduce){
  html.js .reveal,
  html.js .hero .wrap > *{opacity:1!important;transform:none!important;animation:none!important}
  html.js .hero img{animation:none!important;transform:none!important}
  .card:hover,.btn-coral:hover,.btn-ink:hover,.step:hover b{transform:none!important}
}

/* jobs page: the eight promises */
.promises h3{font-family:'Rubik',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.2}
@media (max-width:900px){ .promises{grid-template-columns:1fr!important;gap:22px!important} }

/* ============================================================
   Artifacts — added 2026-08-28.
   Every promise on the page is paired with the document that
   proves it. Renders are static PNGs built by tools/artifact-render.html;
   docs.html stays a production tool and is never a site dependency.
   ============================================================ */

/* Artifact sitting above a promise-card heading. */
.card .art-thumb{
  display:block;width:100%;height:auto;margin:0 0 16px;border-radius:10px;
}

/* The journey strip. Legibility beats compactness: the numbers ARE the
   content, so this stacks rather than shrinking below 600px. */
.desk-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px;
}
.desk-strip figure{margin:0}
.desk-strip img{
  display:block;width:100%;height:auto;border-radius:10px;
}
.desk-strip figcaption{
  font-family:'Rubik',sans-serif;font-size:13.5px;line-height:1.5;
  color:var(--slate);margin-top:12px;
}
@media (max-width:899px){
  .desk-strip{grid-template-columns:1fr 1fr;gap:20px}
}
@media (max-width:599px){
  /* At 390px, four across renders each artifact ~85px wide and the numbers
     that carry the meaning stop being legible.
     Stacking keeps them legible but costs ~1,400px of scroll on the page we
     are trying to shorten. Swipe keeps BOTH: full-size artifacts, one screen.
     The 82% basis leaves the next card peeking so the swipe is discoverable. */
  .desk-strip{
    display:flex;grid-template-columns:none;gap:14px;margin-top:22px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:14px;
    /* bleed to the screen edge so the peek reads as more content */
    margin-left:calc(var(--pad,20px) * -1);margin-right:calc(var(--pad,20px) * -1);
    padding-left:var(--pad,20px);padding-right:var(--pad,20px);
    scrollbar-width:none;
  }
  .desk-strip::-webkit-scrollbar{display:none}
  .desk-strip figure{flex:0 0 82%;scroll-snap-align:start}
  .desk-strip img{max-width:100%}
  .desk-strip figcaption{font-size:13px;margin-top:10px}
  .desk-hint{
    display:flex;align-items:center;gap:7px;margin-top:4px;
    font-family:'Rubik',sans-serif;font-size:12.5px;font-weight:500;color:var(--slate);
  }
  .desk-hint::after{
    content:"";width:16px;height:2px;background:var(--coral-btn);border-radius:2px;
    animation:deskNudge 1.6s ease-in-out infinite;
  }
  @keyframes deskNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
}
@media (max-width:599px) and (prefers-reduced-motion:reduce){
  .desk-hint::after{animation:none}
}
/* The hint is mobile-only; on wider screens all four are already visible. */
.desk-hint{display:none}

/* FAQ as disclosure. Six dense blocks were a large share of the mobile
   scroll; closed by default they cost one line each. */
.faqs details{
  border-top:1px solid var(--line);padding:0;
}
.faqs details:last-child{border-bottom:1px solid var(--line)}
.faqs summary{
  list-style:none;cursor:pointer;padding:19px 34px 19px 0;position:relative;
  font-family:'Rubik',sans-serif;font-weight:700;font-size:16.5px;
  letter-spacing:-.02em;color:var(--ink);line-height:1.35;
}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--coral-btn);border-bottom:2px solid var(--coral-btn);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faqs details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faqs summary:focus-visible{outline:3px solid var(--coral-btn);outline-offset:3px;border-radius:4px}
.faqs details p{
  margin:0 0 20px;font-family:'Rubik',sans-serif;font-size:15.5px;
  line-height:1.62;color:var(--slate);max-width:68ch;
}
@media (prefers-reduced-motion:reduce){
  .faqs summary::after{transition:none}
}

/* ============================================================
   Cutout figures — added 2026-08-28.
   Illustrative only. Faces are never identifiable, and these are
   NEVER captioned as Patrick, as staff, or as a customer's building.
   See img/CREDITS.md: a recognisable face needs a model release
   regardless of licence, which is why every figure is turned away.
   ============================================================ */
/* Must out-specify `.hero img` (0,1,1), which sets width/height 100% and
   object-fit:cover for the background photo and would stretch this figure. */
.hero img.hero-figure{
  position:absolute;right:5%;bottom:0;top:auto;left:auto;
  height:84%;width:auto;max-width:32%;object-fit:contain;opacity:1;
  z-index:1;pointer-events:none;
  /* Sit the figure in the hero's light rather than pasting it on top. */
  filter:saturate(.82) contrast(1.04) brightness(.94);
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 99%);
          mask-image:linear-gradient(180deg,#000 86%,transparent 99%);
}
/* Text must stay above the figure. */
.hero .wrap{z-index:2}

@media (max-width:1100px){
  .hero img.hero-figure{right:-1%;height:74%;opacity:.55}
}
@media (max-width:820px){
  /* On a phone the figure would sit behind the headline and cost contrast
     for no benefit. The hero photo already carries the mood. */
  .hero img.hero-figure{display:none}
}

/* The jobs hero is shorter (420px) than the homepage hero, so the figure needs
   to run taller as a proportion of it or it reads as a small floating cutout. */
.hero img.hero-figure-jobs{height:100%;right:7%;max-width:30%}
@media (max-width:1100px){ .hero img.hero-figure-jobs{height:88%;right:0} }

/* Hero alignment. `.hero` is display:flex, so `.wrap` becomes a flex item and
   shrink-to-fits to its content (measured 692px) instead of filling to its
   1140px max-width. `margin:0 auto` then centred that narrow box, so the hero
   text started at x=374 while the nav and every section start at x=150.
   width:100% restores the shared gutter. Applies to both heroes. */
.hero .wrap{width:100%}

/* Tall footer for the sub-pages: three columns of real links, then the base
   line. The homepage keeps the single-line footer. */
.c-foot-tall{padding:52px 0 34px}
.c-foot-tall .wrap{display:block}
.foot-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:30px;padding-bottom:30px;border-bottom:1px solid #2A3945;
}
.foot-cols b{
  display:block;font-family:'Rubik',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream);margin-bottom:12px;
}
.foot-cols div{font-size:14.5px;line-height:2;color:#7C8894}
.foot-cols a{color:#9AA6B0;text-decoration:none}
.foot-cols a:hover{color:var(--cream);text-decoration:underline}
.foot-cols a:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:3px}
.foot-base{display:flex;align-items:center;gap:11px;padding-top:24px;flex-wrap:wrap}
.foot-base > span:first-of-type{
  font-family:'Rubik',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:15px;color:var(--cream);
}
.foot-meta{margin-left:auto;font-size:14px;color:#7C8894}
.foot-meta a{color:#9AA6B0}
@media (max-width:640px){ .foot-meta{margin-left:0;width:100%} }

/* ul.ticks li is display:flex, so multiple inline children (a <b> lead-in plus
   its sentence) became separate flex items with a gap between them instead of
   one flowing line. Sub-page items wrap their content in a span; this lets that
   span take the remaining width. */
ul.ticks li > span{flex:1;min-width:0}

/* Jobs page imagery. The split-even had an empty right column and the page was
   a wall of text; these give it something to look at. */
.people-band{padding-top:0}
.people-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:30px;
}
.people-row figure{margin:0;display:flex;justify-content:center;align-items:flex-end}
.people-row img{width:auto;max-width:100%;max-height:300px;height:auto}
.people-cap{
  font-family:'Rubik',sans-serif;font-weight:500;font-size:15px;color:var(--slate);
  margin-top:18px;text-align:center;
}
@media (max-width:820px){
  .people-row{gap:14px}
  .people-row img{max-height:190px}
  .people-cap{font-size:13.5px}
}

/* Promise columns on the jobs page. These replaced inline-styled divs, so
   without this block the h3/p inherit dark text onto the ink ground and the
   whole section renders invisible. */
.promise-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;margin-top:34px}
.promise-split > div{display:flex;flex-direction:column;gap:22px}
.promise-head{
  font-family:'Rubik',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--coral);
}
.promise-split h3{
  font-family:'Rubik',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;
  color:var(--cream);margin:0;line-height:1.3;
}
.promise-split p{font-size:14.5px;color:#B9C2C9;line-height:1.6;margin:7px 0 0}
@media (max-width:760px){ .promise-split{grid-template-columns:1fr;gap:30px} }

/* The band's figures are flex rows by default, so the caption sat BESIDE the
   photo and overlapped it. Stack them. */
.people-row figure{flex-direction:column;align-items:stretch}
.people-row img{width:100%;max-height:none;border-radius:10px;object-fit:cover;aspect-ratio:4/3}
.people-row figcaption{
  font-family:'Rubik',sans-serif;font-weight:500;font-size:14px;color:var(--slate);
  margin-top:12px;text-align:left;
}
.people-row{align-items:start}

/* Homepage rooms band. Same grid as the jobs picture band; sits on white so it
   reads as a break between the scope list and the document strip. */
.rooms-band{padding-top:0}
.rooms-band .people-row{border-bottom:none;padding-bottom:0}

/* Three promise columns once the retention items were added. Two columns at
   this count left one stranded row on its own. */
.promise-split-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px}
@media (max-width:1000px){ .promise-split-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .promise-split-3{grid-template-columns:1fr;gap:30px} }