From 1bdd505ac5748bad489cccd04cef1179e304f7b8 Mon Sep 17 00:00:00 2001
From: SowinskiBraeden <braeden@sowinski.dev>
Date: Fri, 26 Jun 2026 20:57:30 -0700
Subject: [PATCH] update styling

---
 index.html                     |  101 ++-
 privacy/index.html             |   47 +-
 privacy/left-unsaid/index.html |    6 +-
 styles.css                     | 1200 ++++++++++++++++++++++++++++++++
 support/index.html             |   44 +-
 support/left-unsaid/index.html |   14 +-
 6 files changed, 1340 insertions(+), 72 deletions(-)

diff --git a/index.html b/index.html
index 6f7faa7..e31d6b1 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
       name="twitter:description"
       content="Cedarline Digital develops software products, web applications, mobile apps, and digital tools."
     >
-    <link rel="icon" type="image/png" href="assets/images/logo-transparent-a.png">
+    <link rel="icon" type="image/png" href="assets/images/logo-transparent.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@@ -97,21 +97,40 @@
         </div>
       </section>
 
-      <section class="section about-section" id="about" aria-labelledby="about-title">
+      <section class="section about-section content-band" id="about" aria-labelledby="about-title">
         <div class="section-heading">
           <p class="eyebrow">About</p>
-          <h2 id="about-title">Independent software, rooted in reliability.</h2>
+          <h2 id="about-title">A focused software studio, built around useful products.</h2>
+          <p>
+            Cedarline Digital is the operating home for software products, support resources, policies, and selected development work from British Columbia.
+          </p>
         </div>
         <div class="about-grid">
-          <div class="section-copy">
-            <p>
-              Cedarline Digital is an independent software business focused on building practical software, web applications, and digital systems.
-            </p>
-            <p>
-              The emphasis is on maintainable architecture, dependable operation, and software that remains useful over time.
-            </p>
+          <div class="operations-preview" aria-label="Cedarline operating model">
+            <div class="preview-header">
+              <span>Operating model</span>
+              <strong>2026</strong>
+            </div>
+            <div class="preview-grid">
+              <article>
+                <span>01</span>
+                <h3>Build</h3>
+                <p>Focused tools and services with practical scope.</p>
+              </article>
+              <article>
+                <span>02</span>
+                <h3>Support</h3>
+                <p>Clear product support, policies, and contact paths.</p>
+              </article>
+              <article>
+                <span>03</span>
+                <h3>Maintain</h3>
+                <p>Stable foundations that can keep improving over time.</p>
+              </article>
+            </div>
           </div>
           <aside class="studio-panel" aria-label="Studio details">
+            <p class="panel-label">Studio profile</p>
             <dl>
               <div>
                 <dt>Focus</dt>
@@ -141,55 +160,73 @@
       <section class="section" id="work" aria-labelledby="work-title">
         <div class="section-heading">
           <p class="eyebrow">Work</p>
-          <h2 id="work-title">What Cedarline Digital stands for.</h2>
+          <h2 id="work-title">What Cedarline Digital is for.</h2>
+          <p>
+            The public site should feel like a calm front desk for a real software business: clear enough for customers, restrained enough for policies and support, and flexible enough for future products.
+          </p>
         </div>
-        <div class="card-grid">
+        <div class="card-grid work-list">
           <article class="service-card">
-            <span class="card-icon software-icon" aria-hidden="true"></span>
-            <h3>Reliable Software</h3>
-            <p>Systems should be dependable, understandable, and built to last.</p>
+            <div>
+              <span class="work-index" aria-hidden="true">01</span>
+              <p class="service-type">Products</p>
+            </div>
+            <h3>Independent software</h3>
+            <p>Apps, web tools, and SaaS projects developed under the Cedarline Digital name.</p>
           </article>
           <article class="service-card">
-            <span class="card-icon web-icon" aria-hidden="true"></span>
-            <h3>Practical Engineering</h3>
-            <p>Technology choices should serve the project, not the other way around.</p>
+            <div>
+              <span class="work-index" aria-hidden="true">02</span>
+              <p class="service-type">Resources</p>
+            </div>
+            <h3>Support and policies</h3>
+            <p>A dependable place for customer support, privacy policies, terms, and release information.</p>
           </article>
           <article class="service-card">
-            <span class="card-icon maintain-icon" aria-hidden="true"></span>
-            <h3>Clear Interfaces</h3>
-            <p>Software should feel straightforward and easy to use.</p>
+            <div>
+              <span class="work-index" aria-hidden="true">03</span>
+              <p class="service-type">Systems</p>
+            </div>
+            <h3>Web infrastructure</h3>
+            <p>Frontend, backend, API, dashboard, automation, and deployment work where the requirements are concrete.</p>
           </article>
           <article class="service-card">
