/* Alicia Goes Brave + Juniper Counseling — shared design system Field Journal direction. ITC Cartier Book + Söhne (Cormorant Garamond + Inter as stand-ins). Two sites share this stylesheet; site-specific personality is set on . */ /* ─────────── TOKENS ─────────── */ :root { /* Brand colors — from Unified Brand & Website Master Document */ --juniper-green: #2F4A3A; --forest-mist: #4F6B57; --sage: #A7B8A1; --cream: #F5F1E8; --sand: #E6DDCF; --taupe: #B9ADA1; --poppy: #D94B3D; --poppy-deep: #D94A2B; --clay: #C97C6B; --blush: #E3B7B1; --terracotta: #B85C3B; --grass: #CBB97C; --berry: #7C84A3; --charcoal: #2B2B2B; /* Type stand-ins */ --serif: "Cormorant Garamond", "Garamond", "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; /* Editorial container */ --container: 1400px; --pad: clamp(1.25rem, 4vw, 4rem); /* Motion */ --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --reveal-duration: 1.1s; } /* Sunday Counseling — filled Assets + Visuals palette. AGB keeps Field Journal :root. */ .site-juniper { --poppy: #E33635; --poppy-deep: #CC302F; --cream: #F7F1E7; --sand: #E8DED0; --honey: #D9A441; --juniper-green: #52624F; --forest-mist: #52624F; --charcoal: #292725; --clay: #B96F65; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.65; color: var(--charcoal); background: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } ::selection { background: var(--poppy); color: var(--cream); } /* ─────────── REVEAL MOTION (both sites) ─────────── */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity var(--reveal-duration) var(--ease-soft), transform var(--reveal-duration) var(--ease-soft); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } .reveal--delay-1 { transition-delay: 0.12s; } .reveal--delay-2 { transition-delay: 0.24s; } .reveal--delay-3 { transition-delay: 0.36s; } /* ─────────── PARALLAX (AGB-only — set via body class) ─────────── */ .parallax-target { transform: translateY(var(--parallax-y, 0)); will-change: transform; } .site-juniper .parallax-target { transform: none !important; } /* Juniper is motion-quiet */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .parallax-target { transform: none !important; } } /* ─────────── NAV ─────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--pad); font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: background .35s var(--ease-soft), color .35s var(--ease-soft); } .nav--overlay { mix-blend-mode: difference; color: var(--cream); } .nav--solid { background: var(--cream); color: var(--juniper-green); border-bottom: 1px solid rgba(47,74,58,0.08); } .site-juniper .nav--solid { background: var(--cream); color: var(--juniper-green); } .site-juniper .nav--overlay { mix-blend-mode: normal; color: var(--juniper-green); background: transparent; border-bottom: none; } .nav__brand { display: inline-block; padding: 0.4rem 0; font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; } .nav__links { display: flex; gap: 2.5rem; } .nav__links a { opacity: 0.85; transition: opacity .2s; } .nav__links a:hover, .nav__links a.is-active { opacity: 1; } @media (max-width: 760px) { .nav__links { display: none; } } /* ─────────── HERO VARIANTS ─────────── */ /* Editorial: full-bleed (AGB) */ .hero { position: relative; height: 100vh; min-height: 720px; display: flex; align-items: flex-end; overflow: hidden; color: var(--cream); } .hero__img { position: absolute; inset: -10% 0 -10% 0; /* extra height for parallax */ background-size: cover; background-position: center; } .hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.50) 100%); } .hero__content { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad) clamp(3rem, 8vh, 6rem); } .hero__eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; margin-bottom: 1.25rem; } .hero__title { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.06; max-width: 22ch; margin-bottom: 2.5rem; } .hero__title em { font-style: italic; } .hero__subtitle { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); max-width: 50ch; opacity: 0.9; margin-bottom: 2.5rem; } .hero__ctas { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; } .hero__poppy { position: absolute; bottom: 2rem; right: var(--pad); width: 64px; height: 64px; } .hero__scroll { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); writing-mode: vertical-rl; font-family: var(--sans); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.7; } /* Contained: smaller (Juniper, sub-pages) */ .hero--contained { height: auto; min-height: 0; color: var(--juniper-green); display: block; padding: clamp(8rem, 18vh, 14rem) 0 clamp(5rem, 10vh, 9rem); background: var(--cream); } .hero--contained .hero__content { padding-bottom: 0; } .hero--contained .hero__eyebrow { color: var(--forest-mist); opacity: 1; } .hero--contained .hero__title { color: var(--juniper-green); max-width: 24ch; } .hero--contained .hero__subtitle { color: var(--charcoal); opacity: 0.78; font-style: italic; } /* Sunday Counseling: large, quiet, full-viewport hero */ .hero.hero--chill { height: auto; min-height: 100dvh; display: flex; align-items: flex-end; color: var(--juniper-green); background: var(--sand); padding-top: 6.25rem; } .hero--chill picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 0; } .hero--chill .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; z-index: 0; } .hero--chill::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, color-mix(in srgb, var(--cream) 52%, transparent) 0%, color-mix(in srgb, var(--cream) 40%, transparent) 36%, color-mix(in srgb, var(--cream) 74%, transparent) 68%, color-mix(in srgb, var(--cream) 96%, transparent) 100% ); } .hero--chill .hero__content { position: relative; z-index: 2; padding: 0 var(--pad) clamp(3.5rem, 10vh, 7rem); } .hero--chill .hero__eyebrow { text-transform: none; letter-spacing: 0.01em; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.1vw, 1.65rem); font-weight: 400; color: var(--charcoal); opacity: 0.88; margin-bottom: 1.5rem; } .hero--chill .hero__title { font-size: clamp(2.6rem, 6.2vw, 5.6rem); line-height: 0.98; max-width: 18ch; color: var(--charcoal); margin-bottom: 1.6rem; text-wrap: balance; } .hero--chill .hero__title em { color: var(--poppy); font-style: italic; } .hero--chill .hero__subtitle { color: var(--charcoal); opacity: 0.84; font-style: italic; max-width: 36ch; margin-bottom: 2.25rem; } .hero--chill .hero__subtitle strong { font-style: italic; font-weight: 500; } @media (max-width: 760px) { .hero--chill .hero__photo { object-position: center 58%; } .hero--chill .hero__title { max-width: 12ch; } } /* Juniper hero image: separate block, contained */ .hero-image { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); } .hero-image__wrap { position: relative; aspect-ratio: 21 / 9; overflow: hidden; } .hero-image__bg { position: absolute; inset: -10% 0 -10% 0; background-size: cover; background-position: center; } /* ─────────── BUTTONS ─────────── */ .btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 1.75rem; border: 1px solid currentColor; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; transition: background .25s var(--ease-soft), color .25s var(--ease-soft); cursor: pointer; background: transparent; } .btn--solid { background: var(--cream); color: var(--juniper-green); border-color: var(--cream); } .btn--solid:hover { background: var(--poppy); border-color: var(--poppy); color: var(--cream); } .btn--ghost { color: var(--cream); } .btn--ghost:hover { background: var(--cream); color: var(--juniper-green); } .btn--green { background: var(--juniper-green); color: var(--cream); border-color: var(--juniper-green); } .btn--green:hover { background: var(--forest-mist); border-color: var(--forest-mist); } .btn .arrow { width: 14px; height: 14px; } .site-juniper .btn--green { background: var(--poppy-deep); color: var(--cream); border-color: var(--poppy-deep); } .site-juniper .btn--green:hover { background: #B42827; border-color: #B42827; color: var(--cream); } .btn.is-loading, .btn[aria-busy="true"] { opacity: 0.65; pointer-events: none; } /* ─────────── SECTION SCAFFOLD ─────────── */ section { padding: clamp(5rem, 12vh, 9rem) 0; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); } .wrap--narrow { max-width: 880px; } .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest-mist); margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: 0.75rem; } .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; } .site-juniper .eyebrow::before { background: var(--honey); } .eyebrow--center { justify-content: center; } /* ─────────── INTRO (editorial moment) ─────────── */ .intro { background: var(--cream); } .intro__line { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3.8vw, 3.2rem); line-height: 1.25; color: var(--juniper-green); margin: 0 0 3rem; letter-spacing: -0.005em; } .intro__body { max-width: 56ch; color: var(--charcoal); font-size: 1.05rem; line-height: 1.75; } .intro__sig { margin-top: 2rem; font-family: var(--serif); font-style: italic; color: var(--juniper-green); font-size: 1.15rem; } /* ─────────── CARD GRIDS ─────────── */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; gap: 2rem; } .section-title { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--juniper-green); } .section-all { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--juniper-green); border-bottom: 1px solid currentColor; padding-bottom: 2px; } .grid { display: grid; gap: 2.5rem 2rem; } .grid--editorial { grid-template-columns: 1.6fr 1fr 1fr; } .grid--3up { grid-template-columns: repeat(3, 1fr); } .grid--2up { grid-template-columns: repeat(2, 1fr); } @media (max-width: 960px) { .grid--editorial, .grid--3up, .grid--2up { grid-template-columns: 1fr; } } .card { color: var(--juniper-green); display: flex; flex-direction: column; } .card__img { aspect-ratio: 4 / 5; width: 100%; background-size: cover; background-position: center; margin-bottom: 1.5rem; overflow: hidden; } .card--feature .card__img { aspect-ratio: 5 / 6; } .card--resource .card__img { aspect-ratio: 5 / 4; } .card__cat { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest-mist); margin-bottom: 0.5rem; } .card__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.18; margin-bottom: 0.75rem; } .card--feature .card__title { font-size: clamp(2rem, 3.4vw, 2.9rem); } .card__body { font-size: 1rem; line-height: 1.6; color: var(--charcoal); opacity: 0.78; margin-bottom: 0.75rem; } .card__quote { font-family: var(--serif); font-style: italic; color: var(--charcoal); opacity: 0.78; font-size: 1rem; line-height: 1.55; border-left: 1px solid var(--poppy); padding-left: 1rem; margin-top: 0.75rem; } .site-juniper .card__quote { border-left-color: var(--sage); } .card__read { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--juniper-green); margin-top: 1.25rem; display: inline-flex; gap: 0.5rem; align-items: center; } /* ─────────── BRIDGE (editorial 50/50 on dark) ─────────── */ .bridge { background: var(--juniper-green); color: var(--cream); } .site-juniper .bridge { background: var(--cream); color: var(--juniper-green); } .bridge .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } @media (max-width: 880px) { .bridge .wrap { grid-template-columns: 1fr; } } .bridge__img { aspect-ratio: 4 / 5; background-size: cover; background-position: center; overflow: hidden; } .bridge__eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7; display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; } .bridge__eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; } .bridge__title { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.12; margin-bottom: 2rem; } .bridge__title em { font-style: italic; color: var(--sage); } .site-juniper .bridge__title em { color: var(--poppy); } .bridge__body { max-width: 50ch; font-size: 1.05rem; line-height: 1.75; margin-bottom: 2.5rem; opacity: 0.92; } .bridge__mark { width: 56px; height: 56px; margin-bottom: 2rem; opacity: 0.85; } /* ─────────── BRAVE NOTES (Field Journal texture band) ─────────── */ .notes { background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(47,74,58,0.07) 34px 35px), linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%); text-align: center; position: relative; overflow: hidden; } .notes::before, .notes::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: var(--poppy); opacity: 0.04; filter: blur(40px); } .notes::before { top: 20%; left: 10%; } .notes::after { bottom: 20%; right: 10%; } .notes .wrap { max-width: 720px; position: relative; } .notes__title { font-size: clamp(2rem, 3.8vw, 3rem); color: var(--juniper-green); margin-bottom: 1.5rem; } .notes__title em { font-style: italic; } .notes__body { max-width: 48ch; margin: 0 auto 2.5rem; color: var(--charcoal); opacity: 0.78; font-size: 1.05rem; line-height: 1.7; } .notes__form { display: flex; max-width: 480px; margin: 0 auto; border-bottom: 1px solid var(--juniper-green); } .notes__form input { flex: 1; background: transparent; border: none; outline: none; padding: 1rem 0; font-family: var(--sans); font-size: 1rem; color: var(--juniper-green); } .notes__form input::placeholder { color: var(--forest-mist); opacity: 0.6; } .notes__form button { background: transparent; border: none; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--juniper-green); padding: 0 1rem; } .notes__poppy { width: 24px; height: 24px; display: inline-block; vertical-align: -3px; margin: 0 0.5rem; } /* ─────────── CLOSING ─────────── */ .closing { background: var(--cream); text-align: center; padding: clamp(6rem, 14vh, 11rem) 0; } .closing__line { font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.15; color: var(--juniper-green); max-width: 22ch; margin: 0 auto; letter-spacing: -0.01em; } /* ─────────── FOOTER ─────────── */ .footer { background: var(--juniper-green); color: var(--sand); padding: 5rem 0 2.5rem; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; } @media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } } .footer__brand { font-family: var(--serif); font-size: 1.8rem; } .footer__tag { margin-top: 1rem; font-size: 1rem; opacity: 0.7; max-width: 30ch; line-height: 1.55; } .footer__col h3, .footer__col h2 { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage); margin-bottom: 1.25rem; } .footer__col a { display: block; padding: 0.6rem 0; opacity: 0.85; font-size: 1rem; } .footer__col a:hover { opacity: 1; color: var(--cream); } .footer__bottom { border-top: 1px solid rgba(245,241,232,0.15); padding-top: 2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; opacity: 0.55; letter-spacing: 0.05em; } /* ─────────── JUNIPER SERVICES (clinical structured) ─────────── */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } @media (max-width: 880px) { .services-grid { grid-template-columns: 1fr; } } .service-card { padding: 2.5rem 2rem; background: var(--cream); border: 1px solid rgba(47,74,58,0.12); display: flex; flex-direction: column; } .service-card__mark { width: 36px; height: 36px; margin-bottom: 1.5rem; opacity: 0.7; } .service-card__title { font-size: 1.5rem; color: var(--juniper-green); margin-bottom: 1rem; } .service-card__body { font-size: 1rem; color: var(--charcoal); opacity: 0.82; line-height: 1.65; margin-bottom: 1.5rem; } .service-card__link { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--juniper-green); margin-top: auto; display: inline-flex; gap: 0.5rem; align-items: center; } /* ─────────── WHAT TO EXPECT (Juniper trust flow) ─────────── */ .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; counter-reset: flow; } @media (max-width: 880px) { .flow { grid-template-columns: 1fr; } } .flow__step { counter-increment: flow; } .flow__num { font-family: var(--serif); font-style: italic; font-size: 3rem; color: var(--sage); margin-bottom: 1rem; } .flow__num::before { content: counter(flow, decimal-leading-zero); } .flow__title { font-size: 1.4rem; color: var(--juniper-green); margin-bottom: 0.75rem; } .flow__body { color: var(--charcoal); opacity: 0.82; line-height: 1.65; } /* ─────────── FAQ ─────────── */ .faq { max-width: 880px; margin: 0 auto; } .faq__item { border-top: 1px solid rgba(47,74,58,0.18); padding: 1.75rem 0; } .faq__item:last-child { border-bottom: 1px solid rgba(47,74,58,0.18); } .faq__q { font-family: var(--serif); font-size: 1.5rem; color: var(--juniper-green); margin-bottom: 0.75rem; line-height: 1.3; } .faq__a { color: var(--charcoal); line-height: 1.7; opacity: 0.85; max-width: 70ch; } /* ─────────── INQUIRY (Juniper flexible contact) ─────────── */ .inquiry { background: var(--sand); padding: clamp(5rem, 12vh, 9rem) 0; } .inquiry .wrap { max-width: 720px; } .inquiry__head { text-align: center; margin-bottom: 3rem; } .inquiry__title { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--juniper-green); margin-bottom: 1rem; } .inquiry__body { color: var(--charcoal); opacity: 0.8; max-width: 50ch; margin: 0 auto; line-height: 1.7; } .inquiry-form { display: grid; gap: 1.5rem; } .inquiry-form label { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest-mist); margin-bottom: 0.5rem; display: block; } .inquiry-form input, .inquiry-form textarea { width: 100%; background: var(--cream); border: 1px solid rgba(47,74,58,0.2); padding: 1rem; font-family: var(--sans); font-size: 1rem; color: var(--juniper-green); outline: none; transition: border-color .2s var(--ease-soft); } .inquiry-form input:focus, .inquiry-form textarea:focus { border-color: var(--juniper-green); } .inquiry-form input[aria-invalid="true"], .inquiry-form textarea[aria-invalid="true"] { border-color: var(--poppy-deep); } .inquiry-form textarea { min-height: 140px; resize: vertical; } .inquiry-form .btn { justify-self: start; } .field-error { color: var(--poppy-deep); font-size: 1rem; margin: 0.45rem 0 0; line-height: 1.4; } .form-success { margin-top: 1.25rem; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--juniper-green); line-height: 1.5; } /* ─────────── LONG-FORM (essay reader, about) ─────────── */ .longform { max-width: 700px; margin: 0 auto; padding: 0 var(--pad); } .longform p { font-size: 1.15rem; line-height: 1.8; margin: 0 0 1.5em; color: var(--charcoal); } .longform h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--juniper-green); margin: 2.5em 0 1em; line-height: 1.2; } .longform h3 { font-size: 1.4rem; color: var(--juniper-green); margin: 2em 0 0.75em; } .longform blockquote { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--juniper-green); border-left: 2px solid var(--poppy); padding-left: 1.5rem; margin: 2.5em 0; } .site-juniper .longform blockquote { border-left-color: var(--sage); } .longform .drop-cap::first-letter { font-family: var(--serif); font-size: 4.5em; float: left; line-height: 0.85; padding: 0.05em 0.08em 0 0; color: var(--poppy); } /* ─────────── PAGE INTRO (sub-page hero alt) ─────────── */ .page-intro { background: var(--cream); padding: clamp(8rem, 18vh, 14rem) 0 clamp(3rem, 8vh, 6rem); } .page-intro__eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest-mist); margin-bottom: 1.5rem; } .page-intro__title { font-size: clamp(3rem, 6vw, 5rem); line-height: 1.05; color: var(--juniper-green); max-width: 18ch; margin-bottom: 1.5rem; } .page-intro__title em { font-style: italic; } .skip { position: absolute; left: -999px; top: 0.75rem; z-index: 200; background: var(--cream); color: var(--juniper-green); padding: 0.6rem 1rem; font-family: var(--sans); font-size: 0.85rem; } .skip:focus { left: 1rem; } :focus-visible { outline: 2px solid var(--poppy-deep); outline-offset: 3px; } .nap a { color: inherit; text-decoration: underline; display: inline-block; padding: 0.6rem 0; } .mobile-cta { display: none; } @media (max-width: 760px) { .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; align-items: center; justify-content: center; min-height: 44px; padding: 0.95rem 1.25rem calc(0.95rem + env(safe-area-inset-bottom)); background: var(--poppy-deep); color: var(--cream); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } body.site-juniper:not(.page-contact) { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); } body.page-contact .mobile-cta { display: none; } .mobile-cta.is-covered { display: none; } } .about-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } @media (max-width: 800px) { .about-split { grid-template-columns: 1fr; } } .about-photo { aspect-ratio: 4/5; background-size: cover; background-position: center; margin-bottom: 1.5rem; } .about-creds { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest-mist); line-height: 1.7; } .about-card { position: sticky; top: 6rem; } @media (max-width: 800px) { .about-card { position: static; } } .svc-h { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--juniper-green); margin-bottom: 1.5rem; line-height: 1.15; } .svc-p { font-size: 1.1rem; line-height: 1.75; color: var(--charcoal); margin-bottom: 1.25rem; } .svc-meta { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest-mist); } .longform a { color: var(--juniper-green); border-bottom: 1px solid currentColor; } .page-intro__lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--charcoal); opacity: 0.85; max-width: 50ch; line-height: 1.5; }