/* ONE TITLE BLOCK FOR EVERY STUDIO PAGE. This file is the only place its look is decided.
   It is the Work & Services page's opening: a small label, the big title, one opening line, all starting under the
   logo. A page takes part by putting class="page-intro" on the element that holds those three, and
   class="page-intro-host" on a section around it whose own top padding should go.
   The three free tools are apps with a toolbar: they use class="page-title-tool" (same fonts and colours, one
   compact size; the title block takes the whole row and the toolbar sits on its own row under it, at every width).
   The rules are marked important on purpose: the older pages each bring their own title styles, and this block has
   to win on all of them so that a title can never again look different from page to page.
   Checked by _work/t_headings.js (every page, measured in the browser). */
@font-face{font-family:StudioSerif;src:url('/fonts/cormorant-garamond-latin.woff2') format('woff2');font-style:normal;font-weight:500 700;font-display:swap}
@font-face{font-family:StudioSerif;src:url('/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');font-style:italic;font-weight:500 700;font-display:swap}
@font-face{font-family:StudioSans;src:url('/fonts/inter-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}

.page-intro,.page-title-tool{--pi-ink:#173e38;--pi-green:#215744;--pi-muted:#536b61;--pi-serif:StudioSerif,Georgia,serif;--pi-sans:StudioSans,system-ui,-apple-system,'Segoe UI',sans-serif}

/* The block: as wide as the header's content, starting at the same left edge, wherever it sits in the page. */
.page-intro{--pi-gutter:clamp(18px,4vw,64px);--pi-width:min(100vw - var(--pi-gutter)*2,1320px);
  display:block!important;box-sizing:border-box!important;position:relative;
  width:var(--pi-width)!important;max-width:none!important;min-width:0!important;min-height:0!important;height:auto!important;
  margin:0 0 0 calc((100% - var(--pi-width))/2)!important;padding:62px 0 32px!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;
  text-align:left!important}
.page-intro-host{padding-top:0!important;margin-top:0!important;border-top:0!important}
/* Content right under the title that should start at the title's left edge: -left keeps its own width, -wide takes the title block's width. */
.page-intro-left,.page-intro-wide{--pi-gutter:clamp(18px,4vw,64px);--pi-width:min(100vw - var(--pi-gutter)*2,1320px);box-sizing:border-box!important;margin-left:calc((100% - var(--pi-width))/2)!important;margin-right:auto!important}
.page-intro-wide{width:var(--pi-width)!important;max-width:none!important;margin-right:0!important}

/* The small label. */
.page-intro [class*="eyebrow"],.page-title-tool [class*="eyebrow"]{display:block!important;width:auto!important;max-width:none!important;margin:0 0 16px!important;padding:0!important;border:0!important;background:none!important;
  font:600 11px/1.5 var(--pi-sans)!important;letter-spacing:.17em!important;text-transform:uppercase!important;text-align:left!important;color:var(--pi-green)!important;opacity:1!important}
.page-intro [class*="eyebrow"]::before,.page-intro [class*="eyebrow"]::after,.page-title-tool [class*="eyebrow"]::before,.page-title-tool [class*="eyebrow"]::after{content:none!important}

/* The title. */
.page-intro h1,.page-title-tool h1{margin:0!important;padding:0!important;border:0!important;background:none!important;
  font-family:var(--pi-serif)!important;font-weight:600!important;font-style:normal!important;line-height:1.04!important;letter-spacing:-.025em!important;
  text-transform:none!important;text-align:left!important;text-shadow:none!important;color:var(--pi-ink)!important;-webkit-text-fill-color:currentColor!important;text-wrap:balance}
.page-intro h1{max-width:20ch!important;font-size:clamp(44px,6.6vw,90px)!important}
.page-intro h1 em,.page-title-tool h1 em{font-family:inherit!important;font-style:italic!important;font-weight:500!important;color:var(--pi-green)!important;-webkit-text-fill-color:currentColor!important;background:none!important}

/* The opening line. */
.page-intro>p:not([class*="eyebrow"]){margin:18px 0 0!important;padding:0!important;max-width:64ch!important;
  font:400 15px/1.65 var(--pi-sans)!important;letter-spacing:0!important;text-align:left!important;color:var(--pi-muted)!important;opacity:1!important}
/* Buttons that close the block (404, thank-you) line up on the left too. */
.page-intro>.actions,.page-intro>.ty-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:flex-start!important;gap:10px!important;margin:26px 0 0!important}

/* The free tools: same title, compact, inside their own toolbar. */
.page-title-tool{text-align:left!important;flex:1 1 100%!important}
.page-intro .nb,.page-title-tool .nb{white-space:nowrap}
.page-title-tool h1{font-size:36px!important}
.page-title-tool [class*="eyebrow"]{margin-bottom:8px!important}
.page-title-tool>p:not([class*="eyebrow"]){margin:10px 0 0!important;max-width:64ch!important;font:400 15px/1.65 var(--pi-sans)!important;text-align:left!important;color:var(--pi-muted)!important}

/* UNDER THE TITLE: the same two typefaces as the title block, on every page that carries it.
   Small labels look like the title block's label; headings use its serif. (The older pages used a caps display face
   for these, and the three tools a system serif and a monospace: measured with _work/p_h2.js.) */
[class*="eyebrow"],[class*="kicker"]{font-family:StudioSans,system-ui,-apple-system,'Segoe UI',sans-serif!important;font-weight:600!important}   /* every small label, one face */
.creds__h,.price-kicker,.card-kicker{font-family:StudioSans,system-ui,-apple-system,'Segoe UI',sans-serif!important;font-weight:600!important;font-size:11px!important;line-height:1.5!important;letter-spacing:.17em!important;text-transform:uppercase!important}
.ft-section h2{font:600 clamp(30px,3.2vw,40px)/1.15 StudioSerif,Georgia,serif!important;letter-spacing:-.02em!important;text-transform:none!important}
.ft-card h3{font:600 22px/1.2 StudioSerif,Georgia,serif!important;letter-spacing:-.01em!important;text-transform:none!important}
/* Buttons that close a title block (404, thank-you): one look. */
.page-intro>.actions a,.page-intro>.ty-actions a{font:600 13px/1.2 StudioSans,system-ui,-apple-system,'Segoe UI',sans-serif!important;letter-spacing:.01em!important;text-transform:none!important}

/* Legal and licenses: the title block brings its own space. The old band's bottom padding and the next block's top
   padding stacked about 180px of nothing under the title. */
.legal-hero.page-intro-host{padding-bottom:0!important}
.legal-hero.page-intro-host+*{padding-top:28px!important}

@media(max-width:800px){.page-intro{padding-top:42px!important}}
@media(max-width:560px){
  .page-intro{padding:30px 0 22px!important}
  .page-intro h1{font-size:48px!important;max-width:none!important}   /* the screen is the limit: a 13ch cap left one word alone on a third line */
  .page-intro>p:not([class*="eyebrow"]){font-size:14px!important}
  .page-title-tool h1{font-size:29px!important}
}