/* Baek Physical Therapy & Wellness — design system Brand palette from logo: navy #052042, sage #5c6f64. Fonts are loaded via in each page (preconnect + stylesheet). */ :root { --navy: #052042; --navy-2: #0a2e5c; --sage: #5c6f64; --sage-deep: #4a5a51; --sage-soft: #edf3ef; --sage-tint: #f6f8f4; --gold: #c8a96a; /* warm accent for small details */ --ink: #1f2a33; --muted: #5f6b66; --bg: #f8faf8; --surface: #ffffff; --line: #e1e8e2; --line-soft: #edf1ed; --accent: var(--navy); --maxw: 1140px; --radius: 8px; --radius-sm: 6px; --shadow-sm: 0 2px 10px rgba(5,32,66,.05); --shadow: 0 18px 44px rgba(5,32,66,.10); --shadow-lg: 0 30px 70px rgba(5,32,66,.16); --space: clamp(1rem, 2vw, 1.5rem); --font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --serif: 'Fraunces', ui-serif, Georgia, "Times New Roman", serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } :focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 3px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.7; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.12; font-weight: 540; color: var(--navy); letter-spacing: 0; } h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.6rem); margin: 0 0 .35em; font-weight: 560; } h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.45rem); margin: 0 0 .55em; } h3 { font-size: 1.24rem; margin: 0 0 .4em; font-weight: 560; } p { margin: 0 0 1.1em; } a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--sage); } strong { font-weight: 650; } img { max-width: 100%; height: auto; display: block; } code { background: var(--sage-soft); padding: .1em .35em; border-radius: 5px; font-size: .9em; } .skip-link { position: absolute; left: var(--space); top: .75rem; z-index: 100; transform: translateY(-140%); background: #fff; color: var(--navy); border: 2px solid var(--sage); border-radius: var(--radius-sm); padding: .65rem .9rem; font-weight: 700; text-decoration: none; } .skip-link:focus { transform: translateY(0); } .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space); } .measure { max-width: 68ch; } .center { text-align: center; } .lede { font-size: clamp(1.12rem, 1rem + .5vw, 1.3rem); color: var(--muted); line-height: 1.6; } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 700; color: var(--sage); margin: 0 0 1rem; } .eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--gold); display: inline-block; } .eyebrow a { color: var(--sage); } .muted { color: var(--muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .85em 1.6em; border-radius: 999px; font-weight: 600; font-size: .98rem; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s, border-color .2s; } .btn + .btn { margin-left: .5rem; } .btn-primary { background: var(--navy); color: #fff; box-shadow: 0 8px 22px rgba(5,32,66,.22); } .btn-primary:hover { background: var(--navy-2); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(5,32,66,.28); } .btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); } .btn-ghost:hover { border-color: var(--sage); color: var(--sage); transform: translateY(-2px); } /* Utility bar */ /* Header / nav */ .site-header { background: rgba(255,255,255,.88); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .site-header .container { display: flex; align-items: center; gap: 1.25rem; max-width: 1260px; padding: .75rem clamp(.75rem, 1.2vw, 1rem); } .brand { margin-right: auto; display: inline-flex; } .brand-logo { height: 63px; width: auto; display: block; max-width: 62vw; } .nav { display: flex; align-items: center; gap: 1.4rem; } .nav > a, .nav .dropdown > a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); font-weight: 500; font-size: .98rem; } .nav > a:hover { color: var(--sage); } .nav > a.btn-primary, .nav > a.btn-primary:hover, .nav > a.btn-primary:focus-visible { color: #fff; } .nav .dropdown { position: relative; } .nav .dropdown > a { cursor: pointer; gap: .3rem; } .nav .dropdown > a::after { content: "⌄"; font-size: .9em; opacity: .6; transform: translateY(-2px); } .nav .dropdown:hover > a, .nav .dropdown:focus-within > a { color: var(--sage); } .nav .dropdown:hover .menu, .nav .dropdown:focus-within .menu { display: block; } .nav .menu { position: absolute; top: 100%; left: -.5rem; padding-top: .5rem; min-width: 290px; display: none; } .nav .menu::before { content: ""; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: absolute; inset: .5rem -.6rem -.6rem; z-index: -1; } .nav .menu > a { position: relative; } .nav .menu a { display: block; padding: .55rem .75rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-size: .96rem; } .nav .menu a:hover { background: var(--sage-soft); color: var(--navy); } .nav-toggle { display: none; appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; padding: .5rem; color: var(--navy); -webkit-tap-highlight-color: transparent; } .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s ease, background-color .2s ease; } .nav-toggle-bar { position: relative; } .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; } .nav-toggle-bar::before { top: -7px; } .nav-toggle-bar::after { top: 7px; } .site-header.is-open .nav-toggle-bar { background: transparent; } .site-header.is-open .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); } .site-header.is-open .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .site-header .container { flex-wrap: wrap; gap: .75rem 1rem; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; padding: 0; } .nav { display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; width: 100%; gap: .35rem; padding-block: .5rem 1rem; } .site-header.is-open .nav { display: flex; } .nav > a, .nav .dropdown > a, .nav .btn { justify-content: flex-start; width: 100%; } .nav .menu { position: static; box-shadow: none; min-width: 0; border: none; padding: 0 0 0 1rem; background: transparent; display: block; } .nav .menu::before { display: none; } .nav .dropdown > a::after { display: none; } .brand { margin-right: 0; } } /* Sections + rhythm */ section { padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem); } .section-tight { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); } .bg-surface { background: var(--surface); } .bg-tint { background: var(--sage-tint); } /* "At a glance" — intro + numbered card */ .glance-layout { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .glance-intro h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); } .glance-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .glance-item { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: clamp(1.3rem, 2.4vw, 1.9rem); align-items: start; } .glance-item + .glance-item { border-top: 1px solid var(--line); } .glance-num { font-family: var(--serif); color: var(--gold); font-size: .9rem; font-weight: 600; width: 2.5rem; height: 2.5rem; border: 1px solid var(--gold); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; } .glance-item h3 { margin: .2rem 0 .35rem; } .glance-item p { margin: 0; color: var(--muted); } @media (max-width: 820px) { .glance-layout { grid-template-columns: 1fr; } } .hero { background: radial-gradient(120% 120% at 85% -10%, rgba(237,243,239,.9) 0%, rgba(237,243,239,0) 55%), linear-gradient(180deg, #ffffff 0%, var(--sage-tint) 100%); border-bottom: 1px solid var(--line); } .hero .lede { max-width: 56ch; } .hero-image { padding-block: 0; background: linear-gradient(90deg, rgba(5,32,66,.9) 0%, rgba(5,32,66,.78) 42%, rgba(5,32,66,.44) 70%, rgba(5,32,66,.28) 100%), url("img/ai-lymphatic-private-session-wide-1600.webp") center right / cover no-repeat; border-bottom: 1px solid rgba(255,255,255,.18); color: #fff; min-height: clamp(560px, 64vh, 720px); display: flex; align-items: center; } .hero-image .container { width: 100%; } .hero-content { max-width: 58ch; padding-block: clamp(4rem, 8vw, 7rem); } .hero-image h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.2); } .hero-image .lede { color: rgba(255,255,255,.88); } .hero-image .eyebrow { color: rgba(255,255,255,.82); } .hero-image .eyebrow::before { background: var(--gold); } .hero-image .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 12px 30px rgba(0,0,0,.22); } .hero-image .btn-primary:hover { background: #fff; color: var(--navy); box-shadow: 0 16px 34px rgba(0,0,0,.26); } .hero-image .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); } .hero-image .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.14); } .hero-home .hero-content { max-width: 42rem; } .hero-home .lede { max-width: 33rem; } .hero-postpartum { background: linear-gradient(90deg, rgba(5,32,66,.94) 0%, rgba(5,32,66,.86) 44%, rgba(5,32,66,.54) 70%, rgba(5,32,66,.18) 100%), url("img/postpartum-breastfeeding-hero-2000.webp") center right / cover no-repeat; } .hero-postpartum .btn-primary, .hero-postpartum .btn-primary:hover { background: #0a3a74; color: #fff; border-color: rgba(255,255,255,.5); box-shadow: 0 14px 32px rgba(0,0,0,.28); } .feature-image { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(440px, 56vh, 620px); overflow: hidden; color: #fff; background: var(--navy); } .feature-tennis { background: linear-gradient(180deg, rgba(5,32,66,.74) 0%, rgba(5,32,66,.58) 48%, rgba(5,32,66,.78) 100%), url("img/ai-court-side-care-wide-1600.webp") center / cover no-repeat; } .feature-image .container { width: 100%; } .feature-content { max-width: 760px; margin-inline: auto; } .feature-image h2 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.26); } .feature-image .lede { color: rgba(255,255,255,.9); margin-inline: auto; } .feature-image .eyebrow { color: rgba(255,255,255,.86); } .feature-image .eyebrow::before { background: var(--gold); } .feature-image .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 12px 30px rgba(0,0,0,.24); } .feature-image .btn-primary:hover { background: #fff; color: var(--navy); box-shadow: 0 16px 34px rgba(0,0,0,.28); } /* Hero two-column with framed image */ .hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1.05fr .95fr; align-items: center; } @media (max-width: 800px){ .hero-grid { grid-template-columns: 1fr; } } .hero-media { position: relative; } .hero-media .media-img, .media-img { width: 100%; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; } .hero-media::before { content: ""; position: absolute; inset: auto -14px -14px auto; width: 62%; height: 62%; background: var(--sage-soft); border-radius: var(--radius); z-index: -1; } /* Media */ .headshot { width: 100%; max-width: 360px; border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; object-fit: cover; } .approach-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .approach-layout > div:first-child { min-width: 0; max-width: 74ch; } .approach-portrait { align-self: stretch; min-height: 420px; } .approach-portrait img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center; border-radius: var(--radius); box-shadow: var(--shadow-lg); } /* Cards / grids */ .grid { display: grid; gap: 1.4rem; align-items: stretch; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); } .why-grid { grid-template-columns: repeat(3, 1fr); } .card { height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.65rem; box-shadow: var(--shadow-sm); } .card h3 { margin-top: 0; } .card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0; } .card-title { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; } .card-title h3 { margin: 0; } .card-icon { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; } .card .kicker { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); font-weight: 700; margin-bottom: .5rem; } a.card { text-decoration: none; color: inherit; transition: border-color .18s, transform .18s, box-shadow .2s; position: relative; } a.card:hover { border-color: var(--sage); transform: translateY(-3px); box-shadow: var(--shadow); } a.card h3 { color: var(--navy); } a.card::after { content: "→"; position: absolute; top: 1.4rem; right: 1.5rem; color: var(--sage); opacity: 0; transform: translateX(-4px); transition: .18s; } a.card:hover::after { opacity: 1; transform: translateX(0); } /* Numbered step cards */ .process-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; overflow: hidden; } .process-step { padding: 1.65rem; } .process-step + .process-step { border-left: 1px solid var(--line); } .process-step h3 { margin-top: 0; } .process-step p:last-child { margin-bottom: 0; } /* Answer blocks (AEO) */ .answer { background: var(--sage-soft); border-left: 3px solid var(--sage); padding: 1.1rem 1.35rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0 0 1.35rem; } .answer p:last-child { margin-bottom: 0; } .about-preview { display: grid; grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .about-preview-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; border-radius: var(--radius); box-shadow: var(--shadow-lg); } .philosophy-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .philosophy-layout > div:first-child { max-width: 68ch; } .philosophy-media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); } .care-inline { margin-top: 1.6rem; padding-top: 0; } .care-inline h3 { margin-bottom: .85rem; font-size: clamp(1.35rem, 2vw, 1.7rem); } .work-layout { display: grid; grid-template-columns: minmax(300px, .7fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .work-layout > div:last-child { max-width: 68ch; } .work-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); } .contact-preview-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .9fr); gap: clamp(2rem, 5vw, 4rem); align-items: stretch; } .contact-info { display: flex; flex-direction: column; } .contact-info h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); } .contact-rows { margin: .35rem 0 0; display: grid; gap: .25rem; } .contact-rows p { margin: 0; } .contact-rows a { font-weight: 650; text-decoration: none; } .contact-block { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; } .contact-block h3 { margin: 0 0 .2rem; font-size: 1.1rem; } .contact-block p { margin: 0; color: var(--muted); font-size: .98rem; } .contact-map { width: 100%; flex: 1 1 auto; min-height: 280px; margin-top: 1.75rem; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); } .contact-form-card { background: #fff; padding: clamp(1.6rem, 3vw, 2.4rem); } .contact-form-card h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin: 0 0 .5rem; } .contact-form-card > p { color: var(--muted); } .contact-form-card form { margin-top: 1.4rem; display: grid; gap: .9rem; } .contact-form-card form p { margin: 0; } .contact-form-card .check-line { display: flex; gap: .5rem; align-items: flex-start; font-weight: 500; color: var(--ink); } .contact-form-card .check-line input { width: auto; margin-top: .3rem; } /* CTA band — sage, to separate from the navy footer */ .cta-band { background: linear-gradient(135deg, var(--sage) 0%, var(--sage-deep) 100%); color: #fff; } .cta-band h2 { color: #fff; } .cta-band .lede { color: rgba(255,255,255,.9); } .cta-band a.btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); } .cta-band a.btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); } .cta-band a.btn-primary { background: #fff; color: var(--navy); box-shadow: 0 10px 26px rgba(0,0,0,.18); } .cta-band a.btn-primary:hover { background: #fff; color: var(--navy); } /* FAQ accordion */ details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.05rem 1.3rem; margin-bottom: .7rem; box-shadow: var(--shadow-sm); } details.faq > summary { font-weight: 600; cursor: pointer; font-family: var(--serif); color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } details.faq > summary::-webkit-details-marker { display: none; } details.faq > summary::after { content: "+"; color: var(--sage); font-size: 1.4rem; line-height: 1; transition: transform .2s; } details.faq[open] > summary { color: var(--sage); margin-bottom: .6rem; } details.faq[open] > summary::after { content: "–"; } /* Lists */ ul, ol { padding-left: 1.2rem; } li { margin-bottom: .4rem; } .list-plain { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: .55rem; } .list-check { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: .65rem; } .list-check li { padding-left: 1.9rem; position: relative; margin: 0; } .list-check li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.15rem; height: 1.15rem; background: var(--sage-soft); border-radius: 50%; } .list-check li::after { content: "✓"; position: absolute; left: .27rem; top: .2em; color: var(--sage-deep); font-weight: 700; font-size: .8rem; } /* Forms */ input, select, textarea { font: inherit; width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); } input[type=checkbox] { width: auto; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage); } label { font-weight: 600; color: var(--navy); font-size: .95rem; } form.card { display: grid; gap: 1rem; } form.card p { margin: 0; } iframe { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* Footer */ .site-footer { background: var(--navy); color: #b9c3bd; padding-block: 2.25rem 1.25rem; font-size: .95rem; } .site-footer a { color: #cfd6d0; text-decoration: none; } .site-footer a:hover { color: #fff; } .footer-brand .footer-logo { height: 78px; width: auto; margin: 0 0 1.4rem; opacity: .95; } .footer-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: minmax(290px, 1.1fr) minmax(160px, .8fr) minmax(190px, .95fr); align-items: start; } .footer-grid > div:not(.footer-brand) { margin-top: 2.4rem; } .footer-grid > div:first-child { max-width: 340px; } .footer-services { display: grid; gap: .5rem; } .footer-movement { padding-top: 0; } .site-footer h4 { font-family: var(--font); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: #7e9189; margin: 0 0 .9rem; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; } .footer-service-area { margin: .5rem auto .9rem; color: #8fa39a; font-size: .85rem; max-width: none; text-align: center; } .footer-legal { border-top: 1px solid rgba(255,255,255,.13); margin-top: 0; padding-top: .8rem; font-size: .8rem; color: #7e9189; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; } .footer-legal a { color: #cfd6d0; } .footer-legal a:hover { color: #fff; } /* Social icon links */ .footer-social { display: flex; gap: .55rem; align-items: center; margin-top: .35rem; } .footer-social a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #cfd6d0; } .footer-social a:hover { background: rgba(255,255,255,.12); color: #fff; } .footer-social svg { width: 17px; height: 17px; fill: currentColor; display: block; } @media (max-width: 1024px) { .site-footer .container { display: block; } .footer-logo { margin: 0 0 1.5rem; } .footer-grid { margin-top: 0; } } /* Gentle reveal — additive only; content is ALWAYS visible by default, so nothing can get stuck hidden if JS/observer timing is off. */ @media (prefers-reduced-motion: no-preference) { html.js [data-reveal].in { animation: revealUp .55s ease both; } } @keyframes revealUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .btn, a.card { transition: none; } } @media (max-width: 800px) { section { padding-block: 3rem; } .hero-image { padding-block: 0; min-height: 620px; background: linear-gradient(180deg, rgba(5,32,66,.92) 0%, rgba(5,32,66,.82) 58%, rgba(5,32,66,.62) 100%), url("img/ai-lymphatic-private-session-wide-1600.webp") 62% center / cover no-repeat; } .hero-postpartum { background: linear-gradient(180deg, rgba(5,32,66,.92) 0%, rgba(5,32,66,.84) 64%, rgba(5,32,66,.68) 100%), url("img/postpartum-breastfeeding-hero-2000.webp") 62% center / cover no-repeat; } .hero-content { padding-block: 4rem; } .approach-layout { grid-template-columns: 1fr; } .approach-layout > div:first-child { max-width: none; } .approach-portrait, .approach-portrait img { min-height: 360px; } .why-grid { grid-template-columns: repeat(2, 1fr); } .about-preview { grid-template-columns: 1fr; } .about-preview-media { max-width: 360px; } .philosophy-layout { grid-template-columns: 1fr; } .philosophy-layout > div:first-child { max-width: none; } .work-layout { grid-template-columns: 1fr; } .work-layout > div:last-child { max-width: none; } .site-footer .container { display: block; } .footer-logo { margin: 0 0 1.5rem; } .footer-grid { grid-template-columns: 1fr; margin-top: 0; } .footer-grid > div:not(.footer-brand) { margin-top: 0; } .footer-grid > div:last-child { justify-self: start; max-width: none; } .contact-preview-grid { grid-template-columns: 1fr; } .process-card { grid-template-columns: 1fr; } .process-step + .process-step { border-left: 0; border-top: 1px solid var(--line); } .btn + .btn { margin-left: 0; margin-top: .6rem; } } @media (max-width: 560px) { body { font-size: 1rem; } h1 { font-size: 2.15rem; } .container { padding-inline: 1rem; } .brand-logo { height: 54px; max-width: 70vw; } .why-grid { grid-template-columns: 1fr; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .card { padding: 1.2rem; } .btn { width: 100%; } }