/* =========================================================
SELF. STUDIOS NYC
MAIN CSS
========================================================= */
/* =========================================================
BRAND
========================================================= */
/*
Midnight Navy: #18202B
Warm Ivory: #F4F0E8
Champagne: #B8A58C
Soft Black: #111111
White: #FFFFFF
*/
/* =========================================================
RESET / GLOBAL
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
margin: 0;
scroll-behavior: smooth;
}
body {
margin: 0;
background: #F4F0E8;
color: #18202B;
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
/* =========================================================
HEADER
========================================================= */
.site-header {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
}
.site-header__inner {
width: calc(100% - 80px);
max-width: 1600px;
height: 92px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
/* LOGO */
.site-logo {
display: flex;
flex-direction: column;
color: #18202B;
}
.site-logo__main {
font-size: 31px;
line-height: 1;
letter-spacing: 0.14em;
}
.site-logo__sub {
margin-top: 5px;
font-size: 7px;
font-weight: 700;
letter-spacing: 0.28em;
}
/* NAV */
.site-nav {
margin-left: auto;
display: flex;
align-items: center;
gap: 34px;
}
.site-nav a {
position: relative;
padding: 8px 0;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
transition: opacity 0.25s ease;
}
.site-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #18202B;
transition: width 0.25s ease;
}
.site-nav a:hover::after {
width: 100%;
}
/* BOOK BUTTON */
.header-book {
min-width: 125px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 22px;
background: #18202B;
color: #FFFFFF;
border: 1px solid #18202B;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease;
}
.header-book:hover {
background: transparent;
color: #18202B;
}
/* MOBILE MENU */
.mobile-menu-toggle,
.mobile-menu {
display: none;
}
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
min-height: 760px;
height: 100vh;
overflow: hidden;
background: #F4F0E8;
}
.hero__image {
position: absolute;
inset: 0;
}
.hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(244, 240, 232, 0.96) 0%,
rgba(244, 240, 232, 0.84) 27%,
rgba(244, 240, 232, 0.22) 54%,
rgba(244, 240, 232, 0) 74%
);
}
.hero__content {
position: relative;
z-index: 5;
width: calc(100% - 80px);
max-width: 1600px;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
}
.hero__copy {
width: 620px;
max-width: 50%;
padding-top: 80px;
}
.hero__copy h1 {
margin: 0;
color: #18202B;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(72px, 7vw, 122px);
font-weight: 400;
line-height: 0.89;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.hero__copy h1 span {
color: #B8A58C;
}
.hero__copy p {
margin: 32px 0 34px;
color: #111111;
font-size: 18px;
line-height: 1.5;
}
.hero__button {
min-width: 180px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 30px;
background: #18202B;
color: #FFFFFF;
border: 1px solid #18202B;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease;
}
.hero__button:hover {
background: transparent;
color: #18202B;
}
/* =========================================================
SELF. HOW IT WORKS
========================================================= */
.how-page {
background: #ffffff;
color: #18202b;
}
/* =========================================================
HERO
========================================================= */
.how-page-hero {
background: #f4f0e8;
border-bottom: 1px solid rgba(24, 32, 43, 0.12);
}
.how-page-hero__inner {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
padding: 110px 0 95px;
}
.how-page-eyebrow,
.how-step__eyebrow {
margin: 0 0 14px;
color: #b8a58c;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.how-page-hero h1 {
margin: 0;
max-width: 760px;
font-size: clamp(58px, 7.5vw, 112px);
font-weight: 900;
line-height: 0.84;
letter-spacing: -0.045em;
text-transform: uppercase;
}
.how-page-hero h1 span,
.how-step h2 span,
.how-support-card h2 span,
.how-page-cta h2 span {
color: #b8a58c;
}
.how-page-hero__copy {
max-width: 620px;
margin-top: 42px;
}
.how-page-hero__copy p {
margin: 0 0 16px;
color: #5c626b;
font-size: 17px;
line-height: 1.7;
}
/* =========================================================
STEPS
========================================================= */
.how-steps {
background: #ffffff;
}
.how-steps__inner {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
padding: 30px 0 80px;
}
.how-step {
display: grid;
grid-template-columns: 90px minmax(260px, 0.85fr) minmax(360px, 1.15fr);
gap: 42px;
align-items: start;
padding: 62px 0;
border-bottom: 1px solid rgba(24, 32, 43, 0.14);
}
.how-step__number {
color: #b8a58c;
font-size: 38px;
font-weight: 800;
line-height: 1;
}
.how-step__heading {
min-width: 0;
}
.how-step__heading h2 {
margin: 0;
font-size: clamp(42px, 4.4vw, 70px);
font-weight: 900;
line-height: 0.88;
letter-spacing: -0.035em;
text-transform: uppercase;
}
.how-step__copy {
min-width: 0;
padding-top: 28px;
}
.how-step__copy p {
margin: 0 0 15px;
color: #5c626b;
font-size: 15px;
line-height: 1.65;
}
.how-step__copy a {
display: inline-block;
margin-top: 10px;
color: #18202b;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-decoration: none;
text-transform: uppercase;
border-bottom: 1px solid #b8a58c;
padding-bottom: 5px;
}
/* =========================================================
DARK STEP
========================================================= */
.how-step--dark {
margin: 0 -34px;
padding: 62px 34px;
background: #18202b;
border-bottom: 0;
}
.how-step--dark .how-step__heading h2,
.how-step--dark .how-step__copy p {
color: #ffffff;
}
.how-step--dark .how-step__copy p {
color: rgba(255, 255, 255, 0.72);
}
.how-step--dark .how-step__eyebrow {
color: #b8a58c;
}
/* =========================================================
SUPPORTING INFO
========================================================= */
.how-support {
background: #f4f0e8;
}
.how-support__inner {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 70px;
padding: 95px 0;
}
.how-support-card {
display: flex;
flex-direction: column;
min-width: 0;
}
.how-support-card + .how-support-card {
padding-left: 70px;
border-left: 1px solid rgba(24, 32, 43, 0.13);
}
.how-support-card h2 {
margin: 0;
max-width: 500px;
font-size: clamp(50px, 5.4vw, 78px);
font-weight: 900;
line-height: 0.86;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.how-support-card__copy {
margin-top: 36px;
}
.how-support-card__copy p {
margin: 0 0 16px;
color: #5c626b;
font-size: 15px;
line-height: 1.7;
}
.how-support-card__copy .how-support-card__lead {
color: #18202b;
font-size: 17px;
font-weight: 700;
}
.how-support-card > a {
align-self: flex-start;
margin-top: 22px;
padding: 18px 26px;
background: #18202b;
color: #ffffff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-decoration: none;
text-transform: uppercase;
}
/* =========================================================
CTA + LOCATION
========================================================= */
.how-page-cta {
background: #18202b;
color: #ffffff;
}
.how-page-cta__inner {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 90px;
align-items: end;
padding: 95px 0;
}
.how-page-cta__main > p {
margin: 0 0 14px;
color: #b8a58c;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.how-page-cta h2 {
margin: 0;
font-size: clamp(58px, 6.2vw, 92px);
font-weight: 900;
line-height: 0.86;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.how-page-cta__main > a {
display: inline-block;
margin-top: 30px;
padding: 18px 34px;
background: #b8a58c;
color: #18202b;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-decoration: none;
text-transform: uppercase;
}
.how-page-cta__location {
padding-bottom: 8px;
}
.how-page-cta__location-label {
margin: 0 0 20px;
color: #b8a58c;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.how-page-cta__location address {
margin: 0 0 18px;
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
font-style: normal;
line-height: 1.7;
}
.how-page-cta__location a {
display: block;
width: fit-content;
margin: 8px 0;
color: #ffffff;
font-size: 14px;
line-height: 1.5;
text-decoration: none;
}
.how-page-cta__location a:last-child {
margin-top: 18px;
color: #b8a58c;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* =========================================================
HOVER
========================================================= */
@media (hover: hover) {
.how-step__copy a:hover,
.how-page-cta__location a:hover {
opacity: 0.65;
}
.how-support-card > a:hover {
opacity: 0.82;
}
.how-page-cta__main > a:hover {
opacity: 0.88;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 980px) {
.how-step {
grid-template-columns: 70px minmax(230px, 0.85fr) minmax(0, 1.15fr);
gap: 28px;
}
.how-step__copy {
padding-top: 20px;
}
.how-support__inner {
gap: 45px;
}
.how-support-card + .how-support-card {
padding-left: 45px;
}
.how-page-cta__inner {
gap: 50px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.how-page-hero__inner,
.how-steps__inner,
.how-support__inner,
.how-page-cta__inner {
width: min(100% - 34px, 1180px);
}
/* HERO */
.how-page-hero__inner {
padding: 80px 0 65px;
}
.how-page-hero__copy {
margin-top: 30px;
}
.how-page-hero__copy p {
font-size: 15px;
}
/* STEPS */
.how-steps__inner {
padding-bottom: 55px;
}
.how-step {
grid-template-columns: 55px 1fr;
gap: 18px 22px;
padding: 46px 0;
}
.how-step__number {
grid-column: 1;
grid-row: 1;
font-size: 30px;
}
.how-step__heading {
grid-column: 2;
grid-row: 1;
}
.how-step__copy {
grid-column: 2;
grid-row: 2;
padding-top: 0;
}
.how-step__heading h2 {
font-size: clamp(38px, 11vw, 54px);
}
.how-step__copy p {
font-size: 14px;
}
.how-step--dark {
margin: 0 -17px;
padding: 46px 17px;
}
/* SUPPORT */
.how-support__inner {
grid-template-columns: 1fr;
gap: 0;
padding: 70px 0;
}
.how-support-card {
padding: 0 0 55px;
}
.how-support-card + .how-support-card {
padding: 55px 0 0;
border-left: 0;
border-top: 1px solid rgba(24, 32, 43, 0.13);
}
.how-support-card h2 {
font-size: clamp(46px, 13vw, 64px);
}
/* CTA */
.how-page-cta__inner {
grid-template-columns: 1fr;
gap: 55px;
padding: 75px 0;
}
.how-page-cta h2 {
font-size: clamp(52px, 14vw, 76px);
}
.how-page-cta__location {
padding-top: 35px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
}
/* =========================================================
PACKAGES
========================================================= */
.packages-section {
padding: 50px 0 30px;
background: #F4F0E8;
color: #18202B;
}
.packages-section__inner {
width: calc(100% - 120px);
max-width: 1600px;
margin: 0 auto;
}
/* PACKAGE HEADING */
.packages-section__heading {
margin-bottom: 42px;
}
.packages-section__heading p {
margin: 0;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* GRID */
.packages-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
/* CARD */
.self-package {
position: relative;
min-height: 760px;
display: grid;
grid-template-columns: 36% 64%;
border: 1px solid #B8A58C;
overflow: hidden;
}
/* ESSENTIAL */
.self-package--essential {
background: #F4F0E8;
color: #18202B;
}
/* CREATIVE */
.self-package--creative {
background: #18202B;
color: #F4F0E8;
border: 1px solid #B8A58C;
box-shadow:
inset 0 0 0 8px #18202B,
inset 0 0 0 9px rgba(184, 165, 140, 0.85);
}
/* LOGO COLUMN */
.self-package__brand {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 28px;
border-right: 1px solid rgba(184, 165, 140, 0.45);
}
.self-package__logo-image {
width: 185px;
max-width: 82%;
display: flex;
align-items: center;
justify-content: center;
}
.self-package__logo-image img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* DETAILS */
.self-package__details {
padding: 50px 48px 44px;
display: flex;
flex-direction: column;
}
/* TYPE */
.self-package__type {
margin: 0 0 10px;
color: #B8A58C;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* TITLE */
.self-package__details h2 {
margin: 0;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(38px, 3vw, 52px);
font-weight: 400;
line-height: 0.94;
letter-spacing: -0.01em;
text-transform: uppercase;
}
/* DIVIDERS */
.self-package__divider {
width: 100%;
height: 1px;
margin: 24px 0;
background: rgba(184, 165, 140, 0.55);
}
/* PRICE */
.self-package__price {
width: 100%;
}
.self-package__starting {
display: block;
margin-bottom: 8px;
color: #B8A58C;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.self-package__price-row {
display: flex;
align-items: center;
gap: 18px;
}
.self-package__price-row strong {
font-family: Impact, "Arial Narrow", sans-serif;
font-size: 39px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.01em;
}
.self-package__price-row b {
font-family: Impact, "Arial Narrow", sans-serif;
font-size: 39px;
font-weight: 400;
line-height: 1;
}
.self-package__price-line {
display: block;
width: 1px;
height: 45px;
background: rgba(184, 165, 140, 0.7);
}
/* FEATURES */
.self-package__features {
margin: 0 0 38px;
padding: 0;
list-style: none;
}
.self-package__features li {
position: relative;
margin-bottom: 11px;
padding-left: 28px;
font-size: 14px;
line-height: 1.4;
}
.self-package__features li::before {
content: "";
position: absolute;
top: -2px;
left: 0;
color: #B8A58C;
font-size: 19px;
}
/* BUTTONS */
.self-package__button {
width: 100%;
min-height: 58px;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.self-package__button--dark {
background: #18202B;
color: #FFFFFF;
border: 1px solid #18202B;
}
.self-package__button--dark:hover {
background: transparent;
color: #18202B;
}
.self-package__button--champagne {
background: #B8A58C;
color: #18202B;
border: 1px solid #B8A58C;
}
.self-package__button--champagne:hover {
background: #F4F0E8;
color: #18202B;
border-color: #F4F0E8;
}
/* =========================================================
UPGRADE BAR
========================================================= */
.packages-upgrade {
position: relative;
margin-top: 34px;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 30px;
/*
This aligns the lines with the FIRST row:
NEED MORE TIME? / MAKE IT...
instead of centering them against both rows.
*/
align-items: start;
}
.packages-upgrade__line {
display: block;
width: 100%;
height: 1px;
/*
Positions line through center of 18px first row.
*/
margin-top: 10px;
background: rgba(184, 165, 140, 0.65);
}
.packages-upgrade__content {
text-align: center;
}
.packages-upgrade__main {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
line-height: 1.2;
}
.packages-upgrade__main strong {
color: #18202B;
font-size: 18px;
font-weight: 700;
white-space: nowrap;
}
.packages-upgrade__main span {
color: #B8A58C;
font-size: 18px;
font-weight: 700;
white-space: nowrap;
}
.packages-upgrade__main i {
color: #B8A58C;
font-size: 18px;
font-style: normal;
line-height: 1;
}
.packages-upgrade__content small {
display: block;
margin-top: 8px;
color: rgba(24, 32, 43, 0.55);
font-size: 16px;
line-height: 1.3;
}
/* =========================================================
GALLERY
========================================================= */
.self-gallery {
padding: 55px 0 75px;
background: #F4F0E8;
}
.self-gallery__inner {
width: calc(100% - 120px);
max-width: 1600px;
margin: 0 auto;
}
/* HEADING */
.self-gallery__heading {
margin-bottom: 34px;
text-align: center;
}
.self-gallery__heading h2 {
margin: 0;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(48px, 5vw, 78px);
font-weight: 400;
line-height: 1;
text-transform: uppercase;
color: #18202B;
}
.self-gallery__heading h2 span {
color: #B8A58C;
}
/* GRID */
.self-gallery__grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
}
/* IMAGE */
.self-gallery__item {
position: relative;
margin: 0;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #EAE5DC;
}
.self-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.self-gallery__item:hover img {
transform: scale(1.035);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.site-nav,
.header-book {
display: none;
}
.mobile-menu-toggle {
display: flex;
flex-direction: column;
gap: 7px;
padding: 10px;
border: 0;
background: transparent;
cursor: pointer;
}
.mobile-menu-toggle span {
display: block;
width: 28px;
height: 1px;
background: #18202B;
}
.mobile-menu {
position: absolute;
top: 92px;
left: 0;
width: 100%;
padding: 35px 40px;
background: #F4F0E8;
flex-direction: column;
gap: 24px;
border-top: 1px solid rgba(24, 32, 43, 0.12);
}
.mobile-menu.is-open {
display: flex;
}
.mobile-menu a {
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
}
.mobile-menu__book {
margin-top: 8px;
padding: 15px 20px;
background: #18202B;
color: #FFFFFF;
text-align: center;
}
.hero__copy {
max-width: 60%;
}
.packages-section__inner,
.self-gallery__inner {
width: calc(100% - 60px);
}
.self-package {
grid-template-columns: 32% 68%;
}
.self-package__details {
padding: 42px 32px;
}
.self-package__logo-image {
width: 160px;
}
}
/* =========================================================
HOW IT WORKS TABLET
========================================================= */
@media (max-width: 900px) {
.how-it-works {
padding: 75px 0 60px;
}
.how-it-works__inner {
width: calc(100% - 36px);
}
.how-it-works__heading {
padding-bottom: 45px;
}
.section-label {
margin-bottom: 22px;
}
.how-it-works__heading h2 {
font-size: clamp(42px, 11vw, 64px);
}
.how-it-works__steps {
grid-template-columns: repeat(2, 1fr);
}
.self-step,
.self-step:first-child {
min-height: 190px;
padding: 26px 20px;
}
.self-step:nth-child(2) {
border-right: 0;
}
.self-step:nth-child(-n+2) {
border-bottom: 1px solid rgba(24, 32, 43, 0.22);
}
.self-step__number {
margin-bottom: 35px;
}
.packages-grid {
grid-template-columns: 1fr;
}
.self-gallery__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.site-header__inner {
width: calc(100% - 36px);
height: 80px;
}
.site-logo__main {
font-size: 26px;
}
.mobile-menu {
top: 80px;
padding-left: 18px;
padding-right: 18px;
}
.hero {
min-height: 720px;
height: 100svh;
}
.hero__overlay {
background:
linear-gradient(
0deg,
rgba(244, 240, 232, 0.96) 0%,
rgba(244, 240, 232, 0.8) 34%,
rgba(244, 240, 232, 0.06) 68%,
rgba(244, 240, 232, 0) 100%
);
}
.hero__content {
width: calc(100% - 36px);
align-items: flex-end;
padding-bottom: 58px;
}
.hero__copy {
width: 100%;
max-width: 100%;
padding-top: 0;
}
.hero__copy h1 {
font-size: clamp(54px, 16vw, 78px);
}
.hero__copy p {
margin: 22px 0 28px;
font-size: 15px;
}
.hero__button {
width: 100%;
}
}
/* =========================================================
HOW IT WORKS SMALL MOBILE
========================================================= */
@media (max-width: 520px) {
.how-it-works__steps {
grid-template-columns: 1fr;
}
.self-step,
.self-step:first-child {
min-height: auto;
padding: 28px 0;
border-right: 0;
border-bottom: 1px solid rgba(24, 32, 43, 0.22);
}
.self-step:last-child {
border-bottom: 0;
}
.self-step__number {
margin-bottom: 24px;
}
.how-it-works__footer {
text-align: left;
}
}
/* =========================================================
PACKAGE + GALLERY MOBILE
========================================================= */
@media (max-width: 650px) {
.packages-section {
padding: 70px 0 40px;
}
.packages-section__inner,
.self-gallery__inner {
width: calc(100% - 36px);
}
.packages-section__heading {
margin-bottom: 30px;
}
.packages-section__heading p {
font-size: 15px;
}
.self-package {
min-height: auto;
grid-template-columns: 1fr;
}
.self-package__brand {
min-height: 175px;
justify-content: flex-start;
padding: 32px 26px;
border-right: 0;
border-bottom: 1px solid rgba(184, 165, 140, 0.45);
}
.self-package__logo-image {
width: 150px;
}
.self-package__details {
padding: 34px 26px;
}
.self-package__details h2 {
font-size: 42px;
}
.self-package__price-row {
gap: 14px;
}
.self-package__price-row strong,
.self-package__price-row b {
font-size: 34px;
}
.self-package__price-line {
height: 38px;
}
.self-package__features li {
font-size: 13px;
}
.packages-upgrade {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 28px;
}
.packages-upgrade__main {
flex-wrap: wrap;
gap: 10px;
}
.packages-upgrade__main strong,
.packages-upgrade__main span,
.packages-upgrade__main i {
font-size: 16px;
}
.packages-upgrade__content small {
font-size: 14px;
}
.self-gallery {
padding: 45px 0 60px;
}
.self-gallery__heading {
margin-bottom: 28px;
text-align: left;
}
.self-gallery__heading h2 {
font-size: 48px;
}
.self-gallery__grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
}
/* =========================================================
FINAL CTA
========================================================= */
.final-cta {
padding: 95px 0;
background: #18202B;
color: #FFFFFF;
text-align: center;
}
.final-cta__inner {
width: calc(100% - 120px);
max-width: 1100px;
margin: 0 auto;
}
.final-cta__eyebrow {
margin: 0 0 18px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.final-cta h2 {
margin: 0;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(58px, 7vw, 108px);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.final-cta h2 span {
color: #B8A58C;
}
.final-cta__copy {
margin: 24px 0 32px;
font-size: 17px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
}
.final-cta__button {
min-width: 190px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 30px;
background: #B8A58C;
color: #18202B;
border: 1px solid #B8A58C;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.final-cta__button:hover {
background: transparent;
color: #FFFFFF;
}
/* =========================================================
LEGAL AREA
========================================================= */
.footer-legal {
width: 100%;
margin-top: 70px;
padding-top: 28px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 50px;
border-top:
1px solid
rgba(255, 255, 255, 0.14);
}
/* =========================================================
LEGAL LINKS
========================================================= */
.footer-legal__links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 24px;
}
.footer-legal__links a {
color: rgba(255, 255, 255, 0.52);
font-size: 9px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.09em;
text-decoration: none;
text-transform: uppercase;
transition: color 0.25s ease;
}
.footer-legal__links a:hover {
color: #FFFFFF;
}
/* =========================================================
COPYRIGHT
========================================================= */
.footer-legal__copyright {
max-width: 540px;
text-align: right;
}
.footer-legal__copyright p {
margin: 0;
}
.footer-legal__copyright > p:first-child {
color: rgba(255, 255, 255, 0.55);
font-size: 9px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.footer-legal__protection {
margin-top: 7px !important;
color: rgba(255, 255, 255, 0.30);
font-size: 8px;
line-height: 1.6;
letter-spacing: 0.025em;
}
/* =========================================================
HOVER CLEANUP
========================================================= */
.site-footer a:focus-visible {
outline: 1px solid #B8A58C;
outline-offset: 5px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1150px) {
.site-footer__inner {
width: calc(100% - 70px);
}
.site-footer__main {
grid-template-columns:
minmax(230px, 1.4fr)
minmax(110px, 0.65fr)
minmax(110px, 0.65fr)
minmax(110px, 0.65fr);
gap: 45px;
}
.site-footer__cta {
grid-column: 1 / -1;
max-width: 520px;
padding-top: 28px;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 850px) {
.site-footer__inner {
width: calc(100% - 50px);
padding-top: 70px;
}
.site-footer__main {
grid-template-columns:
1fr
1fr;
gap: 50px 35px;
}
.site-footer__brand {
grid-column: 1 / -1;
max-width: 500px;
}
.site-footer__cta {
grid-column: 1 / -1;
max-width: 520px;
padding-top: 15px;
}
.footer-legal {
flex-direction: column;
align-items: flex-start;
gap: 25px;
margin-top: 55px;
}
.footer-legal__copyright {
max-width: 500px;
text-align: left;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 560px) {
.site-footer__inner {
width: calc(100% - 36px);
padding: 55px 0 25px;
}
.site-footer__main {
display: block;
}
/* BRAND */
.site-footer__brand {
margin-bottom: 48px;
}
.site-footer__logo {
font-size: 68px;
}
.site-footer__tagline {
margin-top: 18px;
font-size: 10px;
}
.site-footer__description {
max-width: 330px;
font-size: 12px;
}
/* COLUMNS */
.site-footer__column {
margin-bottom: 38px;
}
.site-footer__column a {
font-size: 12px;
}
/* CTA */
.site-footer__cta {
margin-top: 50px;
padding-top: 45px;
border-top:
1px solid
rgba(255, 255, 255, 0.12);
}
.site-footer__cta h2 {
font-size: 52px;
}
.site-footer__cta > p:not(.site-footer__heading) {
max-width: 330px;
}
.site-footer__button {
width: 100%;
height: 54px;
}
/* LEGAL */
.footer-legal {
margin-top: 55px;
padding-top: 25px;
}
.footer-legal__links {
align-items: flex-start;
gap: 14px 20px;
}
.footer-legal__links a {
font-size: 8px;
}
.footer-legal__copyright {
max-width: 100%;
}
.footer-legal__copyright > p:first-child {
font-size: 8px;
}
.footer-legal__protection {
max-width: 430px;
font-size: 8px;
line-height: 1.6;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.site-footer__logo {
font-size: 60px;
}
.site-footer__cta h2 {
font-size: 46px;
}
.footer-legal__links {
flex-direction: column;
gap: 11px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.site-footer__column a,
.site-footer__social a::after,
.site-footer__button {
transition: none;
}
}
/* =========================================================
HOMEPAGE POLISH
========================================================= */
/* HEADER */
.site-header {
transition:
background 0.3s ease,
box-shadow 0.3s ease;
}
.site-logo,
.site-nav a,
.header-book {
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.site-logo:hover {
opacity: 0.75;
}
/* HERO */
.hero__image img {
transform: scale(1.001);
transition: transform 1.2s ease;
}
.hero:hover .hero__image img {
transform: scale(1.012);
}
/* BUTTON MOTION */
.hero__button,
.header-book,
.self-package__button,
.final-cta__button {
transition:
transform 0.25s ease,
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.hero__button:hover,
.header-book:hover,
.self-package__button:hover,
.final-cta__button:hover {
transform: translateY(-2px);
}
/* HOW IT WORKS */
.self-step {
transition:
background 0.25s ease,
padding 0.25s ease;
}
.self-step:hover {
background: rgba(184, 165, 140, 0.06);
}
/* PACKAGE CARDS */
.self-package {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.self-package:hover {
transform: translateY(-4px);
}
.self-package--essential:hover {
box-shadow: 0 18px 40px rgba(24, 32, 43, 0.08);
}
.self-package--creative:hover {
box-shadow:
inset 0 0 0 8px #18202B,
inset 0 0 0 9px rgba(184, 165, 140, 0.85),
0 18px 40px rgba(24, 32, 43, 0.18);
}
/* PACKAGE LOGOS */
.self-package__logo-image img {
transition:
transform 0.35s ease,
opacity 0.35s ease;
}
.self-package:hover .self-package__logo-image img {
transform: scale(1.025);
}
/* UPGRADE BAR */
.packages-upgrade__main span {
transition: color 0.25s ease;
}
.packages-upgrade__main span:hover {
color: #18202B;
}
/* GALLERY */
.self-gallery__item {
cursor: pointer;
}
.self-gallery__item img {
transition:
transform 0.6s ease,
filter 0.35s ease;
}
.self-gallery__item:hover img {
transform: scale(1.035);
}
/* FOOTER */
.site-footer__nav a,
.site-footer__social a {
position: relative;
}
.site-footer__nav a::after,
.site-footer__social a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 1px;
background: #B8A58C;
transition: width 0.25s ease;
}
.site-footer__nav a:hover::after,
.site-footer__social a:hover::after {
width: 100%;
}
/* ACCESSIBILITY */
a:focus-visible,
button:focus-visible {
outline: 2px solid #B8A58C;
outline-offset: 4px;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* =========================================================
MOBILE CENTERING
========================================================= */
@media (max-width: 650px) {
body {
text-align: center;
}
.hero__copy,
.how-it-works__heading,
.self-step,
.packages-section__heading,
.self-package__details,
.self-gallery__heading,
.final-cta__inner {
text-align: center;
}
.hero__copy,
.how-it-works__heading,
.self-package__details,
.final-cta__inner {
margin-left: auto;
margin-right: auto;
}
.self-step p {
margin-left: auto;
margin-right: auto;
}
.self-package__brand {
justify-content: center;
}
.self-package__logo-image {
margin-left: auto;
margin-right: auto;
}
.self-package__price-row {
justify-content: center;
}
.self-package__features {
width: 100%;
text-align: left;
}
.packages-upgrade__main {
justify-content: center;
text-align: center;
}
.self-gallery__heading {
text-align: center;
}
.how-it-works__footer {
text-align: center;
}
}
/* =========================================================
FOOTER CENTERING - ALL DEVICES
========================================================= */
.site-footer {
text-align: center;
}
.site-footer__inner {
display: flex;
flex-direction: column;
align-items: center;
}
.site-footer__brand {
align-items: center;
}
.site-footer__nav {
justify-content: center;
}
.site-footer__social {
justify-content: center;
}
.site-footer__bottom {
width: 100%;
justify-content: center;
gap: 24px;
text-align: center;
}
@media (max-width: 650px) {
.site-footer__nav {
align-items: center;
}
.site-footer__bottom {
flex-direction: column;
gap: 8px;
}
}
/* =========================================================
OFFICIAL SELF. LOGO SIZING
========================================================= */
/* HEADER */
.site-logo__image {
display: block;
width: 100px;
height: auto;
object-fit: contain;
}
/* FOOTER */
.site-footer__logo-image {
display: block;
width: 250px;
height: auto;
object-fit: contain;
}
/* MOBILE */
@media (max-width: 650px) {
.site-logo__image {
width: 72px;
}
.site-footer__logo-image {
width: 90px;
}
}
/* =========================================================
FAQ PAGE
========================================================= */
/* =========================================================
SELF. STUDIOS NYC
FAQ PAGE
========================================================= */
/* =========================================================
PAGE
========================================================= */
.faq-page {
width: 100%;
margin: 0;
padding: 0;
background: #F4F0E8;
color: #18202B;
}
/* =========================================================
FAQ HERO
========================================================= */
.faq-hero {
width: 100%;
padding: 130px 0 45px;
background: #F4F0E8;
}
.faq-hero__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
.faq-hero__eyebrow {
margin: 0 0 18px;
color: #B8A58C;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.faq-hero h1 {
margin: 0;
color: #18202B;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: clamp(76px, 8.5vw, 138px);
font-weight: 400;
line-height: 0.90;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.faq-hero h1 span {
color: #B8A58C;
}
.faq-hero__intro {
max-width: 580px;
margin: 24px 0 0;
color: rgba(24, 32, 43, 0.68);
font-size: 17px;
font-weight: 400;
line-height: 1.6;
}
/* =========================================================
FAQ CONTENT
========================================================= */
.faq-content {
width: 100%;
padding: 0 0 80px;
background: #F4F0E8;
}
.faq-content__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
/* =========================================================
FAQ GROUPS
========================================================= */
.faq-group {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 70px;
padding: 48px 0;
border-top: 1px solid rgba(24, 32, 43, 0.18);
}
.faq-group:last-child {
border-bottom: 1px solid rgba(24, 32, 43, 0.18);
}
/* =========================================================
GROUP HEADINGS
========================================================= */
.faq-group__heading {
margin: 0;
padding: 0;
}
.faq-group__heading span {
display: block;
margin: 0 0 14px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
}
.faq-group__heading h2 {
margin: 0;
color: #18202B;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: 38px;
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.01em;
text-transform: uppercase;
}
/* =========================================================
FAQ LIST
========================================================= */
.faq-list {
width: 100%;
margin: 0;
padding: 0;
}
.faq-item {
width: 100%;
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(24, 32, 43, 0.16);
}
.faq-item:first-child {
border-top: 1px solid rgba(24, 32, 43, 0.16);
}
/* =========================================================
FAQ QUESTIONS
========================================================= */
.faq-question {
appearance: none;
-webkit-appearance: none;
width: 100%;
margin: 0;
padding: 23px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
border: 0;
border-radius: 0;
outline: none;
background: transparent;
color: #18202B;
font-family: inherit;
text-align: left;
cursor: pointer;
user-select: none;
transition: color 0.25s ease;
}
.faq-question > span:first-child {
display: block;
flex: 1;
color: inherit;
font-size: 17px;
font-weight: 700;
line-height: 1.4;
}
.faq-question:hover {
color: #B8A58C;
}
.faq-question:focus-visible {
outline: 2px solid #B8A58C;
outline-offset: 5px;
}
/* =========================================================
FAQ PLUS ICON
========================================================= */
.faq-icon {
flex: 0 0 34px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
color: #B8A58C;
font-size: 27px;
font-weight: 300;
line-height: 1;
transform: rotate(0deg);
transition: transform 0.3s ease;
}
/* PLUS BECOMES X */
.faq-item.is-open .faq-icon {
transform: rotate(45deg);
}
/* =========================================================
FAQ ANSWERS
========================================================= */
.faq-answer {
width: 100%;
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition:
max-height 0.4s ease,
opacity 0.3s ease,
visibility 0.3s ease;
}
.faq-answer__inner {
max-width: 820px;
margin: 0;
padding: 0 60px 27px 0;
color: rgba(24, 32, 43, 0.70);
font-size: 15px;
font-weight: 400;
line-height: 1.75;
}
/* OPEN ANSWER */
.faq-item.is-open .faq-answer {
opacity: 1;
visibility: visible;
}
/* OPEN QUESTION */
.faq-item.is-open .faq-question {
color: #B8A58C;
}
/* =========================================================
FAQ CTA
========================================================= */
.faq-cta {
width: 100%;
padding: 80px 0;
background: #18202B;
color: #FFFFFF;
text-align: center;
}
.faq-cta__inner {
width: calc(100% - 40px);
max-width: 1100px;
margin: 0 auto;
}
.faq-cta__inner > p {
margin: 0 0 14px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.faq-cta h2 {
margin: 0 0 30px;
color: #FFFFFF;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: clamp(58px, 7vw, 100px);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.faq-cta h2 span {
color: #B8A58C;
}
.faq-cta a {
min-width: 190px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 30px;
border: 1px solid #B8A58C;
background: #B8A58C;
color: #18202B;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.faq-cta a:hover {
background: transparent;
color: #FFFFFF;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.faq-hero__inner,
.faq-content__inner {
width: calc(100% - 60px);
}
.faq-group {
grid-template-columns: 210px minmax(0, 1fr);
gap: 45px;
}
.faq-group__heading h2 {
font-size: 34px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
/* HERO */
.faq-hero {
padding: 115px 0 40px;
text-align: center;
}
.faq-hero__inner {
width: calc(100% - 36px);
margin: 0 auto;
}
.faq-hero__eyebrow {
margin-bottom: 16px;
font-size: 11px;
}
.faq-hero h1 {
font-size: clamp(58px, 18vw, 82px);
line-height: 0.92;
text-align: center;
}
.faq-hero__intro {
max-width: 340px;
margin: 20px auto 0;
font-size: 15px;
line-height: 1.55;
text-align: center;
}
/* CONTENT */
.faq-content {
padding-bottom: 55px;
}
.faq-content__inner {
width: calc(100% - 36px);
margin: 0 auto;
}
/* GROUP */
.faq-group {
display: block;
padding: 42px 0;
}
/* GROUP HEADING */
.faq-group__heading {
margin: 0 0 28px;
text-align: center;
}
.faq-group__heading span {
margin-bottom: 10px;
font-size: 11px;
}
.faq-group__heading h2 {
font-size: 32px;
line-height: 1;
}
/* QUESTIONS */
.faq-question {
padding: 20px 0;
gap: 18px;
text-align: left;
}
.faq-question > span:first-child {
font-size: 15px;
line-height: 1.4;
}
/* ICON */
.faq-icon {
flex-basis: 28px;
width: 28px;
height: 28px;
font-size: 23px;
}
/* ANSWERS */
.faq-answer__inner {
max-width: 100%;
padding: 0 35px 23px 0;
font-size: 14px;
line-height: 1.65;
text-align: left;
}
/* CTA */
.faq-cta {
padding: 65px 0;
}
.faq-cta__inner {
width: calc(100% - 36px);
}
.faq-cta h2 {
font-size: 56px;
line-height: 0.95;
}
.faq-cta a {
width: 100%;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.faq-answer,
.faq-icon,
.faq-cta a {
transition: none;
}
}
/* =========================================================
ABOUT PAGE
========================================================= */
.about-page {
background: #F4F0E8;
color: #18202B;
}
.about-eyebrow {
margin: 0 0 18px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* =========================================================
HERO
========================================================= */
.about-hero {
padding: 125px 0 70px;
}
.about-hero__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 70px;
align-items: center;
}
.about-hero__copy h1 {
margin: 0 0 30px;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(72px, 8vw, 128px);
font-weight: 400;
line-height: 0.88;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.about-hero__copy h1 span {
color: #B8A58C;
}
.about-hero__copy > p:not(.about-eyebrow) {
max-width: 600px;
margin: 0 0 16px;
color: rgba(24, 32, 43, 0.72);
font-size: 16px;
line-height: 1.7;
}
.about-hero__image {
aspect-ratio: 16 / 11;
overflow: hidden;
}
.about-hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =========================================================
YOU'RE IN CONTROL
========================================================= */
.about-control {
padding: 75px 0;
background: #F4F0E8;
border-top: 1px solid rgba(24, 32, 43, 0.16);
border-bottom: 1px solid rgba(24, 32, 43, 0.16);
}
.about-control__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 340px minmax(0, 650px);
justify-content: center;
gap: 80px;
align-items: stretch;
}
/* VERTICAL TITLE COLUMN */
.about-control__heading {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
/* ROTATED GROUP */
.about-control__heading-rotate {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
transform:
translate(-50%, -50%)
rotate(-90deg);
transform-origin: center;
text-align: left;
}
/* THE EXPERIENCE */
.about-control__heading-rotate .about-eyebrow {
margin: 0 0 15px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
}
/* YOU'RE IN CONTROL */
.about-control__heading-rotate h2 {
margin: 0;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: 88px;
font-weight: 400;
line-height: 0.9;
letter-spacing: -0.02em;
text-transform: uppercase;
white-space: nowrap;
color: #18202B;
}
.about-control__heading-rotate h2 span {
color: #B8A58C;
}
/* RIGHT COPY */
.about-control__copy {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.about-control__copy p {
margin: 0;
color: rgba(24, 32, 43, 0.72);
font-size: 17px;
line-height: 1.7;
}
.about-control__lead {
color: #18202B !important;
font-weight: 500;
}
.about-control__closing {
color: #18202B !important;
font-weight: 700;
}
/* =========================================================
COME AS YOU ARE
========================================================= */
.about-audience {
padding: 85px 0;
background: #FFFFFF;
}
.about-audience__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
/* HEADING */
.about-audience__heading {
margin-bottom: 50px;
}
.about-audience__heading h2 {
margin: 0;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(58px, 6vw, 92px);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.about-audience__heading h2 span {
color: #B8A58C;
}
/* =========================================================
TWO COLUMN LAYOUT
========================================================= */
.about-audience__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
/* =========================================================
LEFT  BOXES
========================================================= */
.about-audience__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid rgba(24, 32, 43, 0.16);
border-left: 1px solid rgba(24, 32, 43, 0.16);
}
.about-audience__item {
min-height: 145px;
padding: 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid rgba(24, 32, 43, 0.16);
border-bottom: 1px solid rgba(24, 32, 43, 0.16);
}
.about-audience__item span {
color: #B8A58C;
font-size: 12px;
font-weight: 700;
}
.about-audience__item strong {
color: #18202B;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Make final box full width */
.about-audience__item:last-child {
grid-column: 1 / -1;
}
/* =========================================================
RIGHT  COPY
========================================================= */
.about-audience__note {
max-width: none;
margin: 0;
padding-top: 0;
}
.about-audience__note p {
margin: 0 0 18px;
color: rgba(24, 32, 43, 0.72);
font-size: 16px;
line-height: 1.65;
}
.about-audience__note p:first-child {
margin-top: -5px;
}
.about-audience__note strong {
color: #18202B;
font-size: 17px;
font-weight: 700;
line-height: 1.5;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.about-audience__inner {
width: calc(100% - 60px);
}
.about-audience__content {
gap: 45px;
}
.about-audience__item {
min-height: 125px;
padding: 18px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.about-audience {
padding: 65px 0;
}
.about-audience__inner {
width: calc(100% - 36px);
}
.about-audience__heading {
margin-bottom: 35px;
text-align: center;
}
.about-audience__content {
display: block;
}
.about-audience__grid {
margin-bottom: 40px;
}
.about-audience__item {
min-height: 110px;
padding: 16px;
}
.about-audience__item strong {
font-size: 17px;
}
.about-audience__note {
text-align: left;
}
.about-audience__note p {
font-size: 15px;
line-height: 1.65;
}
}
/* =========================================================
FINAL CTA
========================================================= */
.about-cta {
padding: 90px 0;
background: #18202B;
color: #FFFFFF;
text-align: center;
}
.about-cta__inner {
width: calc(100% - 40px);
max-width: 1100px;
margin: 0 auto;
}
.about-cta h2 {
margin: 0;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(60px, 7vw, 100px);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.about-cta h2 span {
color: #B8A58C;
}
.about-cta p {
margin: 22px 0 30px;
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
}
.about-cta a {
min-width: 190px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 30px;
background: #B8A58C;
color: #18202B;
border: 1px solid #B8A58C;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.about-cta a:hover {
background: transparent;
color: #FFFFFF;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.about-hero__inner,
.about-control__inner,
.about-audience__inner {
width: calc(100% - 60px);
}
/* HERO */
.about-hero__inner {
grid-template-columns: 1fr;
gap: 45px;
}
/* CONTROL */
.about-control__inner {
grid-template-columns: 250px minmax(0, 1fr);
gap: 50px;
}
.about-control__heading {
min-height: 600px;
}
.about-control__heading-rotate {
width: 560px;
}
.about-control__heading-rotate h2 {
font-size: 72px;
}
/* AUDIENCE */
.about-audience__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
/* HERO */
.about-hero {
padding: 110px 0 55px;
}
.about-hero__inner,
.about-control__inner,
.about-audience__inner {
width: calc(100% - 36px);
}
.about-hero__copy {
text-align: center;
}
.about-hero__copy h1 {
font-size: clamp(60px, 18vw, 84px);
line-height: 0.9;
}
.about-hero__copy > p:not(.about-eyebrow) {
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
.about-hero__image {
aspect-ratio: 4 / 5;
}
/* CONTROL */
.about-control {
padding: 60px 0;
}
.about-control__inner {
display: block;
}
.about-control__heading {
min-height: 0;
display: block;
margin-bottom: 38px;
}
.about-control__heading-rotate {
position: static;
width: auto;
transform: none;
text-align: center;
}
.about-control__heading-rotate .about-eyebrow {
margin-bottom: 15px;
}
.about-control__heading-rotate h2 {
font-size: clamp(58px, 16vw, 78px);
line-height: 0.9;
white-space: normal;
}
.about-control__copy {
gap: 17px;
text-align: left;
}
.about-control__copy p {
font-size: 15px;
line-height: 1.65;
}
/* AUDIENCE */
.about-audience {
padding: 65px 0;
}
.about-audience__heading {
text-align: center;
}
.about-audience__grid {
grid-template-columns: 1fr;
}
.about-audience__item {
min-height: 115px;
}
.about-audience__note {
text-align: center;
}
.about-audience__note p {
font-size: 15px;
}
/* CTA */
.about-cta {
padding: 70px 0;
}
.about-cta h2 {
font-size: 56px;
}
.about-cta a {
width: 100%;
}
}
/* =========================================================
SELF. STUDIOS NYC
STUDIO POLICY
========================================================= */
.policy-page {
width: 100%;
margin: 0;
padding: 0;
background: #F4F0E8;
color: #18202B;
}
/* =========================================================
HERO
========================================================= */
.policy-hero {
padding: 130px 0 75px;
}
.policy-hero__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
.policy-eyebrow {
margin: 0 0 18px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.policy-hero h1 {
margin: 0;
color: #18202B;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: clamp(72px, 8vw, 132px);
font-weight: 400;
line-height: 0.9;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.policy-hero h1 span {
color: #B8A58C;
}
.policy-hero__copy {
max-width: 650px;
margin: 28px 0 0;
color: rgba(24, 32, 43, 0.70);
font-size: 17px;
line-height: 1.7;
}
.policy-updated {
margin: 24px 0 0;
color: rgba(24, 32, 43, 0.45);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* =========================================================
CONTENT
========================================================= */
.policy-content {
padding: 0 0 90px;
background: #FFFFFF;
}
.policy-content__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
/* =========================================================
POLICY ROW
========================================================= */
.policy-section {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 60px;
padding: 48px 0;
border-top:
1px solid
rgba(24, 32, 43, 0.16);
}
.policy-section:last-child {
border-bottom:
1px solid
rgba(24, 32, 43, 0.16);
}
.policy-section > span {
color: #B8A58C;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: 46px;
line-height: 1;
}
.policy-section > div {
max-width: 850px;
}
.policy-section h2 {
margin: 0 0 18px;
color: #18202B;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: 34px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
}
.policy-section p {
margin: 0 0 14px;
color: rgba(24, 32, 43, 0.70);
font-size: 16px;
line-height: 1.75;
}
.policy-section p:last-child {
margin-bottom: 0;
}
.policy-section a {
display: inline-block;
margin-top: 8px;
padding-bottom: 3px;
color: #18202B;
border-bottom: 1px solid #B8A58C;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
}
/* =========================================================
FINAL CTA
========================================================= */
.policy-cta {
padding: 90px 0;
background: #18202B;
color: #FFFFFF;
text-align: center;
}
.policy-cta__inner {
width: calc(100% - 40px);
max-width: 1100px;
margin: 0 auto;
}
.policy-cta__inner > p {
margin: 0 0 16px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.policy-cta h2 {
margin: 0 0 30px;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: clamp(58px, 7vw, 100px);
font-weight: 400;
line-height: 0.92;
text-transform: uppercase;
}
.policy-cta h2 span {
color: #B8A58C;
}
.policy-cta a {
min-width: 190px;
height: 54px;
padding: 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #B8A58C;
color: #18202B;
border: 1px solid #B8A58C;
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.policy-cta a:hover {
background: transparent;
color: #FFFFFF;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.policy-hero__inner,
.policy-content__inner {
width: calc(100% - 60px);
}
.policy-section {
grid-template-columns: 100px minmax(0, 1fr);
gap: 35px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.policy-hero {
padding: 110px 0 55px;
text-align: center;
}
.policy-hero__inner,
.policy-content__inner {
width: calc(100% - 36px);
}
.policy-eyebrow {
font-size: 11px;
}
.policy-hero h1 {
font-size: 58px;
line-height: 0.92;
}
.policy-hero__copy {
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
.policy-section {
display: block;
padding: 36px 0;
text-align: center;
}
.policy-section > span {
display: block;
margin-bottom: 16px;
font-size: 34px;
}
.policy-section > div {
max-width: 100%;
}
.policy-section h2 {
font-size: 28px;
}
.policy-section p {
font-size: 15px;
line-height: 1.7;
}
.policy-cta {
padding: 70px 0;
}
.policy-cta h2 {
font-size: 54px;
}
.policy-cta a {
width: 100%;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.policy-item,
.policies-cta a {
transition: none;
}
}
/* =========================================================
SELF. STUDIOS NYC
CONTACT PAGE
========================================================= */
.contact-page {
width: 100%;
margin: 0;
padding: 0;
background: #F4F0E8;
color: #18202B;
}
/* =========================================================
MAIN SECTION
========================================================= */
.contact-main {
padding: 130px 0 85px;
background: #F4F0E8;
}
.contact-main__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 100px;
align-items: start;
}
/* =========================================================
LEFT INTRO
========================================================= */
.contact-intro {
width: 100%;
}
.contact-eyebrow {
margin: 0 0 18px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.contact-intro h1 {
margin: 0;
color: #18202B;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: clamp(80px, 9vw, 145px);
font-weight: 400;
line-height: 0.88;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.contact-intro h1 span {
color: #B8A58C;
}
/* INTRO COPY */
.contact-intro__copy {
max-width: 520px;
margin-top: 32px;
}
.contact-intro__copy p {
margin: 0 0 16px;
color: rgba(24, 32, 43, 0.72);
font-size: 16px;
line-height: 1.7;
}
/* READY TO BOOK */
.contact-intro__note {
margin-top: 38px;
padding-top: 24px;
display: flex;
align-items: center;
gap: 20px;
border-top: 1px solid rgba(24, 32, 43, 0.18);
}
.contact-intro__note span {
color: rgba(24, 32, 43, 0.55);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.contact-intro__note a {
color: #18202B;
font-size: 13px;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid #B8A58C;
padding-bottom: 3px;
}
/* =========================================================
FORM CONTAINER
========================================================= */
.contact-form-wrap {
position: relative;
width: 100%;
padding: 48px;
box-sizing: border-box;
background: #FFFFFF;
border: 1px solid rgba(24, 32, 43, 0.14);
}
/* =========================================================
FORM STATUS
========================================================= */
.contact-message {
margin: 0 0 32px;
padding: 20px;
border: 1px solid #B8A58C;
}
.contact-message strong {
display: block;
margin-bottom: 6px;
color: #18202B;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
}
.contact-message p {
margin: 0;
color: rgba(24, 32, 43, 0.70);
font-size: 14px;
line-height: 1.5;
}
.contact-message--success {
background: rgba(184, 165, 140, 0.10);
}
.contact-message--error {
background: rgba(24, 32, 43, 0.04);
}
/* =========================================================
FORM
========================================================= */
.contact-form {
width: 100%;
margin: 0;
padding: 0;
}
.contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
/* =========================================================
FIELD
========================================================= */
.contact-field {
width: 100%;
margin: 0 0 28px;
}
.contact-field label {
display: block;
margin: 0 0 10px;
color: #18202B;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* =========================================================
INPUTS
========================================================= */
.contact-field input,
.contact-field select,
.contact-field textarea {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 14px 0;
border: 0;
border-bottom: 1px solid rgba(24, 32, 43, 0.28);
border-radius: 0;
outline: none;
background-color: transparent;
color: #18202B;
font-family: inherit;
font-size: 16px;
line-height: 1.4;
box-shadow: none;
transition: border-color 0.25s ease;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
border-bottom-color: #B8A58C;
}
/* =========================================================
SELECT
========================================================= */
.contact-field select {
min-height: 50px;
padding-right: 35px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(
45deg,
transparent 50%,
#18202B 50%
),
linear-gradient(
135deg,
#18202B 50%,
transparent 50%
);
background-position:
calc(100% - 16px) 50%,
calc(100% - 11px) 50%;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
}
/* =========================================================
TEXTAREA
========================================================= */
.contact-field textarea {
min-height: 165px;
resize: vertical;
}
/* =========================================================
SELF. SHIELD
========================================================= */
.self-shield-field {
position: absolute !important;
left: -99999px !important;
top: -99999px !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.self-shield-field input,
.self-shield-field label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
}
/* =========================================================
SUBMIT
========================================================= */
.contact-submit {
width: 100%;
min-height: 56px;
margin: 0;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #18202B;
border-radius: 0;
background: #18202B;
color: #FFFFFF;
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.contact-submit:hover {
background: transparent;
color: #18202B;
transform: translateY(-2px);
}
/* =========================================================
QUICK LINKS
========================================================= */
.contact-links {
padding: 0 0 85px;
background: #F4F0E8;
}
.contact-links__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid rgba(24, 32, 43, 0.16);
border-left: 1px solid rgba(24, 32, 43, 0.16);
}
.contact-link {
min-height: 180px;
padding: 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #18202B;
text-decoration: none;
border-right: 1px solid rgba(24, 32, 43, 0.16);
border-bottom: 1px solid rgba(24, 32, 43, 0.16);
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.contact-link > span {
color: #B8A58C;
font-size: 12px;
font-weight: 700;
}
.contact-link div {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-link small {
color: rgba(24, 32, 43, 0.50);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
}
.contact-link strong {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.contact-link:hover {
background: #18202B;
color: #FFFFFF;
transform: translateY(-2px);
}
.contact-link:hover small {
color: rgba(255, 255, 255, 0.55);
}
/* =========================================================
CUSTOM SELF.
========================================================= */
.contact-custom {
padding: 90px 0;
background: #FFFFFF;
}
.contact-custom__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 100px;
align-items: start;
}
.contact-custom__heading h2 {
margin: 0;
color: #18202B;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: clamp(62px, 7vw, 105px);
font-weight: 400;
line-height: 0.90;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.contact-custom__heading h2 span {
color: #B8A58C;
}
.contact-custom__copy {
max-width: 650px;
}
.contact-custom__copy p {
margin: 0 0 16px;
color: rgba(24, 32, 43, 0.70);
font-size: 16px;
line-height: 1.7;
}
.contact-custom__copy .contact-custom__lead {
color: #18202B;
font-size: 19px;
font-weight: 700;
}
.contact-custom__copy a {
min-width: 200px;
min-height: 56px;
margin-top: 16px;
padding: 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #18202B;
color: #FFFFFF;
border: 1px solid #18202B;
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.contact-custom__copy a:hover {
background: transparent;
color: #18202B;
transform: translateY(-2px);
}
/* =========================================================
FINAL CTA
========================================================= */
.contact-cta {
padding: 90px 0;
background: #18202B;
color: #FFFFFF;
text-align: center;
}
.contact-cta__inner {
width: calc(100% - 40px);
max-width: 1100px;
margin: 0 auto;
}
.contact-cta__inner > p {
margin: 0 0 16px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
}
.contact-cta h2 {
margin: 0 0 30px;
color: #FFFFFF;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: clamp(58px, 7vw, 100px);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.contact-cta h2 span {
color: #B8A58C;
}
.contact-cta a {
min-width: 190px;
height: 54px;
padding: 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #B8A58C;
color: #18202B;
border: 1px solid #B8A58C;
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.contact-cta a:hover {
background: transparent;
color: #FFFFFF;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.contact-main__inner,
.contact-links__inner,
.contact-custom__inner {
width: calc(100% - 60px);
}
.contact-main__inner {
grid-template-columns: 1fr;
gap: 55px;
}
.contact-form-wrap {
max-width: 800px;
}
.contact-links__inner {
grid-template-columns: repeat(2, 1fr);
}
.contact-custom__inner {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.contact-main {
padding: 110px 0 60px;
}
.contact-main__inner,
.contact-links__inner,
.contact-custom__inner {
width: calc(100% - 36px);
}
.contact-main__inner {
gap: 40px;
}
/* INTRO */
.contact-intro {
text-align: center;
}
.contact-eyebrow {
font-size: 11px;
}
.contact-intro h1 {
font-size: clamp(62px, 20vw, 88px);
line-height: 0.90;
}
.contact-intro__copy {
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.contact-intro__copy p {
font-size: 15px;
}
.contact-intro__note {
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
/* FORM */
.contact-form-wrap {
padding: 30px 22px;
text-align: left;
}
.contact-form__row {
grid-template-columns: 1fr;
gap: 0;
}
.contact-field {
margin-bottom: 25px;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
font-size: 16px;
}
/* LINKS */
.contact-links {
padding-bottom: 60px;
}
.contact-links__inner {
grid-template-columns: 1fr;
}
.contact-link {
min-height: 125px;
text-align: left;
}
/* CUSTOM */
.contact-custom {
padding: 65px 0;
}
.contact-custom__inner {
text-align: center;
}
.contact-custom__heading h2 {
font-size: 58px;
}
.contact-custom__copy {
margin: 0 auto;
}
.contact-custom__copy a {
width: 100%;
}
/* CTA */
.contact-cta {
padding: 70px 0;
}
.contact-cta h2 {
font-size: 56px;
}
.contact-cta a {
width: 100%;
box-sizing: border-box;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.contact-submit,
.contact-link,
.contact-custom__copy a,
.contact-cta a {
transition: none;
}
}
/* =========================================================
SELF. STUDIOS NYC
PACKAGES PAGE
========================================================= */
.packages-page {
width: 100%;
margin: 0;
padding: 0;
background: #F4F0E8;
color: #18202B;
}
/* =========================================================
HERO
========================================================= */
.packages-page-hero {
padding: 130px 0 75px;
background: #F4F0E8;
}
.packages-page-hero__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
.packages-page-eyebrow {
margin: 0 0 18px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.packages-page-hero h1 {
margin: 0;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: clamp(78px, 9vw, 145px);
font-weight: 400;
line-height: 0.88;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.packages-page-hero h1 span {
color: #B8A58C;
}
.packages-page-hero__copy {
max-width: 650px;
margin-top: 30px;
}
.packages-page-hero__copy p {
margin: 0 0 12px;
color: rgba(24, 32, 43, 0.72);
font-size: 16px;
line-height: 1.65;
}
/* =========================================================
PACKAGE OPTIONS
========================================================= */
.packages-page-options {
padding: 20px 0 95px;
background: #F4F0E8;
}
.packages-page-options__inner {
width: calc(100% - 120px);
max-width: 1600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
/* =========================================================
CARD
========================================================= */
.packages-page-card {
min-height: 760px;
display: grid;
grid-template-columns: 34% 66%;
overflow: hidden;
border: 1px solid #B8A58C;
}
/* ESSENTIAL */
.packages-page-card--essential {
background: #F4F0E8;
color: #18202B;
}
/* CREATIVE */
.packages-page-card--creative {
background: #18202B;
color: #FFFFFF;
box-shadow:
inset 0 0 0 8px #18202B,
inset 0 0 0 9px rgba(184, 165, 140, 0.85);
}
/* =========================================================
LOGO
========================================================= */
.packages-page-card__logo {
padding: 40px 25px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid rgba(184, 165, 140, 0.45);
}
.packages-page-card__logo img {
width: 185px;
max-width: 85%;
height: auto;
object-fit: contain;
}
/* =========================================================
CONTENT
========================================================= */
.packages-page-card__content {
padding: 48px;
display: flex;
flex-direction: column;
}
.packages-page-card__label {
margin: 0 0 10px;
color: #B8A58C;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
}
.packages-page-card h2 {
margin: 0;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(40px, 3.2vw, 56px);
font-weight: 400;
line-height: 0.94;
text-transform: uppercase;
}
/* =========================================================
PRICE
========================================================= */
.packages-page-card__price {
margin: 25px 0;
padding: 24px 0;
border-top: 1px solid rgba(184, 165, 140, 0.55);
border-bottom: 1px solid rgba(184, 165, 140, 0.55);
}
.packages-page-card__price > span {
display: block;
margin-bottom: 8px;
color: #B8A58C;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
}
.packages-page-card__price > div {
display: flex;
align-items: center;
gap: 18px;
}
.packages-page-card__price strong,
.packages-page-card__price b {
font-family: Impact, "Arial Narrow", sans-serif;
font-size: 38px;
font-weight: 400;
line-height: 1;
}
.packages-page-card__price i {
display: block;
width: 1px;
height: 43px;
background: rgba(184, 165, 140, 0.75);
}
/* =========================================================
FEATURES
========================================================= */
.packages-page-card ul {
margin: 0 0 36px;
padding: 0;
list-style: none;
}
.packages-page-card li {
position: relative;
margin-bottom: 11px;
padding-left: 28px;
font-size: 14px;
line-height: 1.45;
}
.packages-page-card li::before {
content: "";
position: absolute;
left: 0;
top: -2px;
color: #B8A58C;
font-size: 18px;
}
/* =========================================================
PACKAGE BUTTONS
========================================================= */
.packages-page-card__button {
width: 100%;
min-height: 56px;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.packages-page-card__button:hover {
transform: translateY(-2px);
}
.packages-page-card__button--dark {
background: #18202B;
color: #FFFFFF;
border: 1px solid #18202B;
}
.packages-page-card__button--dark:hover {
background: transparent;
color: #18202B;
}
.packages-page-card__button--champagne {
background: #B8A58C;
color: #18202B;
border: 1px solid #B8A58C;
}
.packages-page-card__button--champagne:hover {
background: #F4F0E8;
}
/* =========================================================
DURATION
========================================================= */
.packages-duration {
padding: 90px 0;
background: #FFFFFF;
}
.packages-duration__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
.packages-duration__heading {
max-width: 800px;
margin-bottom: 50px;
}
.packages-duration__heading h2 {
margin: 0 0 22px;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(58px, 6vw, 92px);
font-weight: 400;
line-height: 0.92;
text-transform: uppercase;
}
.packages-duration__heading h2 span {
color: #B8A58C;
}
.packages-duration__heading > p:last-child {
max-width: 620px;
margin: 0;
color: rgba(24, 32, 43, 0.70);
font-size: 16px;
line-height: 1.65;
}
/* OPTIONS */
.packages-duration__options {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid rgba(24, 32, 43, 0.16);
border-left: 1px solid rgba(24, 32, 43, 0.16);
}
.packages-duration__item {
min-height: 260px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid rgba(24, 32, 43, 0.16);
border-bottom: 1px solid rgba(24, 32, 43, 0.16);
}
.packages-duration__item > span {
color: #B8A58C;
font-size: 12px;
font-weight: 700;
}
.packages-duration__item strong {
font-family: Impact, "Arial Narrow", sans-serif;
font-size: 42px;
font-weight: 400;
line-height: 0.95;
}
.packages-duration__item p {
max-width: 420px;
margin: 0;
color: rgba(24, 32, 43, 0.68);
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
PRINT NOTE
========================================================= */
.packages-print-note {
padding: 85px 0;
background: #F4F0E8;
}
.packages-print-note__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.65fr 1.35fr;
gap: 80px;
align-items: start;
}
.packages-print-note__number {
color: #B8A58C;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: 70px;
line-height: 1;
}
.packages-print-note__copy h2 {
margin: 0 0 22px;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(50px, 5vw, 78px);
font-weight: 400;
line-height: 0.94;
text-transform: uppercase;
}
.packages-print-note__copy h2 span {
color: #B8A58C;
}
.packages-print-note__copy p {
max-width: 650px;
margin: 0 0 13px;
color: rgba(24, 32, 43, 0.70);
font-size: 16px;
line-height: 1.65;
}
/* =========================================================
CUSTOM QUOTE
========================================================= */
.packages-custom {
padding: 95px 0;
background: #18202B;
color: #FFFFFF;
}
.packages-custom__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 100px;
align-items: start;
}
.packages-custom__eyebrow {
margin: 0 0 18px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.packages-custom__heading h2 {
margin: 0;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(62px, 7vw, 105px);
font-weight: 400;
line-height: 0.9;
text-transform: uppercase;
}
.packages-custom__heading h2 span {
color: #B8A58C;
}
.packages-custom__copy {
max-width: 650px;
}
.packages-custom__copy p {
margin: 0 0 16px;
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
line-height: 1.7;
}
.packages-custom__lead {
color: #FFFFFF !important;
font-size: 19px !important;
font-weight: 600;
}
.packages-custom__button {
min-width: 200px;
height: 56px;
margin-top: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 30px;
background: #B8A58C;
color: #18202B;
border: 1px solid #B8A58C;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.packages-custom__button:hover {
background: transparent;
color: #FFFFFF;
transform: translateY(-2px);
}
/* =========================================================
FINAL CTA
========================================================= */
.packages-page-cta {
padding: 85px 0;
background: #111111;
color: #FFFFFF;
text-align: center;
}
.packages-page-cta__inner {
width: calc(100% - 40px);
max-width: 1100px;
margin: 0 auto;
}
.packages-page-cta__inner > p {
margin: 0 0 14px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
}
.packages-page-cta h2 {
margin: 0 0 30px;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(58px, 7vw, 100px);
font-weight: 400;
line-height: 0.92;
text-transform: uppercase;
}
.packages-page-cta h2 span {
color: #B8A58C;
}
.packages-page-cta a {
min-width: 190px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #B8A58C;
color: #18202B;
border: 1px solid #B8A58C;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.packages-page-hero__inner,
.packages-duration__inner,
.packages-print-note__inner,
.packages-custom__inner {
width: calc(100% - 60px);
}
.packages-page-options__inner {
width: calc(100% - 60px);
grid-template-columns: 1fr;
}
.packages-print-note__inner,
.packages-custom__inner {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.packages-page-hero {
padding: 110px 0 55px;
text-align: center;
}
.packages-page-hero__inner,
.packages-page-options__inner,
.packages-duration__inner,
.packages-print-note__inner,
.packages-custom__inner {
width: calc(100% - 36px);
}
.packages-page-hero h1 {
font-size: clamp(62px, 19vw, 88px);
}
.packages-page-hero__copy {
margin-left: auto;
margin-right: auto;
}
/* CARDS */
.packages-page-card {
min-height: auto;
grid-template-columns: 1fr;
}
.packages-page-card__logo {
min-height: 175px;
border-right: 0;
border-bottom: 1px solid rgba(184, 165, 140, 0.45);
}
.packages-page-card__logo img {
width: 150px;
}
.packages-page-card__content {
padding: 34px 26px;
}
/* DURATION */
.packages-duration {
padding: 65px 0;
}
.packages-duration__heading {
text-align: center;
}
.packages-duration__options {
grid-template-columns: 1fr;
}
/* PRINT */
.packages-print-note {
padding: 65px 0;
}
.packages-print-note__inner {
text-align: center;
}
.packages-print-note__number {
font-size: 50px;
}
/* CUSTOM */
.packages-custom {
padding: 70px 0;
text-align: center;
}
.packages-custom__copy {
margin: 0 auto;
}
.packages-custom__button {
width: 100%;
}
/* CTA */
.packages-page-cta {
padding: 70px 0;
}
.packages-page-cta h2 {
font-size: 56px;
}
.packages-page-cta a {
width: 100%;
}
}
/* =========================================================
SELF. STUDIOS NYC
HOW IT WORKS PAGE
========================================================= */
.how-page {
width: 100%;
margin: 0;
padding: 0;
background: #F4F0E8;
color: #18202B;
}
/* =========================================================
HERO
========================================================= */
.how-page-hero {
padding: 130px 0 75px;
}
.how-page-hero__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
.how-page-eyebrow {
margin: 0 0 18px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.how-page-hero h1 {
margin: 0;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: clamp(76px, 8.5vw, 138px);
font-weight: 400;
line-height: 0.90;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.how-page-hero h1 span {
color: #B8A58C;
}
.how-page-hero__copy {
max-width: 650px;
margin-top: 28px;
}
.how-page-hero__copy p {
margin: 0 0 12px;
color: rgba(24, 32, 43, 0.70);
font-size: 16px;
line-height: 1.65;
}
.how-page-hero__copy p:first-child {
color: #18202B;
font-size: 18px;
font-weight: 700;
}
/* =========================================================
STEPS
========================================================= */
.how-steps {
padding: 0 0 90px;
background: #FFFFFF;
}
.how-steps__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
/* =========================================================
STEP
========================================================= */
.how-step {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
gap: 60px;
padding: 65px 0;
border-top: 1px solid rgba(24, 32, 43, 0.16);
}
.how-step:last-child {
border-bottom: 1px solid rgba(24, 32, 43, 0.16);
}
/* NUMBER */
.how-step__number {
color: #B8A58C;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: 58px;
line-height: 1;
}
/* CONTENT */
.how-step__content {
max-width: 820px;
}
.how-step__eyebrow {
margin: 0 0 13px;
color: #B8A58C;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.how-step__content h2 {
margin: 0 0 26px;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: clamp(50px, 5vw, 78px);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.how-step__content h2 span {
color: #B8A58C;
}
.how-step__content p {
max-width: 720px;
margin: 0 0 15px;
color: rgba(24, 32, 43, 0.70);
font-size: 16px;
line-height: 1.7;
}
.how-step__content a {
display: inline-block;
margin-top: 12px;
padding-bottom: 4px;
color: #18202B;
border-bottom: 1px solid #B8A58C;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* =========================================================
DARK FEATURE STEP
========================================================= */
.how-step--dark {
margin: 0 -50px;
padding: 65px 50px;
background: #18202B;
color: #FFFFFF;
border-top: 0;
}
.how-step--dark .how-step__content h2 {
color: #FFFFFF;
}
.how-step--dark .how-step__content p {
color: rgba(255, 255, 255, 0.70);
}
/* =========================================================
CUSTOM
========================================================= */
.how-custom {
padding: 90px 0;
background: #F4F0E8;
}
.how-custom__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 100px;
}
.how-custom__heading h2 {
margin: 0;
font-family: Impact, "Arial Narrow", Arial, sans-serif;
font-size: clamp(60px, 7vw, 100px);
font-weight: 400;
line-height: 0.90;
text-transform: uppercase;
}
.how-custom__heading h2 span {
color: #B8A58C;
}
.how-custom__copy {
max-width: 650px;
}
.how-custom__copy p {
margin: 0 0 16px;
color: rgba(24, 32, 43, 0.70);
font-size: 16px;
line-height: 1.7;
}
.how-custom__lead {
color: #18202B !important;
font-size: 19px !important;
font-weight: 700;
}
.how-custom__copy a {
min-width: 200px;
height: 56px;
margin-top: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 30px;
background: #18202B;
color: #FFFFFF;
border: 1px solid #18202B;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.how-custom__copy a:hover {
background: transparent;
color: #18202B;
transform: translateY(-2px);
}
/* =========================================================
FINAL CTA
========================================================= */
.how-page-cta {
padding: 90px 0;
background: #18202B;
color: #FFFFFF;
text-align: center;
}
.how-page-cta__inner {
width: calc(100% - 40px);
max-width: 1100px;
margin: 0 auto;
}
.how-page-cta__inner > p {
margin: 0 0 15px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.how-page-cta h2 {
margin: 0 0 30px;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(58px, 7vw, 100px);
font-weight: 400;
line-height: 0.92;
text-transform: uppercase;
}
.how-page-cta h2 span {
color: #B8A58C;
}
.how-page-cta a {
min-width: 190px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 30px;
background: #B8A58C;
color: #18202B;
border: 1px solid #B8A58C;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.how-page-hero__inner,
.how-steps__inner,
.how-custom__inner {
width: calc(100% - 60px);
}
.how-step {
grid-template-columns: 110px minmax(0, 1fr);
gap: 40px;
}
.how-custom__inner {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.how-page-hero {
padding: 110px 0 55px;
text-align: center;
}
.how-page-hero__inner,
.how-steps__inner,
.how-custom__inner {
width: calc(100% - 36px);
}
.how-page-hero h1 {
font-size: clamp(58px, 18vw, 84px);
line-height: 0.92;
}
.how-page-hero__copy {
margin-left: auto;
margin-right: auto;
}
/* STEPS */
.how-step {
display: block;
padding: 45px 0;
text-align: center;
}
.how-step__number {
margin-bottom: 20px;
font-size: 40px;
}
.how-step__content h2 {
font-size: 48px;
}
.how-step__content p {
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
/* DARK STEP */
.how-step--dark {
margin: 0 -18px;
padding: 45px 18px;
}
/* CUSTOM */
.how-custom {
padding: 65px 0;
text-align: center;
}
.how-custom__copy {
margin: 0 auto;
}
.how-custom__copy a {
width: 100%;
}
/* CTA */
.how-page-cta {
padding: 70px 0;
}
.how-page-cta h2 {
font-size: 54px;
}
.how-page-cta a {
width: 100%;
}
}
/* =========================================================
SELF. COMING SOON  MINIMAL
========================================================= */
.self-coming-soon-page {
margin: 0;
padding: 0;
background: #F4F0E8;
color: #18202B;
overflow-x: hidden;
}
/* HIDE ANY THEME ELEMENTS THAT SNEAK IN */
.self-coming-soon-page header,
.self-coming-soon-page footer,
.self-coming-soon-page .site-header,
.self-coming-soon-page .site-footer,
.self-coming-soon-page #site-header,
.self-coming-soon-page #site-footer {
display: none !important;
}
/* =========================================================
FULL SCREEN
========================================================= */
.self-coming-minimal {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 60px 40px;
background: #F4F0E8;
}
.self-coming-minimal__inner {
width: 100%;
max-width: 1800px;
margin: 0 auto;
text-align: center;
}
/* =========================================================
TOP LINE
========================================================= */
.self-coming-minimal__eyebrow {
margin: 0 0 34px;
color: #B8A58C;
font-size: 30px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
}
/* =========================================================
COUNTDOWN
========================================================= */
.self-coming-minimal__countdown {
width: 100%;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 0;
align-items: end;
}
.self-coming-minimal__time {
position: relative;
padding: 0 20px;
}
.self-coming-minimal__time:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 10%;
width: 1px;
height: 72%;
background:
rgba(
24,
32,
43,
0.16
);
}
.self-coming-minimal__time strong {
display: block;
margin: 0;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size:
clamp(
90px,
14vw,
230px
);
font-weight: 400;
line-height: 0.78;
letter-spacing: -0.035em;
}
.self-coming-minimal__time span {
display: block;
margin-top: 20px;
color:
rgba(
24,
32,
43,
0.48
);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* =========================================================
THREE STATEMENTS
========================================================= */
.self-coming-minimal__statements {
width: 100%;
margin-top: 55px;
padding-top: 28px;
display: grid;
grid-template-columns:
repeat(3, 1fr);
border-top:
1px solid
rgba(
24,
32,
43,
0.18
);
}
.self-coming-minimal__statements span {
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size:
clamp(
30px,
3.4vw,
62px
);
font-weight: 400;
line-height: 1;
text-transform: uppercase;
}
.self-coming-minimal__statements
span:nth-child(3) {
color: #B8A58C;
}
/* =========================================================
OPENING DATE
========================================================= */
.self-coming-minimal__date {
width: 100%;
margin-top: 42px;
padding: 22px 0;
background: #18202B;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.self-coming-minimal {
padding:
40px
18px;
}
.self-coming-minimal__eyebrow {
margin-bottom: 30px;
font-size: 9px;
line-height: 1.6;
letter-spacing: 0.13em;
}
.self-coming-minimal__countdown {
grid-template-columns:
repeat(2, 1fr);
row-gap: 38px;
}
.self-coming-minimal__time {
padding: 0 10px;
}
.self-coming-minimal__time strong {
font-size:
clamp(
68px,
23vw,
105px
);
line-height: 0.82;
}
.self-coming-minimal__time span {
margin-top: 12px;
font-size: 8px;
}
.self-coming-minimal__time:nth-child(2)::after {
display: none;
}
.self-coming-minimal__time:nth-child(3)::before,
.self-coming-minimal__time:nth-child(4)::before {
content: "";
position: absolute;
left: 15%;
top: -20px;
width: 70%;
height: 1px;
background:
rgba(
24,
32,
43,
0.13
);
}
.self-coming-minimal__statements {
margin-top: 45px;
padding-top: 25px;
grid-template-columns: 1fr;
gap: 14px;
}
.self-coming-minimal__statements span {
font-size: 35px;
}
.self-coming-minimal__date {
margin-top: 35px;
padding: 18px 10px;
box-sizing: border-box;
font-size: 10px;
letter-spacing: 0.16em;
}
}
/* =========================================================
SELF. STUDIOS NYC
404 PAGE
========================================================= */
.self-404-page {
width: 100%;
margin: 0;
padding: 0;
background: #F4F0E8;
color: #18202B;
}
/* =========================================================
MAIN
========================================================= */
.self-404 {
min-height: calc(100vh - 160px);
display: flex;
align-items: center;
justify-content: center;
padding: 100px 40px;
box-sizing: border-box;
background: #F4F0E8;
text-align: center;
}
.self-404__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* =========================================================
404 NUMBER
========================================================= */
.self-404__code {
margin: 0 0 18px;
color: #B8A58C;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: clamp(90px, 12vw, 190px);
font-weight: 400;
line-height: 0.8;
letter-spacing: -0.03em;
}
/* =========================================================
HEADING
========================================================= */
.self-404 h1 {
margin: 0;
color: #18202B;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: clamp(64px, 7.5vw, 120px);
font-weight: 400;
line-height: 0.9;
letter-spacing: -0.025em;
text-transform: uppercase;
}
.self-404 h1 span {
color: #B8A58C;
}
/* =========================================================
COPY
========================================================= */
.self-404__copy {
max-width: 600px;
margin: 28px auto 0;
color: rgba(24, 32, 43, 0.68);
font-size: 16px;
line-height: 1.7;
}
/* =========================================================
BUTTONS
========================================================= */
.self-404__actions {
margin-top: 34px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.self-404__button {
min-width: 180px;
min-height: 54px;
padding: 0 28px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.self-404__button--dark {
background: #18202B;
color: #FFFFFF;
border: 1px solid #18202B;
}
.self-404__button--dark:hover {
background: transparent;
color: #18202B;
transform: translateY(-2px);
}
.self-404__button--light {
background: transparent;
color: #18202B;
border: 1px solid rgba(24, 32, 43, 0.28);
}
.self-404__button--light:hover {
background: #18202B;
color: #FFFFFF;
border-color: #18202B;
transform: translateY(-2px);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.self-404 {
min-height: calc(100vh - 120px);
padding: 80px 18px;
}
.self-404__code {
font-size: 100px;
}
.self-404 h1 {
font-size: 58px;
line-height: 0.92;
}
.self-404__copy {
max-width: 340px;
font-size: 15px;
}
.self-404__actions {
width: 100%;
flex-direction: column;
}
.self-404__button {
width: 100%;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.self-404__button {
transition: none;
}
}
/* =========================================================
COMING SOON LOGO
========================================================= */
.self-coming-minimal__logo {
width: 100%;
margin: 0 0 100px;
display: flex;
justify-content: center;
align-items: center;
}
.self-coming-minimal__logo img {
display: block;
width: clamp(200px, 20vw, 350px);
height: auto;
object-fit: contain;
}
/* =========================================================
SELF. STUDIOS NYC
THANK YOU PAGE
========================================================= */
.self-thankyou-page {
width: 100%;
margin: 0;
padding: 0;
background: #F4F0E8;
color: #18202B;
}
/* =========================================================
MAIN
========================================================= */
.self-thankyou {
min-height: calc(100vh - 160px);
display: flex;
align-items: center;
justify-content: center;
padding: 100px 40px;
box-sizing: border-box;
}
.self-thankyou__inner {
width: 100%;
max-width: 1050px;
margin: 0 auto;
text-align: center;
}
/* =========================================================
EYEBROW
========================================================= */
.self-thankyou__eyebrow {
margin: 0 0 26px;
color: #B8A58C;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
}
/* =========================================================
TITLE
========================================================= */
.self-thankyou h1 {
margin: 0;
color: #18202B;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: clamp(90px, 13vw, 210px);
font-weight: 400;
line-height: 0.82;
letter-spacing: -0.035em;
text-transform: uppercase;
}
/* =========================================================
LINE
========================================================= */
.self-thankyou__line {
width: 55px;
height: 1px;
margin: 45px auto;
background: #B8A58C;
}
/* =========================================================
TEXT
========================================================= */
.self-thankyou__lead {
margin: 0 0 12px;
font-size: 21px;
font-weight: 600;
line-height: 1.4;
}
.self-thankyou__copy {
max-width: 540px;
margin: 0 auto;
color: rgba(24, 32, 43, 0.68);
font-size: 15px;
line-height: 1.75;
}
.self-thankyou__note {
margin: 18px auto 0;
color: rgba(24, 32, 43, 0.48);
font-size: 12px;
line-height: 1.6;
}
/* =========================================================
BUTTONS
========================================================= */
.self-thankyou__actions {
margin-top: 38px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.self-thankyou__button {
min-width: 190px;
min-height: 54px;
padding: 0 28px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-decoration: none;
text-transform: uppercase;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.self-thankyou__button--dark {
background: #18202B;
border: 1px solid #18202B;
color: #FFFFFF;
}
.self-thankyou__button--outline {
background: transparent;
border: 1px solid rgba(24, 32, 43, 0.30);
color: #18202B;
}
.self-thankyou__button:hover {
transform: translateY(-2px);
}
.self-thankyou__button--dark:hover {
background: transparent;
color: #18202B;
}
.self-thankyou__button--outline:hover {
background: #18202B;
border-color: #18202B;
color: #FFFFFF;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.self-thankyou {
min-height: calc(100vh - 120px);
padding: 75px 20px;
}
.self-thankyou__eyebrow {
margin-bottom: 22px;
font-size: 9px;
}
.self-thankyou h1 {
font-size: 88px;
}
.self-thankyou__line {
margin: 35px auto;
}
.self-thankyou__lead {
font-size: 18px;
}
.self-thankyou__copy {
max-width: 350px;
font-size: 14px;
}
.self-thankyou__actions {
width: 100%;
flex-direction: column;
}
.self-thankyou__button {
width: 100%;
}
}
/* =========================================================
SELF. LEGAL PAGES
PRIVACY + TERMS
========================================================= */
.legal-page {
width: 100%;
margin: 0;
padding: 0;
background: #F4F0E8;
color: #18202B;
}
/* =========================================================
HERO
========================================================= */
.legal-hero {
padding: 130px 0 75px;
}
.legal-hero__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
.legal-eyebrow {
margin: 0 0 18px;
color: #B8A58C;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.legal-hero h1 {
margin: 0;
color: #18202B;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: clamp(72px, 8vw, 132px);
font-weight: 400;
line-height: 0.9;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.legal-hero h1 span {
color: #B8A58C;
}
.legal-hero__copy {
max-width: 650px;
margin: 28px 0 0;
color: rgba(24, 32, 43, 0.70);
font-size: 17px;
line-height: 1.7;
}
.legal-updated {
margin: 24px 0 0;
color: rgba(24, 32, 43, 0.45);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* =========================================================
CONTENT
========================================================= */
.legal-content {
padding: 0 0 90px;
background: #FFFFFF;
}
.legal-content__inner {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
}
/* =========================================================
SECTION
========================================================= */
.legal-section {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 60px;
padding: 48px 0;
border-top:
1px solid
rgba(24, 32, 43, 0.16);
}
.legal-section:last-child {
border-bottom:
1px solid
rgba(24, 32, 43, 0.16);
}
.legal-section > span {
color: #B8A58C;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: 46px;
line-height: 1;
}
.legal-section > div {
max-width: 850px;
}
.legal-section h2 {
margin: 0 0 18px;
color: #18202B;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: 34px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
}
.legal-section p {
margin: 0 0 14px;
color: rgba(24, 32, 43, 0.70);
font-size: 16px;
line-height: 1.75;
}
.legal-section p:last-child {
margin-bottom: 0;
}
.legal-section a {
display: inline-block;
margin-top: 8px;
padding-bottom: 3px;
color: #18202B;
border-bottom: 1px solid #B8A58C;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.legal-hero__inner,
.legal-content__inner {
width: calc(100% - 60px);
}
.legal-section {
grid-template-columns: 100px minmax(0, 1fr);
gap: 35px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.legal-hero {
padding: 110px 0 55px;
text-align: center;
}
.legal-hero__inner,
.legal-content__inner {
width: calc(100% - 36px);
}
.legal-eyebrow {
font-size: 11px;
}
.legal-hero h1 {
font-size: 58px;
line-height: 0.92;
}
.legal-hero__copy {
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
.legal-section {
display: block;
padding: 36px 0;
text-align: center;
}
.legal-section > span {
display: block;
margin-bottom: 16px;
font-size: 34px;
}
.legal-section > div {
max-width: 100%;
}
.legal-section h2 {
font-size: 28px;
}
.legal-section p {
font-size: 15px;
line-height: 1.7;
}
}
/* =========================================================
SELF. STUDIOS NYC
FOOTER  COMPLETE
========================================================= */
.self-footer,
.self-footer *,
.self-footer *::before,
.self-footer *::after {
box-sizing: border-box;
}
/* =========================================================
RESET OLD FOOTER STYLES
========================================================= */
.self-footer {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #101010 !important;
color: #FFFFFF !important;
overflow: hidden;
}
/* REMOVE OLD DECORATIVE FOOTER LAYERS */
.self-footer::before,
.self-footer::after {
display: none !important;
content: none !important;
}
/* =========================================================
INNER
========================================================= */
.self-footer__inner {
width: calc(100% - 120px);
max-width: 1600px;
margin: 0 auto !important;
padding: 64px 0 28px !important;
}
/* =========================================================
MAIN GRID
========================================================= */
.self-footer__grid {
width: 100%;
display: grid;
grid-template-columns:
minmax(280px, 1.45fr)
minmax(110px, 0.55fr)
minmax(110px, 0.55fr)
minmax(130px, 0.60fr)
minmax(290px, 1.10fr);
gap: 52px;
align-items: start;
}
.self-footer__location,
.self-footer__location-item {
font-size: 12px;
}
/* =========================================================
BRAND
========================================================= */
.self-footer__brand {
max-width: 390px;
}
.self-footer__logo {
display: inline-block;
margin: 0 !important;
padding: 0 !important;
color: #FFFFFF !important;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: clamp(60px, 5vw, 84px);
font-weight: 400;
line-height: 0.82;
letter-spacing: -0.03em;
text-decoration: none !important;
text-transform: uppercase;
}
.self-footer__tagline {
margin: 24px 0 0 !important;
color: #BDA88D !important;
font-size: 10px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.self-footer__description {
max-width: 350px;
margin: 18px 0 0 !important;
color: rgba(255, 255, 255, 0.55) !important;
font-size: 13px;
line-height: 1.75;
}
/* =========================================================
SMALL COLUMN TITLES
========================================================= */
.self-footer__title {
margin: 0 0 18px !important;
color: #BDA88D !important;
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* =========================================================
NAVIGATION
========================================================= */
.self-footer__nav {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.self-footer__nav a {
display: inline-block;
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.68) !important;
font-size: 12px;
font-weight: 400;
line-height: 1.55;
text-decoration: none !important;
transition:
color 0.2s ease,
transform 0.2s ease;
}
.self-footer__nav a:hover {
color: #FFFFFF !important;
transform: translateX(3px);
}
/* =========================================================
SOCIAL
========================================================= */
.self-footer__follow {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 13px;
}
.self-footer__social-link {
display: inline-flex !important;
align-items: center;
gap: 10px;
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.72) !important;
font-size: 12px;
font-weight: 500;
text-decoration: none !important;
transition:
color 0.2s ease,
transform 0.2s ease;
}
.self-footer__social-link:hover {
color: #FFFFFF !important;
transform: translateX(3px);
}
/* ICON */
.self-footer__social-link svg {
display: block;
width: 18px;
height: 18px;
flex: 0 0 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.self-footer__social-fill {
fill: currentColor !important;
stroke: none !important;
}
/* =========================================================
CTA
========================================================= */
.self-footer__cta {
max-width: 340px;
}
.self-footer__cta h2 {
margin: 0 !important;
color: #FFFFFF !important;
font-family:
Impact,
"Arial Narrow",
Arial,
sans-serif;
font-size: clamp(42px, 3.6vw, 62px);
font-weight: 400;
line-height: 0.91;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.self-footer__cta h2 span {
color: #BDA88D !important;
}
.self-footer__cta-copy {
max-width: 310px;
margin: 20px 0 0 !important;
color: rgba(255, 255, 255, 0.52) !important;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
BUTTON
========================================================= */
.self-footer__button {
min-width: 175px;
height: 48px;
margin: 24px 0 0 !important;
padding: 0 24px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: #BDA88D !important;
border: 1px solid #BDA88D !important;
border-radius: 0 !important;
color: #18202B !important;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-decoration: none !important;
text-transform: uppercase;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.self-footer__button:hover {
background: transparent !important;
border-color: rgba(255,255,255,0.65) !important;
color: #FFFFFF !important;
}
/* =========================================================
BOTTOM
========================================================= */
.self-footer__bottom {
width: 100%;
margin-top: 58px;
padding-top: 24px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 45px;
border-top:
1px solid
rgba(255,255,255,0.13);
}
/* =========================================================
LEGAL LINKS
========================================================= */
.self-footer__legal {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 22px;
}
.self-footer__legal a {
margin: 0 !important;
padding: 0 !important;
color: rgba(255,255,255,0.44) !important;
font-size: 12px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.09em;
text-decoration: none !important;
text-transform: uppercase;
}
.self-footer__legal a:hover {
color: #FFFFFF !important;
}
/* =========================================================
COPYRIGHT
========================================================= */
.self-footer__copyright {
max-width: 560px;
text-align: right;
}
.self-footer__copyright p {
margin: 0 !important;
}
.self-footer__copyright p:first-child {
color: rgba(255,255,255,0.50) !important;
font-size: 12px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.self-footer__copyright p:last-child {
margin-top: 6px !important;
color: rgba(255,255,255,0.25) !important;
font-size: 12px;
line-height: 1.55;
}
/* =========================================================
FOCUS
========================================================= */
.self-footer a:focus-visible {
outline:
1px solid
#BDA88D !important;
outline-offset: 5px;
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1200px) {
.self-footer__inner {
width: calc(100% - 70px);
}
.self-footer__grid {
grid-template-columns:
1.35fr
0.65fr
0.65fr
0.65fr;
gap: 45px;
}
.self-footer__cta {
grid-column: 1 / -1;
max-width: 520px;
padding-top: 12px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 800px) {
.self-footer__inner {
width: calc(100% - 44px);
padding-top: 55px !important;
}
.self-footer__grid {
grid-template-columns:
1fr
1fr;
gap: 45px 30px;
}
.self-footer__brand {
grid-column: 1 / -1;
}
.self-footer__cta {
grid-column: 1 / -1;
padding-top: 20px;
}
.self-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.self-footer__copyright {
max-width: 520px;
text-align: left;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 520px) {
.self-footer__inner {
width: calc(100% - 36px);
padding:
48px
0
24px !important;
}
.self-footer__grid {
display: block;
}
.self-footer__brand {
margin-bottom: 44px;
}
.self-footer__logo {
font-size: 68px;
}
.self-footer__nav,
.self-footer__follow {
margin-bottom: 36px;
}
.self-footer__cta {
margin-top: 48px;
padding-top: 40px;
border-top:
1px solid
rgba(255,255,255,0.12);
}
.self-footer__cta h2 {
font-size: 50px;
}
.self-footer__button {
width: 100%;
}
.self-footer__bottom {
margin-top: 50px;
}
.self-footer__legal {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.self-footer a {
transition: none !important;
}
}
/* =========================================================
HOW IT WORKS
========================================================= */
.how-it-works {
width: 100%;
background: #f4efe7;
padding: 30px 0 10px;
}
.how-it-works__inner {
width: min(1450px, calc(100% - 96px));
margin: 0 auto;
}
.how-it-works__heading {
margin-bottom: 70px;
}
.how-it-works__heading .section-label {
margin: 0 0 18px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.how-it-works__heading h2 {
margin: 0;
font-size: clamp(34px, 4vw, 58px);
line-height: 0.98;
font-weight: 800;
letter-spacing: -0.035em;
text-transform: uppercase;
}
.how-it-works__heading h2 span {
font-weight: 500;
}
.how-it-works__steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 36px;
width: 100%;
}
.self-step {
position: relative;
padding-top: 24px;
border-top: 1px solid rgba(20, 25, 32, 0.22);
}
.self-step__number {
display: block;
margin-bottom: 34px;
font-size: 12px;
letter-spacing: 0.08em;
}
.self-step h3 {
margin: 0 0 14px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.self-step p {
margin: 0;
max-width: 210px;
font-size: 14px;
line-height: 1.6;
}
.how-it-works__footer {
margin-top: 70px;
padding-top: 24px;
border-top: 1px solid rgba(20, 25, 32, 0.22);
}
.how-it-works__footer p {
margin: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.how-it-works {
padding: 80px 0;
}
.how-it-works__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 50px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.how-it-works {
padding: 64px 0;
}
.how-it-works__inner {
width: min(100% - 32px, 1180px);
}
.how-it-works__heading {
margin-bottom: 48px;
}
.how-it-works__heading h2 {
font-size: 34px;
}
.how-it-works__steps {
grid-template-columns: 1fr;
gap: 36px;
}
.self-step__number {
margin-bottom: 20px;
}
.how-it-works__footer {
margin-top: 48px;
}
}
/* =========================================================
COMING SOON SOCIAL
========================================================= */
.self-coming-minimal__social {
margin-top: 40px;
text-align: center;
}
.self-coming-minimal__social-title {
margin: 0 0 14px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.16em;
line-height: 1.2;
text-transform: uppercase;
color: #111;
}
.self-coming-minimal__social-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.self-coming-minimal__social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
color: #111;
text-decoration: none;
transition: opacity 0.2s ease;
}
.self-coming-minimal__social-icons i {
font-size: 22px;
line-height: 1;
}
.self-coming-minimal__social-icons a:hover {
opacity: 0.5;
}

/* =========================================================
   SELF. SITE-WIDE SEARCH — COMPACT
========================================================= */


/* =========================================================
   HEADER SEARCH ICON
========================================================= */

.site-search-toggle {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 0;
    border-radius: 0;

    color: #18202B;

    cursor: pointer;
}

.site-search-toggle svg {
    display: block;

    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SEARCH CONTAINER
========================================================= */

.self-search-bar {
    position: absolute;

    z-index: 900;

    top: 92px;
    left: 0;

    width: 100%;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transform: translateY(-5px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
}


/* WordPress admin bar */

body.admin-bar .self-search-bar {
    top: 124px;
}


.self-search-bar.is-open {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);
}


/* =========================================================
   SEARCH STRIP
========================================================= */

.self-search-bar__search {
    width: 100%;

    background: #F8F5EF;

    border-top:
        1px solid
        rgba(24, 32, 43, 0.08);

    border-bottom:
        1px solid
        rgba(24, 32, 43, 0.12);

    box-shadow:
        0 5px 15px
        rgba(17, 17, 17, 0.035);
}


.self-search-bar__search-inner {
    width: calc(100% - 160px);
    max-width: 1600px;

    height: 72px;
    min-height: 72px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        40px;

    align-items: center;

    gap: 18px;
}


/* =========================================================
   SEARCH ICON
========================================================= */

.self-search-bar__icon {
    display: block;

    width: 23px;
    height: 23px;

    fill: none;
    stroke: #18202B;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.self-search-bar__input {
    width: 100%;
    height: 46px;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
    border-bottom: 1px solid #B8A58C;
    border-radius: 0;

    outline: none;
    box-shadow: none;

    appearance: none;
    -webkit-appearance: none;

    color: #18202B;

    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}


.self-search-bar__input::placeholder {
    color: rgba(24, 32, 43, 0.42);

    opacity: 1;
}


.self-search-bar__input:focus {
    border-bottom-color: #18202B;
}


.self-search-bar__input::-webkit-search-cancel-button {
    display: none;
}


/* =========================================================
   CLOSE
========================================================= */

.self-search-bar__close {
    position: relative;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    cursor: pointer;
}


.self-search-bar__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 21px;
    height: 1px;

    background: #18202B;
}


.self-search-bar__close span:first-child {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.self-search-bar__close span:last-child {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* =========================================================
   RESULTS PANEL
========================================================= */

.self-search-bar__results-wrap {
    display: none;

    width: 100%;

    background: #FFFFFF;

    border-bottom:
        1px solid
        rgba(24, 32, 43, 0.12);

    box-shadow:
        0 18px 30px
        rgba(17, 17, 17, 0.10);
}


.self-search-bar.has-results
.self-search-bar__results-wrap {
    display: block;
}


.self-search-bar__results-inner {
    width: calc(100% - 300px);
    max-width: 1300px;

    margin: 0 auto;

    padding: 8px 0 18px;
}


/* =========================================================
   STATUS
========================================================= */

.self-search-bar__status {
    min-height: 0;

    margin: 0;

    padding: 10px 0 4px;

    color: rgba(24, 32, 43, 0.48);

    font-size: 11px;
    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* =========================================================
   SEARCH RESULT
========================================================= */

.self-search-result {
    position: relative;

    display: block;

    width: 100%;

    margin: 0;

    padding:
        15px
        60px
        15px
        0;

    border-bottom:
        1px solid
        rgba(24, 32, 43, 0.11);

    color: #18202B;

    text-align: left;
    text-decoration: none;

    transition:
        padding-left 0.18s ease,
        background 0.18s ease;
}


.self-search-result:last-child {
    border-bottom: 0;
}


.self-search-result:hover {
    padding-left: 8px;
}


/* PAGE LABEL */

.self-search-result__page {
    display: block;

    margin: 0 0 5px;

    color: #B29A78;

    font-size: 10px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


/* RESULT TITLE */

.self-search-result__title {
    display: block;

    margin: 0 0 4px;

    color: #18202B;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.3;
}


/* RESULT DESCRIPTION */

.self-search-result__snippet {
    max-width: 900px;

    margin: 0;

    color: rgba(24, 32, 43, 0.62);

    font-size: 13px;

    line-height: 1.5;
}


/* RESULT ARROW */

.self-search-result__arrow {
    position: absolute;

    top: 50%;
    right: 8px;

    transform: translateY(-50%);

    color: #18202B;

    font-size: 23px;
    font-weight: 300;

    line-height: 1;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.self-search-result mark {
    padding: 0 2px;

    background:
        rgba(184, 165, 140, 0.25);

    color: inherit;
}


/* =========================================================
   NO RESULTS
========================================================= */

.self-search-empty {
    padding: 26px 0 30px;

    text-align: left;
}


.self-search-empty strong {
    display: block;

    margin-bottom: 6px;

    color: #18202B;

    font-size: 17px;
}


.self-search-empty p {
    margin: 0 0 16px;

    color: rgba(24, 32, 43, 0.62);

    font-size: 13px;

    line-height: 1.5;
}


.self-search-empty a {
    display: inline-block;

    padding-bottom: 3px;

    border-bottom: 1px solid #B8A58C;

    color: #18202B;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.10em;

    text-decoration: none;
    text-transform: uppercase;
}


/* =========================================================
   MOBILE MENU SEARCH BUTTON
========================================================= */

.mobile-menu__search {
    display: none;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 1100px) {

    .site-header
    .site-search-toggle:not(.mobile-menu__search) {
        display: none;
    }


    .mobile-menu__search {
        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;

        display: flex;

        align-items: center;
        justify-content: flex-start;

        gap: 10px;

        background: transparent;

        border: 0;

        color: #18202B;

        font-size: 15px;
        font-weight: 700;

        text-align: left;

        text-transform: uppercase;

        cursor: pointer;
    }


    .mobile-menu__search svg {
        width: 19px;
        height: 19px;
    }

}


@media (max-width: 700px) {

    .self-search-bar {
        top: 80px;
    }


    body.admin-bar .self-search-bar {
        top: 126px;
    }


    .self-search-bar__search-inner {
        width: calc(100% - 32px);

        height: 64px;
        min-height: 64px;

        grid-template-columns:
            26px
            minmax(0, 1fr)
            34px;

        gap: 10px;
    }


    .self-search-bar__icon {
        width: 20px;
        height: 20px;
    }


    .self-search-bar__input {
        height: 42px;

        font-size: 16px;
    }


    .self-search-bar__close {
        width: 34px;
        height: 34px;
    }


    .self-search-bar__close span {
        width: 19px;
    }


    .self-search-bar__results-inner {
        width: calc(100% - 32px);

        padding:
            5px
            0
            12px;
    }


    .self-search-bar__status {
        padding-top: 8px;

        font-size: 9px;
    }


    .self-search-result {
        padding:
            14px
            36px
            14px
            0;
    }


    .self-search-result__page {
        font-size: 9px;
    }


    .self-search-result__title {
        font-size: 15px;
    }


    .self-search-result__snippet {
        font-size: 12px;

        line-height: 1.45;
    }


    .self-search-result__arrow {
        right: 2px;

        font-size: 21px;
    }

}


/* =========================================================
   SEARCH REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .self-search-bar,
    .self-search-result {
        transition: none;
    }

}

/* =========================================================
   HOMEPAGE HERO — MOBILE SPACING FIX
========================================================= */

@media (max-width: 650px) {

    .home-hero {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 150px !important;
        padding-bottom: 48px !important;
    }

    .home-hero__inner {
        min-height: 0 !important;
        height: auto !important;
        justify-content: flex-start !important;
    }

    .home-hero__content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}