/* Ozvior — deferred stylesheet. Everything below the first screen. */

/* ------------------------------------------------------------- sections */

.section{padding-block:var(--pad-section);border-top:1px solid var(--line)}
.section--flush{border-top:0}
.section--sunk{background:var(--paper-sunk);border-top:0}
.section--ink{background:var(--ink);color:var(--on-ink);border-top:0}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--on-ink)}

/* The reference's 12-column grid. It collapses to one column below 64rem,
   which is the mobile default rather than an afterthought. */
.grid12{display:grid;gap:clamp(1.75rem,3.5vw,2.5rem)}
@media (min-width:64rem){
  .grid12{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem}
  .g-left{grid-column:span 5}
  .g-right{grid-column:7 / span 6}
}

.stack{display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.625rem)}
.stack--lg{gap:clamp(2rem,4.4vw,4rem)}

/* --------------------------------------------------------------- prose */

.body-lg{font-size:var(--t-body-lg);line-height:1.6;color:var(--ink-soft)}
.body{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft)}
.body-em{font-size:var(--t-body-lg);line-height:1.6;font-style:italic;color:var(--ink)}
.mono{font-family:var(--mono);font-size:var(--t-mono);color:var(--ink-body);line-height:1.6}
.section--ink .body-lg,.section--ink .body{color:var(--on-ink-soft)}
.section--ink .mono{color:var(--on-ink-mute)}

.h2{font-size:var(--t-h2)}
.h2-sm{font-size:var(--t-h2-sm)}
.measure{max-width:38rem}

.page-head{padding-block:clamp(3rem,7vw,6.5rem) clamp(2rem,4.5vw,4rem);display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.75rem)}
.page-head__title{font-size:clamp(2.25rem,1.3rem + 4.2vw,4.5rem);line-height:1.06;letter-spacing:-.02em;max-width:22ch}

/* ----------------------------------------------------- talent categories */

.talent-grid{display:grid;gap:clamp(2rem,3.5vw,2.5rem)}
@media (min-width:40rem){.talent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.talent-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.talent-col{display:flex;flex-direction:column;gap:clamp(.9rem,1.5vw,1.375rem);border-top:1px solid var(--on-ink-line);padding-top:clamp(1.25rem,2vw,1.75rem)}
.talent-col__name{font-size:var(--t-h3);font-weight:500;letter-spacing:-.01em;line-height:1.15}
.talent-col__list{font-family:var(--mono);font-size:var(--t-mono);line-height:1.8;color:var(--on-ink-soft)}

/* ---------------------------------------------------------- what we do */

.offers{display:flex;flex-direction:column}
.offer{padding-block:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--line-soft);display:grid;gap:clamp(.75rem,2vw,1.5rem)}
.offer:last-child{border-bottom:1px solid var(--line-soft)}
.offer__index{font-family:var(--mono);font-size:var(--t-mono);color:var(--accent)}
.offer__label{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.offer__title{font-size:var(--t-h4);line-height:1.2;font-weight:500;margin-top:.625rem}
.offer__body{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft)}

@media (min-width:64rem){
  .offer{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;row-gap:0}
  .offer__index{grid-column:span 2;padding-top:.625rem}
  .offer__head{grid-column:span 4}
  .offer__body{grid-column:8 / span 5}
}

/* ------------------------------------------------------------- closing */

.closing{background:var(--ink);color:var(--on-ink);padding-top:clamp(4rem,9vw,8.125rem)}
.closing__top{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3rem);padding-bottom:clamp(3rem,6vw,5rem)}
@media (min-width:64rem){
  .closing__top{flex-direction:row;align-items:center;justify-content:space-between;gap:3rem}
}
.closing__title{font-size:clamp(2rem,1.2rem + 3.6vw,4rem);line-height:1.08;letter-spacing:-.015em;color:var(--on-ink)}
.closing__sub{font-family:var(--mono);font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);line-height:1.6;color:var(--on-ink-mute);max-width:35rem}
.closing__actions{display:flex;flex-wrap:wrap;gap:1.25rem;flex-shrink:0}
@media (max-width:26rem){.closing__actions .btn{width:100%}}

