@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/headshot-friday/fonts/cormorant-garamond-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/headshot-friday/fonts/manrope-latin.woff2") format("woff2"); }

:root { --hwl-ink: #0b0e10; --hwl-ink-soft: #161414; --hwl-bone: #f4f1ea; --hwl-muted: #b9afa4; --hwl-bronze: #b8702c; --hwl-crimson: #c8332a; --hwl-line: rgba(244,241,234,.18); --hwl-wrap: 1320px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--hwl-ink); }
body { margin: 0; min-width: 320px; background: var(--hwl-ink); color: var(--hwl-bone); font-family: "Manrope", sans-serif; font-size: 16px; line-height: 1.55; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.hwl-skip { left: 16px; position: fixed; top: -100px; z-index: 20; background: var(--hwl-bone); color: var(--hwl-ink); padding: 12px 16px; }
.hwl-skip:focus { top: 16px; }
.hwl-header, .hwl-footer { display: flex; align-items: center; justify-content: space-between; max-width: var(--hwl-wrap); margin: 0 auto; padding: 22px 40px; }
.hwl-header { border-bottom: 1px solid var(--hwl-line); }
.hwl-brand { font-family: "Cormorant Garamond", serif; font-size: 27px; letter-spacing: .01em; text-decoration: none; }
.hwl-header__link { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.hwl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .8fr); position: relative; min-height: 680px; max-width: var(--hwl-wrap); margin: 0 auto; }
.hwl-hero__copy { align-self: center; max-width: 730px; padding: clamp(80px, 10vw, 150px) 40px; }
.hwl-kicker { margin: 0 0 20px; color: var(--hwl-bronze); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: "Cormorant Garamond", serif; font-weight: 400; letter-spacing: .005em; line-height: .96; }
h1 { max-width: 10ch; margin-bottom: 28px; font-size: clamp(58px, 7.6vw, 116px); }
h2 { font-size: clamp(48px, 5.3vw, 82px); }
.hwl-lede { max-width: 540px; color: var(--hwl-muted); font-size: 18px; }
.hwl-button { display: inline-flex; align-items: center; gap: 18px; min-height: 52px; margin-top: 18px; padding: 15px 20px; border: 1px solid var(--hwl-crimson); background: var(--hwl-crimson); color: var(--hwl-bone); font: 700 11px/1 "Manrope", sans-serif; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; transition: background .22s ease, color .22s ease; }
.hwl-button:hover, .hwl-button:focus-visible { background: transparent; color: var(--hwl-bone); }
.hwl-button:focus-visible, .hwl-header__link:focus-visible, .hwl-brand:focus-visible, input:focus-visible { outline: 2px solid var(--hwl-bronze); outline-offset: 4px; }
.hwl-hero__note { max-width: 360px; margin: 50px 0 0; color: var(--hwl-muted); font-size: 13px; }
.hwl-hero__portrait { min-height: 100%; margin: 0; overflow: hidden; background: #baa173; }
.hwl-hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hwl-hero__stamp { position: absolute; right: clamp(24px, 4vw, 56px); bottom: 30px; display: grid; width: 118px; height: 118px; place-content: center; gap: 5px; border: 1px solid var(--hwl-bone); border-radius: 50%; background: rgba(11,14,16,.82); color: var(--hwl-bone); font-size: 9px; letter-spacing: .12em; line-height: 1.3; text-align: center; text-transform: uppercase; }
.hwl-gallery { padding: clamp(80px, 10vw, 150px) 40px; background: var(--hwl-bone); color: var(--hwl-ink); }
.hwl-section-head { max-width: var(--hwl-wrap); margin: 0 auto 56px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px; }
.hwl-section-head .hwl-kicker { grid-column: 1 / -1; color: var(--hwl-crimson); }
.hwl-section-head h2 { max-width: 9ch; margin-bottom: 0; }
.hwl-section-head p:last-child { align-self: end; max-width: 440px; margin: 0; color: #514b45; }
.hwl-gallery__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; max-width: var(--hwl-wrap); margin: 0 auto; }
.hwl-gallery__item { min-height: 260px; margin: 0; overflow: hidden; background: #292526; }
.hwl-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.hwl-gallery__item:hover img { transform: scale(1.025); }
.hwl-gallery__item--brand { grid-column: span 7; height: min(48vw, 570px); }
.hwl-gallery__item--portrait { grid-column: span 5; height: min(49vw, 570px); }
.hwl-gallery__item--square { grid-column: span 4; height: min(34vw, 430px); }
.hwl-gallery__item:nth-child(4), .hwl-gallery__item:nth-child(5), .hwl-gallery__item:nth-child(6) { grid-column: span 4; height: min(34vw, 430px); }
.hwl-process { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; max-width: var(--hwl-wrap); margin: 0 auto; padding: clamp(80px, 10vw, 145px) 40px; }
.hwl-process h2 { margin-bottom: 0; }
.hwl-steps { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--hwl-line); }
.hwl-steps li { display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--hwl-line); }
.hwl-steps span { color: var(--hwl-bronze); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.hwl-steps p { margin: 0; font-size: 18px; }
.hwl-signup { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: clamp(80px, 10vw, 145px) max(40px, calc((100vw - var(--hwl-wrap)) / 2 + 40px)); background: var(--hwl-ink-soft); }
.hwl-signup h2 { max-width: 8ch; margin-bottom: 24px; }
.hwl-signup__copy > p:last-child { max-width: 430px; color: var(--hwl-muted); }
.hwl-form { align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hwl-form__field { display: grid; gap: 8px; }
.hwl-form label { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hwl-form input:not(.hwl-form__hp) { width: 100%; min-height: 52px; border: 1px solid var(--hwl-line); border-radius: 0; background: transparent; color: var(--hwl-bone); font: 400 16px "Manrope", sans-serif; padding: 12px; }
.hwl-form input::placeholder { color: #8c847b; }
.hwl-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hwl-button--submit { justify-content: space-between; width: 100%; margin-top: 8px; cursor: pointer; grid-column: 1 / -1; }
.hwl-button:disabled { cursor: wait; opacity: .7; }
.hwl-form__status { grid-column: 1 / -1; margin: 0; color: var(--hwl-bone); font-size: 14px; }
.hwl-form__status[data-state="error"] { color: #ffaaa3; }
.hwl-footer { color: var(--hwl-muted); font-size: 12px; }
.hwl-footer a { color: var(--hwl-bone); text-decoration: none; }
@media (max-width: 760px) {
  .hwl-header, .hwl-footer { padding: 18px 20px; }
  .hwl-hero { grid-template-columns: 1fr; min-height: auto; }
  .hwl-hero__copy { padding: 72px 20px 56px; }
  h1 { font-size: clamp(55px, 16vw, 75px); }
  .hwl-lede { font-size: 16px; }
  .hwl-hero__portrait { height: min(132vw, 600px); }
  .hwl-hero__stamp { right: 20px; bottom: 20px; }
  .hwl-gallery { padding: 72px 20px; }
  .hwl-section-head { display: block; margin-bottom: 34px; }
  .hwl-section-head h2 { margin-bottom: 24px; }
  .hwl-gallery__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hwl-gallery__item, .hwl-gallery__item--brand, .hwl-gallery__item--portrait, .hwl-gallery__item--square, .hwl-gallery__item:nth-child(4), .hwl-gallery__item:nth-child(5), .hwl-gallery__item:nth-child(6) { grid-column: span 1; height: 62vw; min-height: 0; }
  .hwl-gallery__item--brand { grid-column: 1 / -1; height: 74vw; }
  .hwl-process, .hwl-signup { grid-template-columns: 1fr; gap: 42px; padding: 72px 20px; }
  .hwl-form { grid-template-columns: 1fr; gap: 18px; }
  .hwl-button--submit, .hwl-form__status { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hwl-gallery__item img, .hwl-button { transition: none; } }
