--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>About - Dr. Wan-Chen Weng</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <div class="site">
+ <header class="site-header">
+ <div class="header-inner">
+ <p class="site-title"><a href="../">Dr. Wan-Chen Weng</a></p>
+ <p class="site-description">Psychological Services</p>
+ <nav class="main-nav" aria-label="Main navigation">
+ <a href="../">Home</a>
+ <a href="../services/">Services and Fees</a>
+ <a class="active" href="./">About</a>
+ <a href="../contact/">Contact</a>
+ </nav>
+ </div>
+ </header>
+
+ <main class="page-content">
+ <section class="content-block">
+ <div class="about-intro">
+ <img class="about-photo" src="../static/pfp.jpg" alt="Portrait of Dr. Wan-Chen Weng">
+ <p>
+ My name is Wan-Chen Weng (she/her) and I am a licensed psychologist practicing in Oregon (#2889).
+ I have extensive experiences working in various settings and helping individuals and couples with different
+ mental health issues. Whether you are new to therapy or continuing, self-understanding and awareness are
+ crucial for healing. I believe that trust within a therapeutic relationship is essential for positive therapy,
+ and I am honored to be part of your healing journey.
+ </p>
+ </div>
+
+ <h3>Education</h3>
+ <ul>
+ <li>Teachers College, Columbia University, Ph.D.</li>
+ <li>Boston College, M.A.</li>
+ <li>National Taiwan University, Taiwan, B.A, M.A.</li>
+ <li>Oregon License Number: 2889</li>
+ </ul>
+
+ <h3>Experiences</h3>
+ <p>
+ My graduate training was rooted in multicultural competency and social justice. I have dedicated my work in
+ various settings, including hospitals, community clinics, and college counseling settings in the US. I received
+ my pre-doctoral internship at Hamilton-Madison House in New York City and completed my post-doctoral residency
+ training at Reed College in Oregon. My approach is warm, collaborative and non-judgmental. My theoretical
+ orientation adopts an integrative approach, incorporating psychodynamic, DBT (dialectical behavioural therapy),
+ ACT (acceptance and commitment), mindfulness and interpersonal process. I have particular interests in helping
+ individuals adapt to different cultures, dealing with family issues, relationships, identities, trauma, grief,
+ and other developmental issues. As a cis-female and first-generation Taiwanese immigrant, I understand how
+ important it is to consider the impact of systematic oppression on intersecting identities and mental health.
+ I strive to take a perspective of social justice and honor your cultural contexts whether they are a source
+ of pride or marginalization in helping me understand your lived experiences.
+ </p>
+
+ <h3>Specialties</h3>
+ <ul>
+ <li>Acculturation</li>
+ <li>Intersecting identities</li>
+ <li>Family of origin</li>
+ <li>Relationship Issues</li>
+ <li>Stress management</li>
+ <li>Anxiety</li>
+ <li>Career/work stress</li>
+ <li>Life Transitions</li>
+ <li>Trauma/ Grief and Loss</li>
+ </ul>
+
+ <h3>Services</h3>
+ <ul>
+ <li>Individual psychotherapy</li>
+ <li>Couples psychotherapy</li>
+ <li>Coaching</li>
+ <li>Consultation</li>
+ <li>Workshops and community outreach</li>
+ </ul>
+ </section>
+ </main>
+
+ <footer class="site-footer">
+ <p>Dr. Wan-Chen Weng</p>
+ </footer>
+ </div>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+:root {
+ --bg: #f6f4f1;
+ --card: #ffffff;
+ --text: #1f2328;
+ --muted: #5f6872;
+ --line: #ddd7d0;
+ --accent: #557a8a;
+ --accent-dark: #3f616f;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ color: var(--text);
+ background: radial-gradient(circle at top, #fdfbf8 0%, var(--bg) 40%);
+ line-height: 1.65;
+}
+
+a {
+ color: var(--accent);
+ text-decoration-thickness: 1px;
+ text-underline-offset: 0.14em;
+}
+
+a:hover {
+ color: var(--accent-dark);
+}
+
+.site {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.site-header {
+ border-bottom: 1px solid var(--line);
+ background: rgba(255, 255, 255, 0.94);
+ box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
+}
+
+.header-inner {
+ width: min(980px, 92%);
+ margin: 0 auto;
+ padding: 22px 0 18px;
+}
+
+.site-title {
+ margin: 0;
+ font-size: 2.0rem;
+ font-weight: 600;
+}
+
+.site-title a {
+ color: var(--text);
+ text-decoration: none;
+}
+
+.site-description {
+ margin: 4px 0 16px;
+ color: var(--muted);
+ font-size: 0.95rem;
+}
+
+.main-nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 16px;
+}
+
+.main-nav a {
+ text-decoration: none;
+ color: var(--muted);
+ font-size: 0.95rem;
+ padding-bottom: 2px;
+ border-bottom: 1px solid transparent;
+}
+
+.main-nav a.active,
+.main-nav a:hover {
+ color: var(--accent-dark);
+ border-bottom-color: var(--accent-dark);
+}
+
+.page-content {
+ /* width: min(980px, 92%); */
+ margin: 0 5%;
+ padding: 32px 0 56px;
+ flex: 1;
+}
+
+.hero {
+ position: relative;
+ border-radius: 14px;
+ min-height: clamp(420px, 62vh, 620px);
+ background-size: cover;
+ background-position: center;
+ overflow: hidden;
+ box-shadow: 0 10px 30px rgba(31, 35, 40, 0.13);
+}
+
+.hero-overlay {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, rgba(14, 26, 32, 0.33), rgba(14, 26, 32, 0.5));
+}
+
+.hero-inner {
+ position: relative;
+ max-width: 760px;
+ margin: 0 auto;
+ padding: clamp(58px, 8vw, 92px) 26px;
+ text-align: center;
+ color: #fff;
+}
+
+.hero h1 {
+ margin: 0 0 20px;
+ font-size: clamp(1.9rem, 3.4vw, 2.8rem);
+ font-weight: 500;
+ line-height: 1.2;
+}
+
+.button {
+ display: inline-block;
+ border: 1px solid #fff;
+ border-radius: 999px;
+ padding: 10px 20px;
+ color: #192127;
+ background: #fff;
+ text-decoration: none;
+ font-size: 0.93rem;
+ font-weight: 500;
+}
+
+.button:hover {
+ color: #192127;
+ background: rgba(255, 255, 255, 0.88);
+}
+
+.hero-copy {
+ margin: 26px auto 0;
+ font-size: clamp(1.02rem, 1.55vw, 1.16rem);
+ line-height: 1.85;
+ max-width: 66ch;
+}
+
+.hero-copy strong {
+ font-weight: 500;
+}
+
+.content-block {
+ background: var(--card);
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ padding: clamp(22px, 4vw, 38px);
+ box-shadow: 0 3px 18px rgba(31, 35, 40, 0.06);
+}
+
+.content-block>*:first-child {
+ margin-top: 0;
+}
+
+.content-block p {
+ max-width: 74ch;
+}
+
+.about-intro {
+ display: grid;
+ grid-template-columns: 260px 1fr;
+ gap: 32px;
+ align-items: center;
+}
+
+.about-photo {
+ width: 260px;
+ max-width: 100%;
+ aspect-ratio: 1 / 1;
+ object-fit: cover;
+ border-radius: 50%;
+ border: 3px solid #fff;
+ box-shadow: 0 8px 22px rgba(31, 35, 40, 0.16);
+}
+
+h2,
+h3 {
+ margin-top: 30px;
+ margin-bottom: 12px;
+ font-weight: 600;
+ line-height: 1.25;
+}
+
+ul {
+ margin: 0;
+ padding-left: 1.2rem;
+}
+
+li+li {
+ margin-top: 6px;
+}
+
+.services-lead {
+ text-align: center;
+ font-size: clamp(1.05rem, 2.1vw, 1.25rem);
+ margin: 0 auto 28px;
+ max-width: 56ch;
+ color: #2d3742;
+}
+
+.contact-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 24px;
+}
+
+.contact-card {
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ padding: 22px;
+ background: #fff;
+}
+
+.social-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ padding: 0;
+ margin: 16px 0 0;
+ list-style: none;
+}
+
+.social-links a {
+ display: inline-block;
+ text-decoration: none;
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ padding: 6px 10px;
+}
+
+.site-footer {
+ border-top: 1px solid var(--line);
+ background: #fbfaf8;
+}
+
+.site-footer p {
+ width: min(980px, 92%);
+ margin: 0 auto;
+ padding: 16px 0 22px;
+ font-size: 0.9rem;
+ color: var(--muted);
+}
+
+@media (max-width: 900px) {
+
+ .about-intro,
+ .contact-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .about-photo {
+ width: min(240px, 100%);
+ margin: 0 auto;
+ }
+}
\ No newline at end of file
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Contact - Dr. Wan-Chen Weng</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <div class="site">
+ <header class="site-header">
+ <div class="header-inner">
+ <p class="site-title"><a href="../">Dr. Wan-Chen Weng</a></p>
+ <p class="site-description">Psychological Services</p>
+ <nav class="main-nav" aria-label="Main navigation">
+ <a href="../">Home</a>
+ <a href="../services/">Services and Fees</a>
+ <a href="../about/">About</a>
+ <a class="active" href="./">Contact</a>
+ </nav>
+ </div>
+ </header>
+
+ <main class="page-content">
+ <section class="content-block">
+ <h3 style="margin-bottom: 2rem;">Don’t hesitate to reach out to me with the contact information below.</h3>
+
+ <div class="contact-grid">
+ <section class="contact-card">
+ <h2>Get in Touch</h2>
+ <p><a href="mailto:wengphd@gmail.com">wengphd@gmail.com</a></p>
+ <p><a href="tel:5035679499">(503)-567-9499</a></p>
+ <p>
+ Please note: Email is not a secure medium, and confidentiality of emails cannot be guaranteed.
+ You will expect to hear from me within 48 hours, except for holidays and breaks. Emergency:
+ If you find yourself in a life-threatening mental health emergency, please dial 9-1-1, or go
+ immediately to your nearest hospital emergency department.
+ </p>
+ <!-- <ul class="social-links"> -->
+ <!-- <li><a href="https://instagram.com">Instagram</a></li> -->
+ <!-- <li><a href="https://facebook.com">Facebook</a></li> -->
+ <!-- <li><a href="https://twitter.com">Twitter</a></li> -->
+ <!-- </ul> -->
+ </section>
+
+ <!-- <section class="contact-card"> -->
+ <!-- <h2>Reach out for a free consultation</h2> -->
+ <!-- </section> -->
+ </div>
+ </section>
+ </main>
+
+ <footer class="site-footer">
+ <p>Dr. Wan-Chen Weng</p>
+ </footer>
+ </div>
+</body>
+</html>
--- /dev/null
+:root {
+ --bg: #f6f4f1;
+ --card: #ffffff;
+ --text: #1f2328;
+ --muted: #5f6872;
+ --line: #ddd7d0;
+ --accent: #557a8a;
+ --accent-dark: #3f616f;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ color: var(--text);
+ background: radial-gradient(circle at top, #fdfbf8 0%, var(--bg) 40%);
+ line-height: 1.65;
+}
+
+a {
+ color: var(--accent);
+ text-decoration-thickness: 1px;
+ text-underline-offset: 0.14em;
+}
+
+a:hover {
+ color: var(--accent-dark);
+}
+
+.site {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.site-header {
+ border-bottom: 1px solid var(--line);
+ background: rgba(255, 255, 255, 0.94);
+ box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
+}
+
+.header-inner {
+ width: min(980px, 92%);
+ margin: 0 auto;
+ padding: 22px 0 18px;
+}
+
+.site-title {
+ margin: 0;
+ font-size: 2.0rem;
+ font-weight: 600;
+}
+
+.site-title a {
+ color: var(--text);
+ text-decoration: none;
+}
+
+.site-description {
+ margin: 4px 0 16px;
+ color: var(--muted);
+ font-size: 0.95rem;
+}
+
+.main-nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 16px;
+}
+
+.main-nav a {
+ text-decoration: none;
+ color: var(--muted);
+ font-size: 0.95rem;
+ padding-bottom: 2px;
+ border-bottom: 1px solid transparent;
+}
+
+.main-nav a.active,
+.main-nav a:hover {
+ color: var(--accent-dark);
+ border-bottom-color: var(--accent-dark);
+}
+
+.page-content {
+ /* width: min(980px, 92%); */
+ margin: 0 5%;
+ padding: 32px 0 56px;
+ flex: 1;
+}
+
+.hero {
+ position: relative;
+ border-radius: 14px;
+ min-height: clamp(420px, 62vh, 620px);
+ background-size: cover;
+ background-position: center;
+ overflow: hidden;
+ box-shadow: 0 10px 30px rgba(31, 35, 40, 0.13);
+}
+
+.hero-overlay {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, rgba(14, 26, 32, 0.33), rgba(14, 26, 32, 0.5));
+}
+
+.hero-inner {
+ position: relative;
+ max-width: 760px;
+ margin: 0 auto;
+ padding: clamp(58px, 8vw, 92px) 26px;
+ text-align: center;
+ color: #fff;
+}
+
+.hero h1 {
+ margin: 0 0 20px;
+ font-size: clamp(1.9rem, 3.4vw, 2.8rem);
+ font-weight: 500;
+ line-height: 1.2;
+}
+
+.button {
+ display: inline-block;
+ border: 1px solid #fff;
+ border-radius: 999px;
+ padding: 10px 20px;
+ color: #192127;
+ background: #fff;
+ text-decoration: none;
+ font-size: 0.93rem;
+ font-weight: 500;
+}
+
+.button:hover {
+ color: #192127;
+ background: rgba(255, 255, 255, 0.88);
+}
+
+.hero-copy {
+ margin: 26px auto 0;
+ font-size: clamp(1.02rem, 1.55vw, 1.16rem);
+ line-height: 1.85;
+ max-width: 66ch;
+}
+
+.hero-copy strong {
+ font-weight: 500;
+}
+
+.content-block {
+ background: var(--card);
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ padding: clamp(22px, 4vw, 38px);
+ box-shadow: 0 3px 18px rgba(31, 35, 40, 0.06);
+}
+
+.content-block>*:first-child {
+ margin-top: 0;
+}
+
+.content-block p {
+ max-width: 74ch;
+}
+
+.about-intro {
+ display: grid;
+ grid-template-columns: 260px 1fr;
+ gap: 32px;
+ align-items: center;
+}
+
+.about-photo {
+ width: 260px;
+ max-width: 100%;
+ aspect-ratio: 1 / 1;
+ object-fit: cover;
+ border-radius: 50%;
+ border: 3px solid #fff;
+ box-shadow: 0 8px 22px rgba(31, 35, 40, 0.16);
+}
+
+h2,
+h3 {
+ margin-top: 30px;
+ margin-bottom: 12px;
+ font-weight: 600;
+ line-height: 1.25;
+}
+
+ul {
+ margin: 0;
+ padding-left: 1.2rem;
+}
+
+li+li {
+ margin-top: 6px;
+}
+
+.services-lead {
+ text-align: center;
+ font-size: clamp(1.05rem, 2.1vw, 1.25rem);
+ margin: 0 auto 28px;
+ max-width: 56ch;
+ color: #2d3742;
+}
+
+.contact-grid {
+ /* display: grid; */
+ grid-template-columns: auto auto;
+ gap: 24px;
+}
+
+.contact-card {
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ padding: 22px;
+ background: #fff;
+}
+
+.social-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ padding: 0;
+ margin: 16px 0 0;
+ list-style: none;
+}
+
+.social-links a {
+ display: inline-block;
+ text-decoration: none;
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ padding: 6px 10px;
+}
+
+.site-footer {
+ border-top: 1px solid var(--line);
+ background: #fbfaf8;
+}
+
+.site-footer p {
+ width: min(980px, 92%);
+ margin: 0 auto;
+ padding: 16px 0 22px;
+ font-size: 0.9rem;
+ color: var(--muted);
+}
+
+@media (max-width: 900px) {
+
+ .about-intro,
+ .contact-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .about-photo {
+ width: min(240px, 100%);
+ margin: 0 auto;
+ }
+}
\ No newline at end of file
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Dr. Wan-Chen Weng - Psychological Services</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <div class="site">
+ <header class="site-header">
+ <div class="header-inner">
+ <p class="site-title"><a href="./">Dr. Wan-Chen Weng</a></p>
+ <p class="site-description">Psychological Services</p>
+ <nav class="main-nav" aria-label="Main navigation">
+ <a class="active" href="./">Home</a>
+ <a href="services/">Services and Fees</a>
+ <a href="about/">About</a>
+ <a href="contact/">Contact</a>
+ </nav>
+ </div>
+ </header>
+
+ <main class="page-content">
+ <section class="hero" style="background-image: url('static/lake.jpg');">
+ <div class="hero-overlay"></div>
+ <div class="hero-inner">
+ <h1>Welcome to my practice!</h1>
+ <p><a class="button" href="https://www.psychologytoday.com/us/therapists/wan-chen-weng-portland-or/844812">Learn more</a></p>
+ <p class="hero-copy">
+ <strong>
+ Do you often feel stuck in life and constantly juggle between personal space and various obligations?
+ Are you feeling emotionally “trapped” from the past and having a desire to move past this?
+ Allow yourself – Take a pause; Notice the vibe; Change with inner strength. Let’s begin this journey
+ through unlearning the old pattern from the past and relearning a healthy way of living.
+ </strong>
+ </p>
+ </div>
+ </section>
+ </main>
+
+ <footer class="site-footer">
+ <p>Dr. Wan-Chen Weng</p>
+ </footer>
+ </div>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Services and Fees - Dr. Wan-Chen Weng</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <div class="site">
+ <header class="site-header">
+ <div class="header-inner">
+ <p class="site-title"><a href="../">Dr. Wan-Chen Weng</a></p>
+ <p class="site-description">Psychological Services</p>
+ <nav class="main-nav" aria-label="Main navigation">
+ <a href="../">Home</a>
+ <a class="active" href="./">Services and Fees</a>
+ <a href="../about/">About</a>
+ <a href="../contact/">Contact</a>
+ </nav>
+ </div>
+ </header>
+
+ <main class="page-content">
+ <section class="content-block">
+ <p class="services-lead">
+ I provide individual and couples counseling via teletherapy. I also offer other services, including consultation,
+ workshops and community outreach.
+ </p>
+
+ <section class="hero" style="background-image: url('../static/mountains.jpg'); min-height: 520px;">
+ <div class="hero-overlay"></div>
+ <div class="hero-inner">
+ <p class="hero-copy">
+ <strong>
+ Currently I am in-network with Aetna; for other insurances, I’m an out-of-network provider, which means that
+ I do not accept other insurances. My fee starts at $200 per 50-min session. I can provide Superbill statements
+ for you to receive reimbursement for most if not all of my fee from your insurance company. You can find out
+ more about your out-of-network benefits by calling your insurance carrier. If you have any questions, feel free
+ to contact me.
+ </strong>
+ <br><br>
+ <strong>
+ Please note: If you are experiencing financial hardship as a barrier to care, I have some limited availability
+ for a reduced fee. Sliding scale may be available upon request.
+ </strong>
+ </p>
+ </div>
+ </section>
+ </section>
+ </main>
+
+ <footer class="site-footer">
+ <p>Dr. Wan-Chen Weng</p>
+ </footer>
+ </div>
+</body>
+</html>
--- /dev/null
+:root {
+ --bg: #f6f4f1;
+ --card: #ffffff;
+ --text: #1f2328;
+ --muted: #5f6872;
+ --line: #ddd7d0;
+ --accent: #557a8a;
+ --accent-dark: #3f616f;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ color: var(--text);
+ background: radial-gradient(circle at top, #fdfbf8 0%, var(--bg) 40%);
+ line-height: 1.65;
+}
+
+a {
+ color: var(--accent);
+ text-decoration-thickness: 1px;
+ text-underline-offset: 0.14em;
+}
+
+a:hover {
+ color: var(--accent-dark);
+}
+
+.site {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.site-header {
+ border-bottom: 1px solid var(--line);
+ background: rgba(255, 255, 255, 0.94);
+ box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
+}
+
+.header-inner {
+ width: min(980px, 92%);
+ margin: 0 auto;
+ padding: 22px 0 18px;
+}
+
+.site-title {
+ margin: 0;
+ font-size: 2.0rem;
+ font-weight: 600;
+}
+
+.site-title a {
+ color: var(--text);
+ text-decoration: none;
+}
+
+.site-description {
+ margin: 4px 0 16px;
+ color: var(--muted);
+ font-size: 0.95rem;
+}
+
+.main-nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 16px;
+}
+
+.main-nav a {
+ text-decoration: none;
+ color: var(--muted);
+ font-size: 0.95rem;
+ padding-bottom: 2px;
+ border-bottom: 1px solid transparent;
+}
+
+.main-nav a.active,
+.main-nav a:hover {
+ color: var(--accent-dark);
+ border-bottom-color: var(--accent-dark);
+}
+
+.page-content {
+ /* width: min(980px, 92%); */
+ margin: 0 5%;
+ padding: 32px 0 56px;
+ flex: 1;
+}
+
+.hero {
+ position: relative;
+ border-radius: 14px;
+ min-height: clamp(420px, 62vh, 620px);
+ background-size: cover;
+ background-position: center;
+ overflow: hidden;
+ box-shadow: 0 10px 30px rgba(31, 35, 40, 0.13);
+}
+
+.hero-overlay {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, rgba(14, 26, 32, 0.33), rgba(14, 26, 32, 0.5));
+}
+
+.hero-inner {
+ position: relative;
+ max-width: 760px;
+ margin: 0 auto;
+ padding: clamp(58px, 8vw, 92px) 26px;
+ text-align: center;
+ color: #fff;
+}
+
+.hero h1 {
+ margin: 0 0 20px;
+ font-size: clamp(1.9rem, 3.4vw, 2.8rem);
+ font-weight: 500;
+ line-height: 1.2;
+}
+
+.button {
+ display: inline-block;
+ border: 1px solid #fff;
+ border-radius: 999px;
+ padding: 10px 20px;
+ color: #192127;
+ background: #fff;
+ text-decoration: none;
+ font-size: 0.93rem;
+ font-weight: 500;
+}
+
+.button:hover {
+ color: #192127;
+ background: rgba(255, 255, 255, 0.88);
+}
+
+.hero-copy {
+ margin: 26px auto 0;
+ font-size: clamp(1.02rem, 1.55vw, 1.16rem);
+ line-height: 1.85;
+ max-width: 66ch;
+}
+
+.hero-copy strong {
+ font-weight: 500;
+}
+
+.content-block {
+ background: var(--card);
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ padding: clamp(22px, 4vw, 38px);
+ box-shadow: 0 3px 18px rgba(31, 35, 40, 0.06);
+}
+
+.content-block>*:first-child {
+ margin-top: 0;
+}
+
+.content-block p {
+ max-width: 74ch;
+}
+
+.about-intro {
+ display: grid;
+ grid-template-columns: 260px 1fr;
+ gap: 32px;
+ align-items: center;
+}
+
+.about-photo {
+ width: 260px;
+ max-width: 100%;
+ aspect-ratio: 1 / 1;
+ object-fit: cover;
+ border-radius: 50%;
+ border: 3px solid #fff;
+ box-shadow: 0 8px 22px rgba(31, 35, 40, 0.16);
+}
+
+h2,
+h3 {
+ margin-top: 30px;
+ margin-bottom: 12px;
+ font-weight: 600;
+ line-height: 1.25;
+}
+
+ul {
+ margin: 0;
+ padding-left: 1.2rem;
+}
+
+li+li {
+ margin-top: 6px;
+}
+
+.services-lead {
+ text-align: center;
+ font-size: clamp(1.05rem, 2.1vw, 1.25rem);
+ margin: 0 auto 28px;
+ max-width: 56ch;
+ color: #2d3742;
+}
+
+.contact-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 24px;
+}
+
+.contact-card {
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ padding: 22px;
+ background: #fff;
+}
+
+.social-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ padding: 0;
+ margin: 16px 0 0;
+ list-style: none;
+}
+
+.social-links a {
+ display: inline-block;
+ text-decoration: none;
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ padding: 6px 10px;
+}
+
+.site-footer {
+ border-top: 1px solid var(--line);
+ background: #fbfaf8;
+}
+
+.site-footer p {
+ width: min(980px, 92%);
+ margin: 0 auto;
+ padding: 16px 0 22px;
+ font-size: 0.9rem;
+ color: var(--muted);
+}
+
+@media (max-width: 900px) {
+
+ .about-intro,
+ .contact-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .about-photo {
+ width: min(240px, 100%);
+ margin: 0 auto;
+ }
+}
\ No newline at end of file
--- /dev/null
+:root {
+ --bg: #f6f4f1;
+ --card: #ffffff;
+ --text: #1f2328;
+ --muted: #5f6872;
+ --line: #ddd7d0;
+ --accent: #557a8a;
+ --accent-dark: #3f616f;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ color: var(--text);
+ background: radial-gradient(circle at top, #fdfbf8 0%, var(--bg) 40%);
+ line-height: 1.65;
+}
+
+a {
+ color: var(--accent);
+ text-decoration-thickness: 1px;
+ text-underline-offset: 0.14em;
+}
+
+a:hover {
+ color: var(--accent-dark);
+}
+
+.site {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.site-header {
+ border-bottom: 1px solid var(--line);
+ background: rgba(255, 255, 255, 0.94);
+ box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
+}
+
+.header-inner {
+ width: min(980px, 92%);
+ margin: 0 auto;
+ padding: 22px 0 18px;
+}
+
+.site-title {
+ margin: 0;
+ font-size: 2.0rem;
+ font-weight: 600;
+}
+
+.site-title a {
+ color: var(--text);
+ text-decoration: none;
+}
+
+.site-description {
+ margin: 4px 0 16px;
+ color: var(--muted);
+ font-size: 0.95rem;
+}
+
+.main-nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 16px;
+}
+
+.main-nav a {
+ text-decoration: none;
+ color: var(--muted);
+ font-size: 0.95rem;
+ padding-bottom: 2px;
+ border-bottom: 1px solid transparent;
+}
+
+.main-nav a.active,
+.main-nav a:hover {
+ color: var(--accent-dark);
+ border-bottom-color: var(--accent-dark);
+}
+
+.page-content {
+ /* width: min(980px, 92%); */
+ margin: 0 5%;
+ padding: 32px 0 56px;
+ flex: 1;
+}
+
+.hero {
+ position: relative;
+ border-radius: 14px;
+ min-height: clamp(420px, 62vh, 620px);
+ background-size: cover;
+ background-position: center;
+ overflow: hidden;
+ box-shadow: 0 10px 30px rgba(31, 35, 40, 0.13);
+}
+
+.hero-overlay {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, rgba(14, 26, 32, 0.33), rgba(14, 26, 32, 0.5));
+}
+
+.hero-inner {
+ position: relative;
+ max-width: 760px;
+ margin: 0 auto;
+ padding: clamp(58px, 8vw, 92px) 26px;
+ text-align: center;
+ color: #fff;
+}
+
+.hero h1 {
+ margin: 0 0 20px;
+ font-size: clamp(1.9rem, 3.4vw, 2.8rem);
+ font-weight: 500;
+ line-height: 1.2;
+}
+
+.button {
+ display: inline-block;
+ border: 1px solid #fff;
+ border-radius: 999px;
+ padding: 10px 20px;
+ color: #192127;
+ background: #fff;
+ text-decoration: none;
+ font-size: 0.93rem;
+ font-weight: 500;
+}
+
+.button:hover {
+ color: #192127;
+ background: rgba(255, 255, 255, 0.88);
+}
+
+.hero-copy {
+ margin: 26px auto 0;
+ font-size: clamp(1.02rem, 1.55vw, 1.16rem);
+ line-height: 1.85;
+ max-width: 66ch;
+}
+
+.hero-copy strong {
+ font-weight: 500;
+}
+
+.content-block {
+ background: var(--card);
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ padding: clamp(22px, 4vw, 38px);
+ box-shadow: 0 3px 18px rgba(31, 35, 40, 0.06);
+}
+
+.content-block>*:first-child {
+ margin-top: 0;
+}
+
+.content-block p {
+ max-width: 74ch;
+}
+
+.about-intro {
+ display: grid;
+ grid-template-columns: 260px 1fr;
+ gap: 32px;
+ align-items: center;
+}
+
+.about-photo {
+ width: 260px;
+ max-width: 100%;
+ aspect-ratio: 1 / 1;
+ object-fit: cover;
+ border-radius: 50%;
+ border: 3px solid #fff;
+ box-shadow: 0 8px 22px rgba(31, 35, 40, 0.16);
+}
+
+h2,
+h3 {
+ margin-top: 30px;
+ margin-bottom: 12px;
+ font-weight: 600;
+ line-height: 1.25;
+}
+
+ul {
+ margin: 0;
+ padding-left: 1.2rem;
+}
+
+li+li {
+ margin-top: 6px;
+}
+
+.services-lead {
+ text-align: center;
+ font-size: clamp(1.05rem, 2.1vw, 1.25rem);
+ margin: 0 auto 28px;
+ max-width: 56ch;
+ color: #2d3742;
+}
+
+.contact-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 24px;
+}
+
+.contact-card {
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ padding: 22px;
+ background: #fff;
+}
+
+.social-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ padding: 0;
+ margin: 16px 0 0;
+ list-style: none;
+}
+
+.social-links a {
+ display: inline-block;
+ text-decoration: none;
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ padding: 6px 10px;
+}
+
+.site-footer {
+ border-top: 1px solid var(--line);
+ background: #fbfaf8;
+}
+
+.site-footer p {
+ width: min(980px, 92%);
+ margin: 0 auto;
+ padding: 16px 0 22px;
+ font-size: 0.9rem;
+ color: var(--muted);
+}
+
+@media (max-width: 900px) {
+
+ .about-intro,
+ .contact-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .about-photo {
+ width: min(240px, 100%);
+ margin: 0 auto;
+ }
+}
\ No newline at end of file