/* -------------------------------------------------------------- footer */

.colophon{background:var(--ink);color:var(--on-ink-mute);border-top:1px solid var(--on-ink-line-soft);min-height:7.5rem;display:flex;align-items:center;padding-block:1.75rem;font-family:var(--mono);font-size:var(--t-mono-sm);color:var(--on-ink-mute)}
.colophon__row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem;width:100%}
@media (min-width:64rem){.colophon__row{justify-content:space-between;gap:1.5rem}}
.colophon .wordmark{font-size:1.25rem;color:var(--on-ink)}
.colophon a{color:var(--on-ink-soft)}
.colophon a:hover{color:var(--on-ink)}
.colophon__links{display:flex;flex-wrap:wrap;gap:1rem 2rem;list-style:none;margin:0;padding:0}

/* ------------------------------------------------------- inner pages */

/* Numbered editorial list: The Ozvior Standard. */
.dimensions{list-style:none;margin:0;padding:0;counter-reset:dim}
.dimensions > li{counter-increment:dim;padding-block:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--line-soft);display:grid;gap:clamp(.75rem,1.5vw,1rem)}
.dimensions > li:last-child{border-bottom:1px solid var(--line-soft)}
.dimensions > li::before{content:counter(dim,decimal-leading-zero);font-family:var(--mono);font-size:var(--t-mono);color:var(--accent)}
.dimension__term{font-size:var(--t-h4);line-height:1.2;font-weight:500}
.dimension__question{font-family:var(--mono);font-size:var(--t-mono);color:var(--ink-mute);margin-top:.4rem}
.dimension__body{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft)}
@media (min-width:64rem){
  .dimensions > li{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;row-gap:0}
  .dimensions > li::before{grid-column:span 2;padding-top:.5rem}
  .dimension__head{grid-column:span 4}
  .dimension__body{grid-column:8 / span 5}
}

/* Process steps. */
.steps{list-style:none;margin:0;padding:0}
.steps > li{padding-block:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--line-soft);display:grid;gap:clamp(.75rem,1.5vw,1rem)}
.steps > li:last-child{border-bottom:1px solid var(--line-soft)}
.step__index{font-family:var(--mono);font-size:var(--t-mono);color:var(--accent)}
.step__title{font-size:var(--t-h4);line-height:1.2;font-weight:500}
.step__lede{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-top:.4rem}
.step__body{font-size:var(--t-body);line-height:1.6;color:var(--ink-soft)}
@media (min-width:64rem){
  .steps > li{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;row-gap:0}
  .step__index{grid-column:span 2;padding-top:.5rem}
  .step__head{grid-column:span 4}
  .step__body{grid-column:8 / span 5}
}

/* Fit / anti-fit. */
.fit{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:48rem){.fit{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem)}}
.fit__title{font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);padding-bottom:1rem;border-bottom:1px solid var(--line)}
.fit__list{list-style:none;margin:1.25rem 0 0;padding:0}
.fit__list li{position:relative;padding-left:1.75rem;padding-block:.6rem;color:var(--ink-soft);line-height:1.55;font-size:var(--t-body)}
.fit__list li::before{content:"";position:absolute;left:0;top:1.2rem;width:.75rem;height:1px;background:var(--ink-mute)}