-            <span class="card-icon engineering-icon" aria-hidden="true"></span>
-            <h3>Long-Term Maintenance</h3>
-            <p>Projects should be designed with future updates and support in mind.</p>
+            <div>
+              <span class="work-index" aria-hidden="true">04</span>
+              <p class="service-type">Advisory</p>
+            </div>
+            <h3>Selected client work</h3>
+            <p>Practical development support when the technical fit, scope, and long-term maintenance path are clear.</p>
           </article>
         </div>
       </section>
 
-      <section class="section brand-section" id="principles" aria-labelledby="brand-title">
-        <div class="section-heading centered">
+      <section class="section brand-section content-band" id="principles" aria-labelledby="brand-title">
+        <div class="section-heading">
           <p class="eyebrow">Principles</p>
-          <h2 id="brand-title">How the work should feel.</h2>
+          <h2 id="brand-title">Professional does not have to feel sterile.</h2>
+          <p>
+            The tone is quiet, capable, and grounded: polished enough to earn trust, but direct enough to avoid inflated claims.
+          </p>
         </div>
         <div class="principle-list">
           <article>
-            <span class="line-icon foundation-icon" aria-hidden="true"></span>
+            <span>Foundation</span>
             <h3>Reliable foundations</h3>
             <p>Software should be built on clear, dependable technical choices.</p>
           </article>
           <article>
-            <span class="line-icon engineering-icon" aria-hidden="true"></span>
+            <span>Execution</span>
             <h3>Practical engineering</h3>
             <p>Tools and frameworks should serve the project, not complicate it.</p>
           </article>
           <article>
-            <span class="line-icon experience-icon" aria-hidden="true"></span>
+            <span>Experience</span>
             <h3>Clear interfaces</h3>
             <p>Good software should feel calm, direct, and understandable.</p>
           </article>
           <article>
-            <span class="line-icon maintain-icon" aria-hidden="true"></span>
+            <span>Lifecycle</span>
             <h3>Maintainable systems</h3>
             <p>Projects should leave room for updates, support, and future growth.</p>
           </article>
@@ -217,7 +254,7 @@
         <div class="contact-panel">
           <div class="contact-copy">
             <p class="eyebrow">Contact</p>
-            <h2 id="contact-title" class="sr-only">Contact Cedarline Digital</h2>
+            <h2 id="contact-title">A clear line for support and business inquiries.</h2>
             <p>
               For general contact, support, or business inquiries, use the following email.
             </p>
diff --git a/privacy/index.html b/privacy/index.html
index 90af9e0..83d4b1f 100644
--- a/privacy/index.html
+++ b/privacy/index.html
@@ -51,31 +51,38 @@
       </nav>
     </header>
 
-    <main class="content-main">
-      <article class="content-shell">
+    <main class="content-main hub-main">
+      <section class="content-hero" aria-labelledby="privacy-title">
         <p class="eyebrow">Cedarline Digital</p>
-        <h1>Privacy</h1>
-        <p class="lead">
-          Cedarline Digital builds independent software, apps, and digital tools.
-        </p>
+        <h1 id="privacy-title">Privacy</h1>
         <p>
-          Each product may handle data differently depending on what it does. Product-specific privacy policies are listed below.
+          Privacy information for Cedarline Digital products, apps, and digital tools.
         </p>
+      </section>
 
-        <section aria-labelledby="product-policies-title">
-          <h2 id="product-policies-title">Product Policies</h2>
-          <ul class="link-list">
-            <li><a href="/privacy/left-unsaid">Left Unsaid Privacy Policy</a></li>
-          </ul>
-          <p>Additional product policies will be added here as new projects are released.</p>
-        </section>
+      <div class="content-layout">
+        <article class="content-shell hub-shell">
+          <section aria-labelledby="product-policies-title">
+            <p class="section-label">Product policies</p>
+            <h2 id="product-policies-title">Available policies</h2>
+            <div class="document-links">
+              <a href="/privacy/left-unsaid">
+                <span>Privacy Policy</span>
+                <strong>Left Unsaid</strong>
+                <p>How the private writing app handles local notes, support messages, and app data.</p>
+              </a>
+            </div>
+            <p>Additional product policies will be added here as new projects are released.</p>
+          </section>
+        </article>
 
-        <section aria-labelledby="contact-title">
-          <h2 id="contact-title">Contact</h2>
-          <p>For privacy questions, contact Cedarline Digital at:</p>
-          <p>Email: <a href="mailto:support@cedarline.digital">support@cedarline.digital</a></p>
-        </section>
-      </article>
+        <aside class="content-aside" aria-labelledby="privacy-contact-title">
+          <p class="section-label">Contact</p>
+          <h2 id="privacy-contact-title">Privacy questions</h2>
+          <p>For privacy questions, contact Cedarline Digital directly.</p>
+          <a class="aside-link" href="mailto:support@cedarline.digital">support@cedarline.digital</a>
+        </aside>
+      </div>
     </main>
 
     <footer class="site-footer">
