.brand-hero__bg h1 em,.brand-hero em{color:var(--accent);font-style:italic}
.brand-values__lead{font-family:"Fraunces",serif;font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--contrast-2);max-width:60ch;margin:.85rem auto 0;text-align:center}
.brand-values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.25rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.brand-value{border-top:2px solid var(--primary);padding-top:1.4rem}
.brand-value h3{font-family:"Fraunces",serif;font-weight:500;font-size:1.6rem;line-height:1.1;margin:0 0 .55rem}
.brand-value p{color:var(--contrast-2);margin:0}
.brand-band{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.brand-band__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,6vw,5rem) 7% clamp(3rem,6vw,5rem) max(2rem,6vw)}
.brand-band--rev .brand-band__text{padding:clamp(3rem,6vw,5rem) max(2rem,6vw) clamp(3rem,6vw,5rem) 7%;order:2}
.brand-band__photo{position:relative;min-height:clamp(340px,38vw,480px)}
.brand-band__photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.brand-band__eyebrow{display:block;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:.6rem}
.brand-band h3{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.08;margin:0}
.brand-band__text p{color:var(--contrast-2);margin:.9rem 0 1.4rem;max-width:46ch}
.brand-band__link{font-weight:600;color:var(--primary);border-bottom:2px solid var(--accent);padding-bottom:3px;text-decoration:none;align-self:flex-start}
.brand-stat-strip{background:var(--primary)}
.brand-stat-strip__row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.brand-stat-strip__row>*{padding:clamp(2.2rem,4vw,3.2rem) 1rem}
.brand-stat-strip__row>*+*{border-left:1px solid rgba(255,255,255,.22)}
.brand-stat-strip__k{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(2rem,3vw,2.9rem);line-height:1;color:#fff;display:block}
.brand-stat-strip__l{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:.5rem;display:block}
.brand-cta--photo{position:relative;overflow:hidden}
.brand-cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.brand-cta--photo::after{content:"";position:absolute;inset:0;background:rgba(20,17,15,.68);z-index:1}
.brand-cta--photo>.gbp-section__inner{position:relative;z-index:2}
@media(max-width:860px){.brand-values__grid{grid-template-columns:1fr}.brand-band{grid-template-columns:1fr}.brand-band__text,.brand-band--rev .brand-band__text{padding:2.5rem 1.5rem;order:0}.brand-band__photo{min-height:320px;order:-1}.brand-stat-strip__row{grid-template-columns:1fr 1fr}.brand-stat-strip__row>*+*{border-left:none}.brand-stat-strip__row>*:nth-child(3),.brand-stat-strip__row>*:nth-child(4){border-top:1px solid rgba(255,255,255,.22)}}
 .looks-h3 { font-family: var(--heading-font, inherit); font-size: 1.6rem; font-weight: 500; line-height: 1.15; margin: 0; } .looks-h2 { font-family: var(--heading-font, inherit); font-size: clamp(2rem,3.6vw,3rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.08; margin: 0; } .looks-h1 { font-family: var(--heading-font, inherit); font-size: clamp(3rem,7vw,6rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.05; margin: 0; } .brand-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); } .brand-reveal.is-in { opacity: 1; transform: none; } .brand-bottom-bar { align-items: center; border-top-color: rgba(255,255,255,0.14); border-top-style: solid; border-top-width: 1px; column-gap: 0.75rem; display: flex; flex-wrap: wrap; font-size: .82rem; justify-content: space-between; letter-spacing: .02em; margin-top: 2.5rem; padding-top: 1.4rem; row-gap: 0.75rem; } .gbp-footer__link { color: rgba(255,255,255,0.7); font-size: 1rem; text-decoration: none; transition: color 0.2s ease; } .gbp-footer__link:is(:hover, :focus) { color: #ffffff; } .gbp-footer__title { color: #ffffff; font-family: var(--body-font, inherit); font-size: .78rem; font-weight: 700; letter-spacing: .14em; margin-bottom: 1rem; text-transform: uppercase; } .gbp-footer__grid { column-gap: 2.5rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1.1fr; row-gap: 2.5rem; } @media (max-width:860px) { .gbp-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width:560px) { .gbp-footer__grid { grid-template-columns: 1fr; } } .gbp-footer { background-color: var(--contrast); color: rgba(255,255,255,0.7); padding-bottom: 1.5rem; padding-left: clamp(1.25rem, 4vw, 2.5rem); padding-right: clamp(1.25rem, 4vw, 2.5rem); padding-top: clamp(3rem, 5vw, 4rem); width: 100%; } .brand-cta__lead { color: rgba(255,255,255,0.9); font-size: clamp(1.15rem,1.5vw,1.3rem); font-weight: 400; line-height: 1.55; margin: 1rem auto 1.4rem; max-width: 48ch; } .brand-cta__inner { align-items: center; display: flex; flex-direction: column; row-gap: 0.4rem; text-align: center; z-index: 1; } .brand-cta { background-color: var(--primary); color: #ffffff; text-align: center; } .brand-facts { color: var(--contrast); column-gap: 2rem; display: flex; flex-wrap: wrap; font-family: var(--body-font, inherit); font-size: .9rem; font-weight: 700; letter-spacing: .02em; row-gap: 1.4rem; } .brand-attribution { color: var(--primary); font-family: var(--body-font, inherit); font-size: .9rem; font-weight: 700; margin-top: 1.1rem; } .brand-quote { border-left-color: var(--primary); border-left-style: solid; border-left-width: 2px; color: var(--contrast); font-family: var(--heading-font, inherit); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-style: italic; font-weight: 500; line-height: 1.35; margin: 0; max-width: 60ch; padding-left: 1.8rem; } .brand-pull { max-width: 60ch; } .brand-button-outline--reverse { align-items: center; background-color: transparent; border-bottom-color: rgba(255,255,255,0.55); border-bottom-style: solid; border-bottom-width: 1.5px; border-left-color: rgba(255,255,255,0.55); border-left-style: solid; border-left-width: 1.5px; border-radius: 1px; border-right-color: rgba(255,255,255,0.55); border-right-style: solid; border-right-width: 1.5px; border-top-color: rgba(255,255,255,0.55); border-top-style: solid; border-top-width: 1.5px; color: #ffffff; column-gap: 0.5rem; display: inline-flex; font-family: var(--body-font, inherit); font-size: 1rem; font-weight: 700; padding-bottom: 0.85rem; padding-left: 1.7rem; padding-right: 1.7rem; padding-top: 0.85rem; text-decoration: none; transition: background-color 0.2s cubic-bezier(.22,.61,.36,1), color 0.2s cubic-bezier(.22,.61,.36,1); width: fit-content; } .brand-button-outline--reverse:is(:hover, :focus) { background-color: #ffffff; color: var(--contrast); } .brand-button-primary--reverse { align-items: center; background-color: #ffffff; border-bottom-color: #ffffff; border-bottom-style: solid; border-bottom-width: 1.5px; border-left-color: #ffffff; border-left-style: solid; border-left-width: 1.5px; border-radius: 1px; border-right-color: #ffffff; border-right-style: solid; border-right-width: 1.5px; border-top-color: #ffffff; border-top-style: solid; border-top-width: 1.5px; color: var(--contrast); column-gap: 0.5rem; display: inline-flex; font-family: var(--body-font, inherit); font-size: 1rem; font-weight: 700; padding-bottom: 0.85rem; padding-left: 1.7rem; padding-right: 1.7rem; padding-top: 0.85rem; text-decoration: none; transition: opacity 0.2s ease; width: fit-content; } .brand-button-primary--reverse:is(:hover, :focus) { opacity: 0.9; } .brand-button-outline { align-items: center; background-color: transparent; border-bottom-color: var(--primary); border-bottom-style: solid; border-bottom-width: 1.5px; border-left-color: var(--primary); border-left-style: solid; border-left-width: 1.5px; border-radius: 1px; border-right-color: var(--primary); border-right-style: solid; border-right-width: 1.5px; border-top-color: var(--primary); border-top-style: solid; border-top-width: 1.5px; color: var(--primary); column-gap: 0.5rem; display: inline-flex; font-family: var(--body-font, inherit); font-size: 1rem; font-weight: 700; padding-bottom: 0.85rem; padding-left: 1.7rem; padding-right: 1.7rem; padding-top: 0.85rem; text-decoration: none; transition: background-color 0.2s cubic-bezier(.22,.61,.36,1), color 0.2s cubic-bezier(.22,.61,.36,1); width: fit-content; } .brand-button-outline:is(:hover, :focus) { background-color: var(--primary); color: #ffffff; } .brand-button-primary { align-items: center; background-color: var(--primary); border-bottom-color: var(--primary); border-bottom-style: solid; border-bottom-width: 1.5px; border-left-color: var(--primary); border-left-style: solid; border-left-width: 1.5px; border-radius: 1px; border-right-color: var(--primary); border-right-style: solid; border-right-width: 1.5px; border-top-color: var(--primary); border-top-style: solid; border-top-width: 1.5px; color: #ffffff; column-gap: 0.5rem; display: inline-flex; font-family: var(--body-font, inherit); font-size: 1rem; font-weight: 700; padding-bottom: 0.85rem; padding-left: 1.7rem; padding-right: 1.7rem; padding-top: 0.85rem; text-decoration: none; transition: background-color 0.2s cubic-bezier(.22,.61,.36,1), border-color 0.2s cubic-bezier(.22,.61,.36,1); width: fit-content; } .brand-button-primary:is(:hover, :focus) { background-color: var(--contrast-3); border-bottom-color: var(--contrast-3); border-left-color: var(--contrast-3); border-right-color: var(--contrast-3); border-top-color: var(--contrast-3); } .gbp-card__text { color: var(--contrast-2); font-size: 1.05rem; line-height: 1.6; margin: 0 0 0.9rem; } .gbp-card__title { color: var(--contrast); font-family: var(--heading-font, inherit); font-size: 1.6rem; font-weight: 500; line-height: 1.15; margin: 0 0 0.5rem; } .gbp-card__body { display: flex; flex-direction: column; flex-grow: 1; } .gbp-card__media { aspect-ratio: 4/3; margin-bottom: 1.1rem; overflow: hidden; position: relative; } .gbp-card__media img { height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.22,.61,.36,1); width: 100%; } .gbp-card { background-color: var(--base-3); display: flex; flex-direction: column; overflow: hidden; } .gbp-card > img { max-width: none; } .gbp-card:is(:hover, :focus-within) .gbp-card__media img { transform: scale(1.04); } .brand-hero__content { position: relative; text-shadow: 0 1px 3px rgba(20,17,15,.45); z-index: 2; } .brand-hero__bg { align-items: flex-end; background-position: center; background-size: cover; display: flex; min-height: clamp(420px, 52vh, 560px); overflow: hidden; padding-bottom: clamp(2rem, 5vw, 3.5rem); padding-top: clamp(2rem, 6vw, 4rem); position: relative; } .brand-hero__bg::after { background: linear-gradient(180deg, rgba(20,17,15,.55) 0%, rgba(20,17,15,.30) 42%, rgba(20,17,15,.78) 100%), linear-gradient(0deg, rgba(20,17,15,.28), rgba(20,17,15,.28)); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; } .brand-hero--full { align-items: flex-end; color: #ffffff; display: flex; min-height: clamp(360px, 44vh, 460px); overflow: hidden; position: relative; } .brand-hero--full .brand-hero__media { inset: 0; position: absolute; } .brand-hero--full .brand-hero__media img { height: 100%; object-fit: cover; width: 100%; } .brand-hero--full .brand-hero__media::after { background: linear-gradient(180deg, rgba(20,17,15,.15), rgba(20,17,15,.72)); content: ""; inset: 0; position: absolute; } .brand-hero__photo { aspect-ratio: 16/9; overflow: hidden; position: relative; } .brand-hero__photo img { height: 100%; object-fit: cover; width: 100%; } .brand-hero__photo::after { background-color: var(--primary); bottom: 0; content: ""; height: 5px; left: 0; position: absolute; width: 56px; } .brand-hero__actions { align-items: center; column-gap: 1rem; display: flex; flex-wrap: wrap; margin-top: 0.6rem; row-gap: 1rem; } @media (max-width:560px) { .brand-hero__actions { align-items: stretch; flex-direction: column; } } .brand-hero__meta { color: var(--contrast-2); font-family: var(--body-font, inherit); font-size: .9rem; font-weight: 700; letter-spacing: .06em; line-height: 1.6; margin: 0.4rem 0 0; } .brand-hero-content { column-gap: 1.2rem; display: flex; flex-direction: column; row-gap: 1.2rem; } .brand-hero__grid { align-items: center; column-gap: clamp(2rem, 5vw, 4.5rem); display: grid; grid-template-columns: 1fr 1.05fr; row-gap: clamp(2rem, 5vw, 4.5rem); } @media (max-width:860px) { .brand-hero__grid { grid-template-columns: 1fr; } } .brand-hero { background-color: var(--base); } .brand-duotone { overflow: hidden; position: relative; } .brand-ar-16x9 { aspect-ratio: 16/9; } .brand-ar-5x6 { aspect-ratio: 5/6; } .brand-ar-4x3 { aspect-ratio: 4/3; } .brand-ar-1x1 { aspect-ratio: 1/1; } .brand-cover { display: block; height: 100%; object-fit: cover; width: 100%; } .brand-num-badge { align-items: center; background-color: var(--primary); border-radius: 100px; color: #ffffff; display: flex; height: 48px; justify-content: center; width: 48px; } .brand-grid-4 { column-gap: clamp(1.75rem,3vw,3.25rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(1.75rem,3vw,3.25rem); } @media (max-width:900px) { .brand-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:560px) { .brand-grid-4 { grid-template-columns: minmax(0, 1fr); } } .brand-grid-3 { column-gap: clamp(1.75rem,3vw,3.25rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.75rem,3vw,3.25rem); } @media (max-width:860px) { .brand-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:560px) { .brand-grid-3 { grid-template-columns: minmax(0, 1fr); } } .brand-grid-2 { column-gap: clamp(1.75rem,3vw,3.25rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: clamp(1.75rem,3vw,3.25rem); } @media (max-width:860px) { .brand-grid-2 { grid-template-columns: minmax(0, 1fr); } } .brand-body-lg { color: var(--contrast-2); font-size: clamp(1.15rem,1.5vw,1.3rem); font-weight: 400; line-height: 1.55; margin: 0; } .brand-prose { max-width: 64ch; } .brand-ruled__idx { color: var(--contrast-2); font-family: var(--body-font, inherit); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .brand-ruled__idx b { color: var(--accent); } .brand-ruled { align-items: flex-end; border-bottom-color: var(--base-2); border-bottom-style: solid; border-bottom-width: 1px; column-gap: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2.4rem; padding-bottom: 1.4rem; row-gap: 1rem; } .gbp-section__tagline { color: var(--primary); display: block; font-family: var(--body-font, inherit); font-size: 0.78rem; font-weight: 600; letter-spacing: .22em; line-height: 1.3; margin-bottom: 1rem; text-transform: uppercase; } .gbp-section__tagline:is(.gbp-section--dark *, .gbp-section--primary *) { color: var(--accent); } .gbp-section__headline { column-gap: 1rem; display: flex; flex-direction: column; margin-bottom: 2.4rem; row-gap: 1rem; } .gbp-section__inner { margin-left: auto; margin-right: auto; max-width: 1200px; position: relative; width: 100%; z-index: 1; } .gbp-section--rhythm-4 { background-color: var(--base); } .gbp-section--rhythm-3 { background-color: var(--base-3); } .gbp-section--rhythm-2 { background-color: var(--base); } .gbp-section--rhythm-1 { background-color: var(--base-3); } .gbp-section--primary { background-color: var(--primary); color: #ffffff; } .gbp-section--primary :is(h1,h2,h3,h4) { color: #ffffff; } .gbp-section--primary .gbp-section__tagline { color: var(--accent); } .gbp-section--dark { background-color: var(--contrast); color: #ffffff; } .gbp-section--alt { background-color: var(--base); } .gbp-section { box-sizing: border-box; overflow: hidden; padding-bottom: clamp(5rem,9vw,8rem); padding-left: clamp(1.25rem, 4vw, 2.5rem); padding-right: clamp(1.25rem, 4vw, 2.5rem); padding-top: clamp(5rem,9vw,8rem); position: relative; width: 100%; }