/* Whale Imaging — site-specific styles. Loaded after base.css. */

/* Archivo, latin subset, variable weight 400–700 and width 100–112 */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:100% 112%;font-display:optional;src:url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:100% 112%;font-display:optional;src:url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdfoLnnA.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

h1,h2,h3{font-stretch:108%;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,1.6rem + 3.4vw,4rem);line-height:1.04}
h2{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.7rem)}
sup{font-size:.55em;line-height:0;vertical-align:.7em;font-weight:400}

/* header: solid white, the logo JPG has a white ground */
.site-header{background:#fff;backdrop-filter:none}
.brand img{height:44px}
.nav a{font-size:var(--fs-md)}
.nav a.btn-primary{font-size:var(--fs-sm)}

/* hero */
.hero{padding-block:clamp(2rem,5vw,4.5rem) clamp(1.5rem,4vw,3rem)}
.hero .container{display:grid;gap:var(--s-6);align-items:center}
@media(min-width:900px){.hero .container{grid-template-columns:1fr 1.05fr}}
.hero .lede{color:var(--ink-2)}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.hero .also{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--ink-2)}
.hero-render{margin:0}
.hero-render img{width:100%;height:auto;aspect-ratio:1400/710}

/* the memorable element: their own fluoroscopy on black */
.fluoro{background:var(--fluoro);color:#e9edf2;padding-block:clamp(1.5rem,4vw,3rem)}
.fluoro figure{margin:0}
.fluoro img{width:100%;height:auto;aspect-ratio:1600/397;max-width:1600px;margin-inline:auto}
@media(max-width:700px){
  .fluoro img{aspect-ratio:2/1;object-fit:cover;object-position:0 50%}
}
.fluoro .container{display:grid;gap:var(--s-4);margin-top:var(--s-5)}
@media(min-width:900px){.fluoro .container{grid-template-columns:1.2fr 1fr;align-items:start}}
.fluoro p{color:#c9d1db;margin:0}
.fluoro .claim{font-size:var(--fs-lg);color:#fff;line-height:1.45}
.fluoro figcaption{font-size:var(--fs-sm)}

/* outcomes + quote */
.outcomes{display:grid;gap:var(--s-7)}
@media(min-width:960px){.outcomes{grid-template-columns:1.25fr .9fr;align-items:start}}
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rows li{padding:var(--s-5) 0;border-bottom:1px solid var(--line);display:grid;gap:var(--s-2)}
@media(min-width:640px){.rows li{grid-template-columns:13rem 1fr;gap:var(--s-5)}}
.rows h3{font-size:var(--fs-lg);margin:0}
.rows p{margin:0;color:var(--ink-2)}
.quote{border-left:4px solid var(--accent);padding-left:var(--s-5)}
.quote blockquote{margin:0}
.pullquote{max-width:none;font-weight:400;font-stretch:100%;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.quote .who{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--ink-2)}
.quote .who strong{color:var(--ink);display:block;font-size:var(--fs-md)}
.note{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--s-6)}

/* products as rows */
.lines{display:grid;gap:var(--s-7)}
.line h3{font-size:var(--fs-md);font-stretch:100%;letter-spacing:0;color:var(--ink-2);font-weight:600;margin-bottom:var(--s-3)}
.product{display:grid;gap:var(--s-4);padding:var(--s-5) 0;border-top:1px solid var(--line);grid-template-columns:96px 1fr;align-items:start}
.product:last-child{border-bottom:1px solid var(--line)}
@media(min-width:760px){.product{grid-template-columns:180px 1fr;gap:var(--s-6)}}
.product img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:var(--radius)}
.product h4{font-size:var(--fs-xl);font-stretch:108%;font-weight:700;margin-bottom:var(--s-2)}
.product p{color:var(--ink-2);margin:0}
.product .tags{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--ink)}

/* company facts */
.facts{display:grid;gap:0;margin:var(--s-6) 0 0;border-top:1px solid var(--line)}
.facts div{display:grid;gap:var(--s-1);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
@media(min-width:640px){.facts div{grid-template-columns:13rem 1fr;gap:var(--s-5)}}
.facts dt{font-weight:600}
.facts dd{margin:0;color:var(--ink-2)}
.company{display:grid;gap:var(--s-7)}
@media(min-width:960px){.company{grid-template-columns:1fr 1fr;align-items:start}}

/* demo request */
.demo{display:grid;gap:var(--s-7)}
@media(min-width:960px){.demo{grid-template-columns:.9fr 1.1fr;align-items:start}}
.demo .card{border-top:4px solid var(--brand)}
.form select{font:inherit;padding:.75em .9em;border:1px solid var(--line);border-radius:calc(var(--radius) * .7);background:var(--surface);color:var(--ink);width:100%}
.contact-info strong{display:block}

.site-footer .brand{font-stretch:108%}
.site-footer .credo{color:#fff;margin-top:var(--s-3)}