/* Cards. */
.cards{display:grid;gap:clamp(1.5rem,2.5vw,2rem)}
@media (min-width:48rem){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{padding:clamp(1.5rem,2.5vw,2rem);border:1px solid var(--line)}
.section--sunk .card{background:var(--paper)}
.card__term{font-size:var(--t-h4);line-height:1.2;font-weight:500}
.card__question{font-family:var(--mono);font-size:var(--t-mono-sm);color:var(--accent);margin-top:.5rem}
.card__body{margin-top:.9rem;color:var(--ink-soft);font-size:var(--t-body);line-height:1.6}

/* A pulled statement, set large. */
.pull{font-size:var(--t-h2-sm);line-height:1.15;letter-spacing:-.015em;max-width:24ch;font-weight:500}

/* On a dark section the rules and text have to flip. */
.section--ink .bar-list li{color:var(--on-ink-soft);border-top-color:var(--on-ink-line)}
.section--ink .bar-list li:last-child{border-bottom-color:var(--on-ink-line)}

.bar-list{list-style:none;margin:0;padding:0}
.bar-list li{padding-block:clamp(.9rem,1.6vw,1.25rem);border-top:1px solid var(--line-soft);color:var(--ink-soft);line-height:1.6;font-size:var(--t-body);max-width:52ch}
.bar-list li:last-child{border-bottom:1px solid var(--line-soft)}

.expect{list-style:none;margin:0;padding:0}
.expect li{position:relative;padding-left:1.75rem;padding-block:.6rem;color:var(--ink-soft);font-family:var(--mono);font-size:var(--t-mono);line-height:1.6}
.expect li::before{content:"";position:absolute;left:0;top:1.3rem;width:.75rem;height:1px;background:var(--accent)}

/* ----------------------------------------------------------------- form */

.form{margin-top:clamp(2rem,4vw,2.75rem)}
.field-grid{display:grid;gap:clamp(1.25rem,2.2vw,1.625rem)}
@media (min-width:48rem){.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field--wide{grid-column:1/-1}

.field label{display:block;font-family:var(--mono);font-size:var(--t-mono);font-weight:500;color:var(--ink);margin-bottom:.55rem}
.field .req{color:var(--accent)}
.field__help{display:block;font-family:var(--mono);font-size:var(--t-mono-sm);color:var(--ink-mute);margin-top:.45rem;line-height:1.5}
.field__error{display:block;font-family:var(--mono);font-size:var(--t-mono-sm);color:#9B2C1C;margin-top:.45rem;font-weight:500}

.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--serif);
  font-size:var(--t-body);
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:0;
  padding:.85rem 1rem;
  line-height:1.5;
  min-height:3.25rem;
  transition:border-color .18s ease;
}
.section--sunk .field input,.section--sunk .field select,.section--sunk .field textarea{background:var(--paper)}
.field textarea{resize:vertical;min-height:7.5rem}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 1.15rem) 1.45rem,calc(100% - .85rem) 1.45rem;background-size:.3rem .3rem,.3rem .3rem;background-repeat:no-repeat;padding-right:2.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:#9B2C1C}

.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin-top:1.5rem;font-family:var(--mono);font-size:var(--t-mono-sm);color:var(--ink-mute);max-width:46ch;line-height:1.6}
.formalert{margin-bottom:2rem;padding:1rem 1.25rem;border-left:2px solid #9B2C1C;background:rgba(155,44,28,.07);color:var(--ink);font-size:var(--t-body)}
.form__submit{margin-top:clamp(2rem,3.5vw,2.5rem);display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
@media (max-width:26rem){.form__submit .btn{width:100%}}

/* ------------------------------------------------ mobile navigation */

.mobilenav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobilenav[data-open="true"]{display:block}
@media (min-width:64rem){.mobilenav{display:none !important}}
.mobilenav ul{list-style:none;margin:0;padding:1rem 0 1.25rem}
/* Scoped to the list: an unscoped `.mobilenav a` also matched the CTA button
   and, being more specific than .btn--fill, repainted its label in ink. */
.mobilenav ul a{display:block;padding:.9rem 0;font-size:var(--t-h4);color:var(--ink);border-bottom:1px solid var(--line)}
.mobilenav ul a:hover{color:var(--accent)}
.mobilenav .btn{margin:1.25rem 0 1.75rem;width:100%}

/* ---------------------------------------------------------- reveal */

@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0;transform:translateY(10px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
  .js .reveal.is-in{opacity:1;transform:none}
}

@media print{
  .masthead,.mobilenav,.navtoggle,.closing__actions{display:none !important}
  body{background:#fff;color:#000}
  .section--ink,.closing{background:#fff;color:#000}
}