diff --git a/privacy/left-unsaid/index.html b/privacy/left-unsaid/index.html
index 21fd7f6..045ed3d 100644
--- a/privacy/left-unsaid/index.html
+++ b/privacy/left-unsaid/index.html
@@ -51,8 +51,8 @@
       </nav>
     </header>
 
-    <main class="content-main">
-      <article class="content-shell">
+    <main class="content-main document-main">
+      <article class="content-shell document-shell">
         <nav class="breadcrumb" aria-label="Breadcrumb">
           <a href="/">Home</a>
           <span aria-hidden="true">/</span>
@@ -61,7 +61,7 @@
 
         <p class="eyebrow">Product Policy</p>
         <h1>Left Unsaid Privacy Policy</h1>
-        <dl class="policy-meta">
+        <dl class="policy-meta document-meta">
           <div>
             <dt>Effective Date</dt>
             <dd>June 2026</dd>
diff --git a/styles.css b/styles.css
index 194e60d..8b0ef46 100644
--- a/styles.css
+++ b/styles.css
@@ -2905,3 +2905,1203 @@ main::before {
         gap: 4px;
     }
 }
+
+/* Below-hero redesign: quieter, more editorial, less decorative. */
+body {
+  background: #0f1111;
+}
+
+body::before,
+body::after,
+main::before,
+.about-section::after,
+#work::before,
+.brand-section::before,
+.contact-panel::after {
+  display: none;
+}
+
+main {
+  overflow: visible;
+  background:
+    linear-gradient(180deg, rgba(15, 17, 17, 0) 0, #0f1111 8rem),
+    #0f1111;
+}
+
+.section {
+  width: min(100% - 40px, 1180px);
+  padding: clamp(76px, 10vw, 128px) 0;
+}
+
+.section-heading {
+  max-width: 680px;
+  margin-bottom: 36px;
+}
+
+.section-heading.centered {
+  text-align: left;
+}
+
+.eyebrow {
+  color: #9fc7a6;
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.72rem;
+  letter-spacing: 0.18em;
+}
+
+.section h2 {
+  color: #f1f3ef;
+  font-size: clamp(2rem, 3.1vw, 3.35rem);
+  letter-spacing: 0;
+}
+
+.content-band {
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.about-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
+  gap: clamp(34px, 6vw, 82px);
+  align-items: start;
+  padding-top: clamp(86px, 10vw, 132px);
+}
+
+.about-section .section-heading {
+  position: sticky;
+  top: 108px;
+  margin-bottom: 0;
+}
+
+.about-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 22px;
+}
+
+.section-copy {
+  max-width: none;
+  padding: 0 0 0 28px;
+  border-left: 2px solid rgba(159, 199, 166, 0.36);
+  background: transparent;
+}
+
+.section-copy p {
+  color: rgba(230, 232, 230, 0.76);
+  font-size: clamp(1rem, 1.45vw, 1.16rem);
+}
+
+.studio-panel {
+  max-width: none;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 8px;
+  background: rgba(23, 28, 26, 0.72);
+  box-shadow: none;
+}
+
+.panel-label {
+  margin: 0;
+  padding: 18px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  color: rgba(230, 232, 230, 0.92);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.studio-panel dl {
+  margin: 0;
+}
+
+.studio-panel div {
+  grid-template-columns: 118px minmax(0, 1fr);
+  gap: 22px;
+  padding: 18px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+.studio-panel div:last-child {
+  border-bottom: 0;
+}
+
+.studio-panel dt {
+  color: rgba(159, 199, 166, 0.86);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.68rem;
+  letter-spacing: 0.1em;
+}
+
+.studio-panel dd {
+  color: rgba(241, 243, 239, 0.9);
+  font-weight: 650;
+}
+
+#work {
+  display: grid;
+  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
+  gap: clamp(34px, 6vw, 86px);
+  align-items: start;
+  padding-top: clamp(74px, 9vw, 116px);
+  padding-bottom: clamp(74px, 9vw, 116px);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+#work .section-heading {
+  display: block;
+  max-width: 520px;
+  margin-bottom: 0;
+}
+
+#work .section-heading h2 {
+  max-width: none;
+  margin-bottom: 0;
+}
+
+.work-intro {
+  grid-column: 2;
+  margin-bottom: 22px;
+  color: rgba(230, 232, 230, 0.72);
+  font-size: 1.02rem;
+}
+
+.work-intro p {
+  max-width: 620px;
+  margin: 0;
+}
+
+#work .work-list {
+  grid-column: 2;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+#work .service-card {
+  display: grid;
+  grid-template-columns: 64px minmax(180px, 0.4fr) minmax(0, 1fr);
+  gap: 24px;
+  align-items: start;
+  min-height: auto;
+  padding: 24px 0;
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  transition: border-color 160ms ease;
+}
+
+#work .service-card:hover,
+#work .service-card:nth-child(even),
+#work .service-card:nth-child(even):hover {
+  transform: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+#work .service-card:hover {
+  border-color: rgba(159, 199, 166, 0.34);
+}
+
+#work .service-card::after {
+  display: none;
+}
+
+.work-index {
+  color: rgba(159, 199, 166, 0.8);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+
+#work .service-card h3 {
+  margin: 0;
+  color: #f1f3ef;
+  font-size: 1.08rem;
+}
+
+#work .service-card p {
+  max-width: 600px;
+  margin: 0;
+  color: rgba(230, 232, 230, 0.68);
+}
+
+.brand-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
+  gap: clamp(34px, 6vw, 82px);
+  align-items: start;
+  width: min(100% - 40px, 1180px);
+  padding: clamp(68px, 8vw, 104px) 0;
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.brand-section .section-heading {
+  margin: 0;
+}
+
+.brand-section .section-heading h2 {
+  font-size: clamp(2rem, 3.1vw, 3.35rem);
+}
+
+.principle-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.principle-list article,
+.principle-list article:nth-child(2),
+.principle-list article:nth-child(4) {
+  min-height: 170px;
+  margin-top: 0;
+  padding: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 8px;
+  background: rgba(23, 28, 26, 0.58);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.principle-list article:hover {
+  transform: none;
+  border-color: rgba(159, 199, 166, 0.28);
+  background: rgba(31, 41, 36, 0.68);
+  box-shadow: none;
+}
+
+.principle-list h3 {
+  color: #f1f3ef;
+}
+
+.principle-list p {
+  color: rgba(230, 232, 230, 0.68);
+}
+
+.contact-section {
+  padding-top: clamp(34px, 5vw, 70px);
+}
+
+.contact-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
+  gap: clamp(30px, 6vw, 76px);
+  align-items: center;
+  overflow: visible;
+  padding: clamp(30px, 5vw, 54px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  background: #151a18;
+  box-shadow: none;
+}
+
+.contact-copy h2 {
+  max-width: 660px;
+  font-size: clamp(2rem, 3.1vw, 3.35rem);
+}
+
+.contact-copy p,
+.contact-panel .contact-note {
+  color: rgba(230, 232, 230, 0.7);
+}
+
+.contact-action {
+  justify-self: end;
+  padding-top: 0;
+}
+
+.contact-link {
+  min-height: 54px;
+  border-color: rgba(159, 199, 166, 0.26);
+  background: rgba(15, 17, 17, 0.5);
+}
+
+.contact-note {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding-top: 22px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+@media (max-width: 920px) {
+  .about-section,
+  #work,
+  .brand-section,
+  .contact-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .about-section .section-heading {
+    position: static;
+  }
+
+  .work-intro,
+  #work .work-list {
+    grid-column: auto;
+  }
+
+  #work .service-card {
+    grid-template-columns: 54px minmax(0, 1fr);
+  }
+
+  #work .service-card p {
+    grid-column: 2;
+  }
+
+  .contact-action {
+    justify-self: start;
+  }
+}
+
+@media (max-width: 760px) {
+  .section,
+  .brand-section {
+    width: min(100% - 24px, 1180px);
+  }
+
+  .section-copy {
+    padding-left: 18px;
+  }
+
+  .studio-panel div {
+    grid-template-columns: 1fr;
+    gap: 5px;
+  }
+
+  #work .service-card,
+  .principle-list {
+    grid-template-columns: 1fr;
+  }
+
+  #work .service-card p {
+    grid-column: auto;
+  }
+
+  .contact-panel {
+    padding: 26px 18px;
+  }
+}
+
+/* Third-pass layout: more business polish without novelty decoration. */
+main {
+  background:
+    linear-gradient(180deg, rgba(15, 17, 17, 0) 0, #0f1111 7rem),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) center top / min(18vw, 220px) 100%,
+    #0f1111;
+}
+
+.section-heading p:not(.eyebrow) {
+  max-width: 620px;
+  margin: 18px 0 0;
+  color: rgba(230, 232, 230, 0.7);
+  font-size: clamp(1rem, 1.35vw, 1.12rem);
+}
+
+.about-section {
+  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
+}
+
+.operations-preview {
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(31, 41, 36, 0.94), rgba(15, 17, 17, 0.74)),
+    #171c1a;
+  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.22);
+}
+
+.preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 58px;
+  padding: 0 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
+  color: rgba(230, 232, 230, 0.78);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.preview-header strong {
+  color: #d7f2dc;
+  font-size: 0.78rem;
+}
+
+.preview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.preview-grid article {
+  min-height: 188px;
+  padding: 22px;
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.preview-grid article:last-child {
+  border-right: 0;
+}
+
+.preview-grid span,
+.principle-list span,
+.service-type {
+  color: rgba(159, 199, 166, 0.78);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.preview-grid h3 {
+  margin: 34px 0 10px;
+  color: #f1f3ef;
+  font-size: 1.28rem;
+}
+
+.preview-grid p {
+  margin: 0;
+  color: rgba(230, 232, 230, 0.68);
+  font-size: 0.96rem;
+}
+
+.studio-panel {
+  background: rgba(13, 16, 15, 0.72);
+}
+
+#work {
+  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
+}
+
+#work .work-list {
+  gap: 16px;
+  border-top: 0;
+}
+
+#work .service-card {
+  grid-template-columns: minmax(120px, 0.24fr) minmax(210px, 0.34fr) minmax(0, 1fr);
+  gap: 24px;
+  min-height: 158px;
+  padding: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 8px;
+  background: rgba(23, 28, 26, 0.5);
+}
+
+#work .service-card:nth-child(2),
+#work .service-card:nth-child(4) {
+  margin-left: clamp(0px, 4vw, 54px);
+}
+
+#work .service-card:hover {
+  border-color: rgba(159, 199, 166, 0.36);
+  background: rgba(31, 41, 36, 0.66);
+}
+
+.work-index {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.service-type {
+  margin: 0;
+}
+
+#work .service-card h3 {
+  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
+  line-height: 1.12;
+}
+
+#work .service-card p:not(.service-type) {
+  align-self: start;
+  color: rgba(230, 232, 230, 0.72);
+  font-size: 1rem;
+}
+
+.brand-section {
+  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
+}
+
+.principle-list {
+  gap: 14px;
+}
+
+.principle-list article,
+.principle-list article:nth-child(2),
+.principle-list article:nth-child(4) {
+  display: flex;
+  flex-direction: column;
+  min-height: 224px;
+  padding: 24px;
+}
+
+.principle-list article:nth-child(1),
+.principle-list article:nth-child(4) {
+  background: rgba(31, 41, 36, 0.72);
+}
+
+.principle-list h3 {
+  margin-top: auto;
+  font-size: 1.2rem;
+}
+
+.principle-list p {
+  margin-top: 2px;
+}
+
+.contact-section {
+  padding-bottom: clamp(78px, 10vw, 132px);
+}
+
+.contact-panel {
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(135deg, rgba(31, 41, 36, 0.92), rgba(13, 16, 15, 0.96)),
+    #151a18;
+}
+
+.contact-panel::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(34%, 340px);
+  background: rgba(159, 199, 166, 0.06);
+  content: "";
+}
+
+.contact-copy,
+.contact-action,
+.contact-note {
+  position: relative;
+  z-index: 1;
+}
+
+.contact-copy h2 {
+  margin-bottom: 16px;
+}
+
+@media (max-width: 1040px) {
+  .preview-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .preview-grid article {
+    min-height: auto;
+    border-right: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .preview-grid article:last-child {
+    border-bottom: 0;
+  }
+
+  .preview-grid h3 {
+    margin-top: 22px;
+  }
+
+  #work .service-card,
+  #work .service-card:nth-child(2),
+  #work .service-card:nth-child(4) {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 920px) {
+  .about-section,
+  #work,
+  .brand-section {
+    grid-template-columns: 1fr;
+  }
+
+  #work .service-card {
+    grid-template-columns: minmax(86px, 0.22fr) minmax(0, 1fr);
+  }
+
+  #work .service-card p:not(.service-type) {
+    grid-column: 2;
+  }
+}
+
+@media (max-width: 760px) {
+  main {
+    background: #0f1111;
+  }
+
+  .operations-preview,
+  #work .service-card,
+  .principle-list article,
+  .contact-panel {
+    border-radius: 8px;
+  }
+
+  #work .service-card {
+    grid-template-columns: 1fr;
+    padding: 22px;
+  }
+
+  #work .service-card p:not(.service-type) {
+    grid-column: auto;
+  }
+
+  .principle-list article,
+  .principle-list article:nth-child(2),
+  .principle-list article:nth-child(4) {
+    min-height: 190px;
+  }
+
+  .contact-panel::before {
+    display: none;
+  }
+}
+
+/* Studio profile and background refinement. */
+body {
+  background:
+    linear-gradient(180deg, rgba(15, 17, 17, 0.18), #0f1111 820px),
+    linear-gradient(90deg, rgba(15, 17, 17, 0.94), rgba(15, 17, 17, 0.74) 48%, rgba(15, 17, 17, 0.92)),
+    url("assets/images/backdrop.jpg") center top / cover no-repeat fixed,
+    #0f1111;
+}
+
+main {
+  background:
+    linear-gradient(180deg, rgba(15, 17, 17, 0) 0, #0f1111 7rem),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px) center top / min(18vw, 220px) 100%,
+    linear-gradient(180deg, transparent 0 34%, rgba(159, 199, 166, 0.035) 34% 34.12%, transparent 34.12%),
+    #0f1111;
+}
+
+.studio-panel {
+  min-height: 310px;
+  background: rgba(13, 16, 15, 0.84);
+}
+
+.panel-label {
+  padding: 22px 28px;
+}
+
+.studio-panel div {
+  grid-template-columns: minmax(112px, 0.22fr) minmax(0, 1fr);
+  min-height: 72px;
+  padding: 20px 28px;
+}
+
+.studio-panel dd {
+  font-size: clamp(1rem, 1.5vw, 1.14rem);
+  line-height: 1.45;
+}
+
+.about-grid {
+  gap: 24px;
+}
+
+.operations-preview {
+  min-height: 250px;
+}
+
+@media (max-width: 760px) {
+  body,
+  main {
+    background: #0f1111;
+  }
+
+  .panel-label,
+  .studio-panel div {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+
+  .studio-panel {
+    min-height: auto;
+  }
+}
+
+/* Alternative background and resource page system. */
+body {
+  background:
+    linear-gradient(180deg, rgba(15, 17, 17, 0.42), #0f1111 760px),
+    linear-gradient(120deg, rgba(159, 199, 166, 0.075) 0 1px, transparent 1px 120px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) center top / min(18vw, 220px) 100%,
+    #0f1111;
+}
+
+body::before {
+  display: block;
+  z-index: -3;
+  background:
+    linear-gradient(135deg, transparent 0 34%, rgba(159, 199, 166, 0.055) 34% 34.12%, transparent 34.12%),
+    linear-gradient(28deg, transparent 0 72%, rgba(79, 138, 107, 0.045) 72% 72.12%, transparent 72.12%);
+  opacity: 0.78;
+}
+
+body::after {
+  display: block;
+  z-index: -3;
+  background:
+    linear-gradient(180deg, rgba(15, 17, 17, 0), rgba(15, 17, 17, 0.84)),
+    linear-gradient(90deg, transparent 0 12%, rgba(31, 41, 36, 0.18) 12% 12.08%, transparent 12.08% 100%);
+  opacity: 1;
+}
+
+main,
+.content-page {
+  background:
+    linear-gradient(180deg, rgba(15, 17, 17, 0) 0, #0f1111 7rem),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px) center top / min(18vw, 220px) 100%,
+    #0f1111;
+}
+
+.content-page main {
+  background: transparent;
+}
+
+.content-main {
+  width: min(100% - 40px, 1180px);
+  padding: 142px 0 74px;
+}
+
+.hub-main {
+  display: grid;
+  gap: 34px;
+}
+
+.content-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 0.64fr) minmax(280px, 0.36fr);
+  gap: clamp(30px, 6vw, 78px);
+  align-items: end;
+  padding-bottom: 30px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.content-hero h1 {
+  max-width: 760px;
+  margin-bottom: 0;
+  color: #f1f3ef;
+  font-size: clamp(2.6rem, 6vw, 5.2rem);
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.content-hero p:not(.eyebrow) {
+  max-width: 430px;
+  margin: 0;
+  color: rgba(230, 232, 230, 0.72);
+  font-size: 1.08rem;
+}
+
+.content-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
+  gap: clamp(20px, 4vw, 36px);
+  align-items: start;
+}
+
+.content-shell {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(13, 16, 15, 0.76);
+  box-shadow: none;
+}
+
+.hub-shell {
+  min-height: 360px;
+}
+
+.content-shell h2 {
+  color: #f1f3ef;
+}
+
+.section-label {
+  margin: 0 0 14px;
+  color: rgba(159, 199, 166, 0.78);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.document-links {
+  display: grid;
+  gap: 12px;
+  margin: 24px 0;
+}
+
+.document-links a {
+  position: relative;
+  display: grid;
+  gap: 8px;
+  padding: 22px 58px 22px 22px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 8px;
+  background: rgba(23, 28, 26, 0.62);
+  text-decoration: none;
+}
+
+.document-links a::after {
+  position: absolute;
+  top: 22px;
+  right: 22px;
+  color: rgba(159, 199, 166, 0.82);
+  content: "›";
+  font-size: 1.45rem;
+  line-height: 1;
+}
+
+.document-links a:hover,
+.document-links a:focus-visible {
+  border-color: rgba(159, 199, 166, 0.3);
+  background: rgba(31, 41, 36, 0.68);
+  outline: none;
+}
+
+.document-links span {
+  color: rgba(159, 199, 166, 0.78);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.document-links strong {
+  color: #f1f3ef;
+  font-size: 1.22rem;
+}
+
+.document-links p {
+  max-width: 620px;
+  margin: 0;
+  color: rgba(230, 232, 230, 0.68);
+}
+
+.content-aside {
+  position: sticky;
+  top: 106px;
+  padding: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  background: rgba(23, 28, 26, 0.72);
+}
+
+.content-aside h2 {
+  margin: 0 0 14px;
+  color: #f1f3ef;
+  font-size: 1.25rem;
+}
+
+.content-aside p {
+  margin: 0 0 20px;
+  color: rgba(230, 232, 230, 0.68);
+}
+
+.aside-link {
+  display: inline-flex;
+  max-width: 100%;
+  color: #d7f2dc;
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: clamp(0.78rem, 1.3vw, 0.9rem);
+  overflow-wrap: anywhere;
+}
+
+.document-main {
+  width: min(100% - 40px, 980px);
+}
+
+.document-shell {
+  padding: clamp(28px, 5vw, 56px);
+}
+
+.document-shell h1 {
+  max-width: 780px;
+  margin-bottom: 26px;
+  color: #f1f3ef;
+  font-size: clamp(2.3rem, 5vw, 4.4rem);
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.document-shell .lead {
+  max-width: 760px;
+  margin-bottom: 32px;
+  color: rgba(241, 243, 239, 0.86);
+}
+
+.document-shell section {
+  padding-top: 26px;
+  margin-top: 26px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.document-shell section:first-of-type {
+  margin-top: 0;
+}
+
+.document-shell h2 {
+  margin-top: 0;
+}
+
+.document-meta {
+  margin-bottom: 34px;
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.breadcrumb,
+.related-links {
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.78rem;
+}
+
+.related-links {
+  align-items: stretch;
+}
+
+.related-links a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 12px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 8px;
+  text-decoration: none;
+}
+
+@media (max-width: 920px) {
+  .content-hero,
+  .content-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .content-aside {
+    position: static;
+  }
+}
+
+@media (max-width: 760px) {
+  body,
+  body::before,
+  body::after,
+  main,
+  .content-page {
+    background: #0f1111;
+  }
+
+  .content-main,
+  .document-main {
+    width: min(100% - 24px, 1180px);
+    padding-top: 112px;
+  }
+
+  .content-hero {
+    gap: 18px;
+  }
+
+  .document-links a {
+    padding-right: 22px;
+  }
+
+  .document-links a::after {
+    display: none;
+  }
+}
+
+/* Structured background option: texture and contour, no glow. */
+body {
+  background:
+    linear-gradient(180deg, #0d100f 0, #0f1111 48rem),
+    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 14rem),
+    #0f1111;
+}
+
+body::before,
+body::after {
+  display: none;
+}
+
+main {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(15, 17, 17, 0) 0, #0f1111 7rem),
+    #0f1111;
+}
+
+main::before {
+  position: absolute;
+  top: 100vh;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  display: block;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) center top / min(18vw, 220px) 100%,
+    repeating-linear-gradient(135deg, transparent 0 46px, rgba(159, 199, 166, 0.035) 46px 47px, transparent 47px 132px),
+    repeating-radial-gradient(ellipse at 82% 18%, transparent 0 44px, rgba(159, 199, 166, 0.05) 45px 46px, transparent 47px 94px),
+    repeating-radial-gradient(ellipse at 12% 76%, transparent 0 54px, rgba(255, 255, 255, 0.035) 55px 56px, transparent 57px 116px),
+    linear-gradient(180deg, #0f1111 0, #121815 42%, #0f1111 100%);
+}
+
+.hero,
+.section,
+.site-footer {
+  position: relative;
+  z-index: 1;
+}
+
+.content-page {
+  background:
+    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 13rem),
+    repeating-linear-gradient(135deg, transparent 0 42px, rgba(159, 199, 166, 0.035) 42px 43px, transparent 43px 128px),
+    #0f1111;
+}
+
+.content-page main {
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(13, 16, 15, 0.92), rgba(15, 17, 17, 0.98)),
+    #0f1111;
+}
+
+.content-page main::before {
+  top: 0;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) center top / min(18vw, 220px) 100%,
+    repeating-radial-gradient(ellipse at 88% 10%, transparent 0 48px, rgba(159, 199, 166, 0.052) 49px 50px, transparent 51px 108px),
+    repeating-radial-gradient(ellipse at 8% 82%, transparent 0 58px, rgba(255, 255, 255, 0.035) 59px 60px, transparent 61px 128px),
+    linear-gradient(180deg, #101412 0, #0f1111 100%);
+}
+
+.content-shell,
+.content-aside,
+.studio-panel,
+.operations-preview,
+#work .service-card,
+.principle-list article,
+.contact-panel {
+  backdrop-filter: none;
+  background-color: rgba(13, 16, 15, 0.82);
+}
+
+@media (max-width: 760px) {
+  body,
+  main,
+  .content-page,
+  .content-page main {
+    background:
+      repeating-linear-gradient(135deg, transparent 0 44px, rgba(159, 199, 166, 0.028) 44px 45px, transparent 45px 124px),
+      #0f1111;
+  }
+
+  main::before,
+  .content-page main::before {
+    display: none;
+  }
+}
+
+/* Landing page background restraint; keep resource pages more textured. */
+body:not(.content-page) {
+  background:
+    linear-gradient(180deg, #0d100f 0, #0f1111 48rem),
+    #0f1111;
+}
+
+body:not(.content-page) main::before {
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) center top / min(22vw, 280px) 100%,
+    linear-gradient(180deg, #0f1111 0, #111613 44%, #0f1111 100%);
+}
+
+@media (max-width: 760px) {
+  body:not(.content-page),
+  body:not(.content-page) main {
+    background: #0f1111;
+  }
+}
+
+/* Resource page hero cleanup. */
+.content-page {
+  background:
+    linear-gradient(180deg, #0d100f 0, #0f1111 44rem),
+    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 16rem),
+    #0f1111;
+}
+
+.content-page main {
+  background:
+    linear-gradient(180deg, rgba(15, 17, 17, 0.18) 0, rgba(15, 17, 17, 0.92) 22rem, #0f1111 100%),
+    #0f1111;
+}
+
+.content-page main::before {
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) center top / min(20vw, 260px) 100%,
+    linear-gradient(180deg, #101412 0, #0f1111 100%);
+}
+
+.content-hero {
+  display: block;
+  max-width: 820px;
+  padding: clamp(26px, 5vw, 46px) 0 34px;
+}
+
+.content-hero h1 {
+  margin-bottom: 22px;
+  font-size: clamp(3rem, 6.4vw, 5.4rem);
+  line-height: 0.98;
+}
+
+.content-hero p:not(.eyebrow) {
+  max-width: 560px;
+  color: rgba(230, 232, 230, 0.76);
+}
+
+.hub-main {
+  gap: 34px;
+}
+
+.document-links strong {
+  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
+}
+
+.document-links span {
+  order: 2;
+}
+
+.document-links p {
+  order: 3;
+}
+
+@media (max-width: 760px) {
+  .content-page,
+  .content-page main {
+    background:
+      linear-gradient(180deg, #0d100f 0, #0f1111 26rem),
+      #0f1111;
+  }
+
+  .content-hero {
+    padding-top: 12px;
+  }
+}
diff --git a/support/index.html b/support/index.html
index 626c9e4..8484cce 100644
--- a/support/index.html
+++ b/support/index.html
@@ -51,24 +51,38 @@
       </nav>
     </header>
 
-    <main class="content-main">
-      <article class="content-shell">
+    <main class="content-main hub-main">
+      <section class="content-hero" aria-labelledby="support-title">
         <p class="eyebrow">Cedarline Digital</p>
-        <h1>Support</h1>
-        <p class="lead">Need help with a Cedarline Digital app or project?</p>
-        <p>Choose a product below:</p>
+        <h1 id="support-title">Support</h1>
+        <p>
+          Support information for Cedarline Digital software, apps, and released projects.
+        </p>
+      </section>
 
-        <ul class="link-list">
-          <li><a href="/support/left-unsaid">Left Unsaid Support</a></li>
-        </ul>
+      <div class="content-layout">
+        <article class="content-shell hub-shell">
+          <section aria-labelledby="product-support-title">
+            <p class="section-label">Product support</p>
+            <h2 id="product-support-title">Choose a product</h2>
+            <div class="document-links">
+              <a href="/support/left-unsaid">
+                <span>Support</span>
+                <strong>Left Unsaid</strong>
+                <p>Help, contact guidance, and privacy links for the private writing app.</p>
+              </a>
+            </div>
+            <p>More support pages will be added as new projects are released.</p>
+          </section>
+        </article>
 
-        <p>More support pages will be added as new projects are released.</p>
-
-        <section aria-labelledby="contact-title">
-          <h2 id="contact-title">Contact</h2>
-          <p>Email: <a href="mailto:support@cedarline.digital">support@cedarline.digital</a></p>
-        </section>
-      </article>
+        <aside class="content-aside" aria-labelledby="support-contact-title">
+          <p class="section-label">Contact</p>
+          <h2 id="support-contact-title">General support</h2>
+          <p>For product help or support questions, email Cedarline Digital.</p>
+          <a class="aside-link" href="mailto:support@cedarline.digital">support@cedarline.digital</a>
+        </aside>
+      </div>
     </main>
 
     <footer class="site-footer">
diff --git a/support/left-unsaid/index.html b/support/left-unsaid/index.html
index 6667366..f69cf18 100644
--- a/support/left-unsaid/index.html
+++ b/support/left-unsaid/index.html
@@ -51,8 +51,8 @@
       </nav>
     </header>
 
-    <main class="content-main">
-      <article class="content-shell">
+    <main class="content-main document-main">
+      <article class="content-shell document-shell">
         <nav class="breadcrumb" aria-label="Breadcrumb">
           <a href="/">Home</a>
           <span aria-hidden="true">/</span>
@@ -61,6 +61,16 @@
 
         <p class="eyebrow">Product Support</p>
         <h1>Left Unsaid Support</h1>
+        <dl class="policy-meta document-meta">
+          <div>
+            <dt>Product</dt>
+            <dd>Left Unsaid</dd>
+          </div>
+          <div>
+            <dt>Support</dt>
+            <dd><a href="mailto:support@cedarline.digital">support@cedarline.digital</a></dd>
+          </div>
+        </dl>
         <p class="lead">
           Left Unsaid is a private writing app for thoughts, feelings, and notes you want to let out quietly.
         </p>