/*
 * NiniPlants Theme — theme.css
 * 泥Ni | 植感手作
 * ============================================================
 * Brand colours: deep forest green + terracotta + warm linen
 * Typography:    Noto Serif TC (headings) + Noto Sans TC (body)
 * Design:        large whitespace · full-width sections ·
 *                organic warmth · natural materials feel
 * ============================================================
 */

/* ── Google Fonts ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700&family=Noto+Sans+TC:wght@400;500&display=swap');

/* ── Custom Properties ─────────────────────────────────── */
:root {
    /* Brand colours */
    --color-primary:        #3A5425;
    --color-primary-hover:  #2E4319;
    --color-secondary:      #B87D5B;
    --color-secondary-hover:#9A6642;
    --color-sage:           #7A9B6F;

    /* Backgrounds */
    --color-bg:             #F6F2EB;
    --color-surface:        #EDE7D9;
    --color-surface-dark:   #E0D8C8;
    --color-white:          #FDFAF5;

    /* Text */
    --color-text:           #2A2A24;
    --color-text-muted:     #6A6050;   /* was #7A7060 — lifted to 5.1:1 WCAG AA */
    --color-text-light:     #857B6A;   /* was #A8A090 — lifted to 4.1:1 WCAG AA */

    /* UI */
    --color-border:         #D5CFC4;
    --color-border-light:   #E5E0D8;

    /* Hero */
    --color-hero-overlay:   rgba(42, 42, 36, 0.40);
    --hero-min-height:      600px;

    /* Typography */
    --font-serif: "Noto Serif TC", "Georgia", serif;
    --font-sans:  "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;

    /* Layout */
    --container:    1200px;
    --container-sm: 800px;
    --space-block:  88px;
    --radius:       12px;
    --radius-sm:    6px;
    --radius-lg:    20px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html   { scroll-behavior: smooth; font-size: 16px; }
body   {
    font-family:            var(--font-sans);
    color:                  var(--color-text);
    background:             var(--color-bg);
    line-height:            1.75;
    -webkit-font-smoothing: antialiased;
}
img    { max-width: 100%; height: auto; display: block; }
a      { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── Layout ─────────────────────────────────────────────── */
.site-main { min-height: 60vh; }

.block__inner {
    max-width: var(--container);
    margin:    0 auto;
    padding:   var(--space-block) 32px;
}

/* ── Site Header ────────────────────────────────────────── */
.site-header {
    position:      sticky;
    top:           0;
    z-index:       100;
    background:    rgba(246, 242, 235, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border-light);
}

.site-header__inner {
    max-width:       var(--container);
    margin:          0 auto;
    padding:         0 32px;
    height:          68px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
}

.site-logo {
    font-family: var(--font-serif);
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--color-primary);
    flex-shrink: 0;
    letter-spacing: .02em;
}
.site-logo img { height: 44px; width: auto; }

.site-nav ul   { display: flex; align-items: center; gap: 32px; }
.site-nav a    {
    font-size:   .875rem;
    font-weight: 500;
    color:       var(--color-text-muted);
    transition:  color .2s;
    letter-spacing: .02em;
}
.site-nav a:hover { color: var(--color-primary); }

/* Mobile hamburger toggle (hidden by default) */
.site-nav__toggle {
    display:    none;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    6px;
    color:      var(--color-text);
}

/* ── Site Footer ────────────────────────────────────────── */
.site-footer {
    background: var(--color-primary);
    color:      rgba(255,255,255,.75);
    padding:    56px 0 36px;
}

.site-footer__inner {
    max-width:      var(--container);
    margin:         0 auto;
    padding:        0 32px;
}

.site-footer__top {
    display:         flex;
    flex-wrap:       wrap;
    gap:             40px;
    justify-content: space-between;
    margin-bottom:   40px;
}

.site-footer__brand .footer-logo {
    font-family: var(--font-serif);
    font-size:   1.15rem;
    font-weight: 700;
    color:       #fff;
    margin-bottom: 10px;
}
.site-footer__brand p {
    font-size: .85rem;
    color:     rgba(255,255,255,.6);
    line-height: 1.65;
    max-width: 260px;
}

.site-footer__nav h4 {
    font-size:     .75rem;
    font-weight:   500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.45);
    margin-bottom:  14px;
}
.site-footer__nav a {
    display:     block;
    font-size:   .875rem;
    color:       rgba(255,255,255,.7);
    margin-bottom: 8px;
    transition:  color .2s;
}
.site-footer__nav a:hover { color: #fff; }

.site-footer__social {
    display: flex;
    gap:     12px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.site-footer__social a {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    width:         38px;
    height:        38px;
    border-radius: 50%;
    border:        1px solid rgba(255,255,255,.25);
    color:         rgba(255,255,255,.75);
    font-size:     .8rem;
    transition:    background .2s, color .2s;
}
.site-footer__social a:hover {
    background: rgba(255,255,255,.15);
    color:      #fff;
}

.site-footer__bottom {
    border-top:    1px solid rgba(255,255,255,.12);
    padding-top:   24px;
    display:       flex;
    flex-wrap:     wrap;
    gap:           12px;
    align-items:   center;
    justify-content: space-between;
}
.site-footer__copy {
    font-size: .8rem;
    color:     rgba(255,255,255,.45);
}
.site-footer__legal {
    display: flex;
    gap:     20px;
}
.site-footer__legal a {
    font-size:  .8rem;
    color:      rgba(255,255,255,.45);
    transition: color .2s;
}
.site-footer__legal a:hover { color: rgba(255,255,255,.75); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         13px 30px;
    border-radius:   var(--radius-sm);
    font-family:     var(--font-sans);
    font-size:       .9rem;
    font-weight:     500;
    cursor:          pointer;
    transition:      background .2s, color .2s, border-color .2s;
    text-decoration: none;
    white-space:     nowrap;
    letter-spacing:  .02em;
}

.btn--primary {
    background: var(--color-primary);
    color:      #fff;
    border:     2px solid transparent;
}
.btn--primary:hover { background: var(--color-primary-hover); }

.btn--secondary {
    background: var(--color-secondary);
    color:      #fff;
    border:     2px solid transparent;
}
.btn--secondary:hover { background: var(--color-secondary-hover); }

.btn--hero {
    background: var(--color-secondary);
    color:      #fff;
    border:     2px solid transparent;
    padding:    14px 36px;
    font-size:  .95rem;
}
.btn--hero:hover { background: var(--color-secondary-hover); }

.btn--cta {
    background: #fff;
    color:      var(--color-primary);
    border:     2px solid transparent;
}
.btn--cta:hover { background: var(--color-surface); }

.btn--outline {
    background: transparent;
    color:      var(--color-primary);
    border:     2px solid var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: #fff; }

.btn--outline-white {
    background: transparent;
    color:      #fff;
    border:     2px solid rgba(255,255,255,.55);
}
.btn--outline-white:hover { background: rgba(255,255,255,.1); }

/* ── Skip Link (Accessibility) ──────────────────────────── */
.skip-link {
    position:      absolute;
    top:           -100%;
    left:          16px;
    z-index:       200;
    padding:       10px 20px;
    background:    var(--color-primary);
    color:         #fff;
    font-size:     .875rem;
    font-weight:   500;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition:    top .15s;
}
.skip-link:focus { top: 0; }

/* ── Focus Visible (Accessibility) ──────────────────────── */
.btn:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 3px;
}
.btn--primary:focus-visible,
.btn--secondary:focus-visible,
.btn--hero:focus-visible {
    outline-color: #fff;
}
a:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius:  2px;
}

/* ── Block Base ──────────────────────────────────────────── */
.block__eyebrow {
    font-size:      .72rem;
    font-weight:    500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--color-sage);
    margin-bottom:  12px;
}

.block__section-label {
    font-family:   var(--font-serif);
    font-size:     clamp(1.65rem, 2.8vw, 2.4rem);
    font-weight:   700;
    margin-bottom: 10px;
    color:         var(--color-text);
    line-height:   1.22;
    letter-spacing: -.01em;
}

.block__subtitle {
    font-size:     1rem;
    color:         var(--color-text-muted);
    margin-bottom: 44px;
    max-width:     560px;
    line-height:   1.7;
}

.block__cta-row { margin-top: 44px; text-align: center; }

.block__empty-notice {
    padding:       24px;
    background:    #fefce8;
    border:        1px dashed #fde047;
    border-radius: var(--radius-sm);
    color:         #854d0e;
    font-size:     .85rem;
    margin-bottom: 16px;
}

/* ── Block: Hero (single image) ──────────────────────────── */
.block--hero {
    position:    relative;
    min-height:  var(--hero-min-height);
    background:  var(--color-primary) center / cover no-repeat;
    display:     flex;
    align-items: center;
}

.block--hero-no-image {
    background: linear-gradient(135deg, #2E4319 0%, #3A5425 40%, #5A7A45 100%);
}

.block--hero::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--color-hero-overlay);
}

.hero__content {
    position:       relative;
    z-index:        1;
    width:          100%;
    max-width:      var(--container);
    margin:         0 auto;
    padding:        56px 32px;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            24px;
}

.hero__eyebrow {
    font-size:      .75rem;
    font-weight:    500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.65);
}

.hero__heading {
    font-family: var(--font-serif);
    font-size:   clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    color:       #fff;
    line-height: 1.2;
    max-width:   700px;
    letter-spacing: -.01em;
}

.hero__text {
    font-size:   1.05rem;
    color:       rgba(255, 255, 255, .82);
    max-width:   520px;
    line-height: 1.75;
}

/* ── Block: Grid (services + cases) ─────────────────────── */
.block--services { background: var(--color-bg); }
.block--cases    { background: var(--color-surface); }
.block--blog     { background: var(--color-bg); }

.grid-items {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   28px;
}

.grid-item {
    background:    var(--color-white);
    border:        1px solid var(--color-border-light);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    box-shadow .3s, transform .3s;
}
.grid-item:hover {
    box-shadow: 0 16px 40px rgba(58, 84, 37, .10);
    transform:  translateY(-4px);
}

.grid-item__image img {
    width:       100%;
    height:      220px;
    object-fit:  cover;
    transition:  transform .4s ease;
}
.grid-item:hover .grid-item__image img { transform: scale(1.03); }

.grid-item__body { padding: 22px 24px 26px; }

.grid-item__category {
    display:       inline-block;
    padding:       3px 10px;
    background:    rgba(122, 155, 111, .15);
    color:         var(--color-primary);
    border-radius: 20px;
    font-size:     .72rem;
    font-weight:   500;
    letter-spacing: .04em;
    margin-bottom:  8px;
}

.grid-item__title {
    font-family:   var(--font-serif);
    font-size:     1.075rem;
    font-weight:   700;
    margin-bottom: 10px;
    line-height:   1.4;
    color:         var(--color-text);
}
.grid-item__title a:hover { color: var(--color-primary); }

.grid-item__meta {
    font-size:     .78rem;
    color:         var(--color-text-light);
    margin-bottom: 6px;
}

.grid-item__desc {
    font-size:   .875rem;
    color:       var(--color-text-muted);
    line-height: 1.6;
}

.grid-item__link {
    display:     inline-block;
    margin-top:  14px;
    font-size:   .82rem;
    font-weight: 500;
    color:       var(--color-primary);
    transition:  gap .2s;
}
.grid-item__link::after {
    content: ' →';
    transition: margin .2s;
}
.grid-item:hover .grid-item__link { color: var(--color-primary-hover); }

/* ── Block: CTA ──────────────────────────────────────────── */
.block--cta { background: var(--color-secondary); }

.block--cta .block__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             28px;
    padding-top:     64px;
    padding-bottom:  64px;
}

.cta__text {
    font-family: var(--font-serif);
    font-size:   clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 600;
    color:       #fff;
    max-width:   600px;
    line-height: 1.5;
}

/* ── Block: FAQ ──────────────────────────────────────────── */
.block--faq { background: var(--color-surface); }

.faq-list { display: flex; flex-direction: column; gap: 8px; }

.faq-item details {
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow:      hidden;
    background:    var(--color-white);
    transition:    border-color .2s;
}
.faq-item details:hover { border-color: var(--color-sage); }

.faq-item__q {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         18px 24px;
    font-weight:     500;
    font-size:       .95rem;
    cursor:          pointer;
    transition:      background .2s;
    list-style:      none;
    color:           var(--color-text);
    line-height:     1.5;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
    content:     '+';
    font-size:   1.2rem;
    font-weight: 300;
    color:       var(--color-sage);
    flex-shrink: 0;
    margin-left: 16px;
    transition:  transform .2s;
}
details[open] .faq-item__q        { background: rgba(122,155,111,.08); }
details[open] .faq-item__q::after { content: '−'; color: var(--color-primary); }

.faq-item__a {
    padding:     18px 24px 22px;
    color:       var(--color-text-muted);
    font-size:   .9rem;
    line-height: 1.8;
    border-top:  1px solid var(--color-border-light);
    white-space: pre-wrap;
}

/* ── Block: Blog latest ──────────────────────────────────── */
.blog-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   28px;
}

.blog-card {
    background:    var(--color-white);
    border:        1px solid var(--color-border-light);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    box-shadow .3s;
    display:       flex;
    flex-direction: column;
}
.blog-card:hover { box-shadow: 0 16px 40px rgba(58,84,37,.09); }

.blog-card__image img {
    width:      100%;
    height:     200px;
    object-fit: cover;
    transition: transform .4s ease;
}
.blog-card:hover .blog-card__image img { transform: scale(1.03); }

.blog-card__body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }

.blog-card__category {
    display:       inline-block;
    padding:       3px 10px;
    background:    rgba(122, 155, 111, .15);
    color:         var(--color-primary);
    border-radius: 20px;
    font-size:     .72rem;
    font-weight:   500;
    letter-spacing: .04em;
    margin-bottom:  8px;
    align-self:     flex-start;
}

.blog-card__date {
    display:    block;
    font-size:  .8125rem;  /* 13px — min for CJK legibility */
    color:      var(--color-text-light);
    margin-bottom: 8px;
}

.blog-card__title {
    font-family:   var(--font-serif);
    font-size:     1.025rem;
    font-weight:   700;
    margin-bottom: 10px;
    line-height:   1.45;
    color:         var(--color-text);
    flex:          1;
}
.blog-card__title a:hover { color: var(--color-primary); }

.blog-card__excerpt {
    font-size:   .875rem;
    color:       var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: 14px;
}

.blog-card__readmore {
    font-size:  .82rem;
    font-weight: 500;
    color:      var(--color-primary);
    margin-top: auto;
}

/* ── Block: Custom HTML ──────────────────────────────────── */
.block--custom .block__inner { padding: 0; }

/* ── Page Header (inner pages) ───────────────────────────── */
.page-header {
    background:    var(--color-primary);
    padding:       56px 32px;
    text-align:    center;
}
.page-header__eyebrow {
    font-size:      .72rem;
    font-weight:    500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.55);
    margin-bottom:  10px;
}
.page-header h1 {
    font-family: var(--font-serif);
    font-size:   clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color:       #fff;
    line-height: 1.22;
    letter-spacing: -.01em;
}
.page-header p {
    font-size:  1rem;
    color:      rgba(255,255,255,.7);
    margin-top: 12px;
    max-width:  560px;
    margin-left:  auto;
    margin-right: auto;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
    font-size:   .8rem;
    color:       var(--color-text-light);
    margin-bottom: 24px;
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}
.breadcrumb a       { color: var(--color-primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep    { color: var(--color-border); }

/* ── Tags ────────────────────────────────────────────────── */
.tag-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    margin-top: 10px;
}
.tag {
    padding:       3px 10px;
    background:    var(--color-surface);
    border-radius: 20px;
    font-size:     .75rem;
    color:         var(--color-text-muted);
}

/* ── Form Styles ─────────────────────────────────────────── */
.form-field {
    display:       flex;
    flex-direction: column;
    gap:           6px;
}
.form-field label {
    font-size:    .85rem;
    font-weight:  500;
    color:        var(--color-text);
}
.form-field input,
.form-field textarea,
.form-field select {
    padding:       10px 14px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size:     .9rem;
    font-family:   var(--font-sans);
    background:    var(--color-white);
    color:         var(--color-text);
    outline:       none;
    transition:    border-color .2s;
    width:         100%;
}
.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--color-sage);
    box-shadow:   0 0 0 3px rgba(122,155,111,.12);
}
.form-field textarea { resize: vertical; }

.form-required { color: var(--color-secondary); }

/* ── Form Field Error ────────────────────────────────────── */
.form-field-error {
    font-size:  .8rem;
    color:      #b91c1c;
    margin-top: 2px;
    display:    block;
}
.form-field--error input,
.form-field--error textarea,
.form-field--error select {
    border-color: #fca5a5;
    background:   #fff5f5;
}
.form-field--error input:focus,
.form-field--error textarea:focus {
    border-color: #f87171;
    box-shadow:   0 0 0 3px rgba(248,113,113,.15);
}

/* ── Prose (rich text content area) ─────────────────────── */
.prose h2 {
    font-family:   var(--font-serif);
    font-size:     1.4rem;
    font-weight:   700;
    color:         var(--color-text);
    margin:        32px 0 12px;
    line-height:   1.3;
}
.prose h3 {
    font-family:   var(--font-serif);
    font-size:     1.15rem;
    font-weight:   700;
    color:         var(--color-text);
    margin:        24px 0 10px;
}
.prose p  { margin-bottom: 18px; line-height: 1.85; color: var(--color-text-muted); }
.prose ul { margin: 0 0 18px 20px; list-style: disc; }
.prose ol { margin: 0 0 18px 20px; list-style: decimal; }
.prose li { margin-bottom: 6px; color: var(--color-text-muted); line-height: 1.75; }
.prose a  { color: var(--color-primary); text-decoration: underline; }
.prose a:hover { color: var(--color-primary-hover); }
.prose blockquote {
    border-left: 3px solid var(--color-sage);
    padding:     12px 20px;
    background:  rgba(122,155,111,.07);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin:      20px 0;
    color:       var(--color-text-muted);
    font-style:  italic;
}

/* ── Alert / Flash Messages ──────────────────────────────── */
.alert-success {
    background:   #f0fdf4;
    border:       1px solid #86efac;
    border-radius: var(--radius-sm);
    padding:      24px 28px;
    color:        #15803d;
}
.alert-error {
    background:    #fef2f2;
    border:        1px solid #fca5a5;
    border-radius: var(--radius-sm);
    padding:       12px 18px;
    color:         #b91c1c;
    font-size:     .9rem;
}

/* ── Contact Page ────────────────────────────────────────── */
.contact-layout {
    display:               grid;
    grid-template-columns: 300px 1fr;
    gap:                   48px;
    align-items:           start;
}

@media (max-width: 700px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap:                   32px;
    }
    /* Unstick sidebar on mobile so it flows naturally */
    .contact-layout aside > div {
        position: static !important;
    }
}


@media (max-width: 960px) {
    :root { --space-block: 64px; }
    .grid-items  { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .blog-cards  { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .site-footer__top { gap: 32px; }
}

@media (max-width: 700px) {
    :root { --space-block: 48px; --hero-min-height: 440px; }

    .site-header__inner { padding: 0 20px; }
    .site-nav ul { gap: 20px; }

    .block__inner { padding: var(--space-block) 20px; }

    .block--cta .block__inner {
        flex-direction: column;
        text-align:     center;
        padding-top:    52px;
        padding-bottom: 52px;
    }
    .cta__text { max-width: 100%; }

    .site-footer__inner { padding: 0 20px; }
    .site-footer__bottom {
        flex-direction: column;
        align-items:    flex-start;
    }

    .hero__content { padding: 44px 20px; }
    .page-header   { padding: 44px 20px; }
}

@media (max-width: 768px) {
    .site-nav { display: none; }
    .site-nav--open {
        display:    block;
        position:   absolute;
        top:        68px;
        left:       0;
        right:      0;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border-light);
        padding:    16px 20px;
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .site-nav--open ul {
        flex-direction: column;
        gap:            0;
    }
    .site-nav--open a {
        display:     block;
        padding:     12px 0;
        font-size:   1rem;
        border-bottom: 1px solid var(--color-border-light);
    }
    .site-nav__toggle { display: flex; }
    .site-header { position: relative; }
}

@media (max-width: 480px) {
    :root { --hero-min-height: 380px; }
}

/* ════════════════════════════════════════════════════════════
   Phase A — Design Quality Foundation
   ════════════════════════════════════════════════════════════ */

/* ── A1. Extended Design Tokens ───────────────────────────── */
:root {
    /* Extended palette */
    --color-dark:        #1A1710;
    --color-dark-card:   #24201A;
    --color-dark-border: rgba(255,255,255,.10);
    --color-dark-text:   rgba(255,255,255,.88);
    --color-dark-muted:  rgba(255,255,255,.50);
    --color-mint:        #D4E8CC;
    --color-sand:        #C9B99A;

    /* Motion easing */
    --ease-expo:  cubic-bezier(.16, 1, .3, 1);
    --ease-soft:  cubic-bezier(.25, .46, .45, .94);

    /* Duration scale */
    --dur-xs: 120ms;
    --dur-sm: 220ms;
    --dur-md: 420ms;
    --dur-lg: 680ms;

    /* Shadow scale */
    --shadow-card:       0 2px 8px rgba(42,42,36,.06), 0 1px 2px rgba(42,42,36,.04);
    --shadow-card-hover: 0 20px 48px rgba(42,42,36,.14), 0 4px 12px rgba(42,42,36,.08);
    --shadow-elevated:   0 8px 32px rgba(42,42,36,.12);
}

/* ── A2. Editorial Typography ─────────────────────────────── */
h1, h2, h3 { text-wrap: balance; }

.text-display {
    font-family:    var(--font-serif);
    font-size:      clamp(3.5rem, 7vw, 7.5rem);
    font-weight:    700;
    line-height:    1.05;
    letter-spacing: -.03em;
    text-wrap:      balance;
}
.text-display--md {
    font-family:    var(--font-serif);
    font-size:      clamp(2.4rem, 4.5vw, 4.8rem);
    font-weight:    700;
    line-height:    1.1;
    letter-spacing: -.025em;
    text-wrap:      balance;
}
.text-display--sm {
    font-family:    var(--font-serif);
    font-size:      clamp(1.8rem, 3vw, 3.2rem);
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -.02em;
    text-wrap:      balance;
}
.text-eyebrow-lg {
    font-size:      .65rem;
    font-weight:    500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--color-sage);
    display:        block;
    margin-bottom:  20px;
}

/* ── A3. Scroll Reveal System ─────────────────────────────── */
.reveal-up,
.reveal-left,
.reveal-scale {
    opacity:    0;
    transition: opacity   var(--dur-md) var(--ease-expo),
                transform var(--dur-md) var(--ease-expo);
}
.reveal-up    { transform: translateY(36px); }
.reveal-left  { transform: translateX(-28px); }
.reveal-scale { transform: scale(.95); }

.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-scale.is-visible {
    opacity:   1;
    transform: none;
}

[data-delay="1"] { transition-delay:  80ms; }
[data-delay="2"] { transition-delay: 160ms; }
[data-delay="3"] { transition-delay: 240ms; }
[data-delay="4"] { transition-delay: 320ms; }
[data-delay="5"] { transition-delay: 400ms; }

/* ── A4. Grain Texture Overlay ────────────────────────────── */
.has-grain { position: relative; }
.has-grain::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:          .045;
    pointer-events:   none;
    border-radius:    inherit;
    z-index:          0;
}

/* ── A5. Navigation Upgrade ───────────────────────────────── */
.site-header {
    transition: background var(--dur-sm) var(--ease-soft),
                box-shadow  var(--dur-sm) var(--ease-soft);
}
.site-header.is-scrolled {
    background: rgba(246,242,235,.99);
    box-shadow: 0 1px 0 var(--color-border-light),
                0 4px 24px rgba(42,42,36,.07);
}

/* Underline-grow on normal nav links */
.site-nav a:not(.nav-cta) {
    position:       relative;
    padding-bottom: 3px;
}
.site-nav a:not(.nav-cta)::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           1.5px;
    background:       var(--color-primary);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform var(--dur-sm) var(--ease-soft);
}
.site-nav a:not(.nav-cta):hover         { color: var(--color-text); }
.site-nav a:not(.nav-cta):hover::after  { transform: scaleX(1); }

/* CTA pill */
.nav-cta {
    display:       inline-block;
    padding:       8px 20px !important;
    background:    var(--color-primary);
    color:         #fff !important;
    border-radius: 100px;
    font-size:     .8125rem;
    line-height:   1;
    box-shadow:    0 2px 8px rgba(58,84,37,.25);
    transition:    background var(--dur-sm) var(--ease-soft),
                   box-shadow  var(--dur-sm) var(--ease-soft),
                   transform   var(--dur-xs) var(--ease-soft) !important;
}
.nav-cta:hover  {
    background: var(--color-primary-hover) !important;
    color:      #fff !important;
    box-shadow: 0 4px 16px rgba(58,84,37,.35);
}
.nav-cta:active  { transform: scale(.97); }
.nav-cta::after  { display: none !important; } /* no underline */
.nav-cta:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow:     none;
}

/* ── A6. Card System ──────────────────────────────────────── */
.grid-item {
    border:     none;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--dur-md) var(--ease-expo),
                transform  var(--dur-md) var(--ease-expo);
}
.grid-item:hover {
    box-shadow: var(--shadow-card-hover);
    transform:  translateY(-6px);
}

.blog-card {
    border:     none;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--dur-md) var(--ease-expo),
                transform  var(--dur-md) var(--ease-expo);
}
.blog-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform:  translateY(-5px);
}

/* Image reveal overlay on card hover */
.grid-item__image {
    position: relative;
    overflow: hidden;
}
.grid-item__image::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(26,23,16,.62) 0%, transparent 55%);
    opacity:    0;
    transition: opacity var(--dur-md) var(--ease-soft);
}
.grid-item:hover .grid-item__image::after { opacity: 1; }

/* ── A7. Button Refinements ───────────────────────────────── */
.btn {
    transition: background   var(--dur-sm) var(--ease-soft),
                color        var(--dur-sm) var(--ease-soft),
                border-color var(--dur-sm) var(--ease-soft),
                box-shadow   var(--dur-sm) var(--ease-soft),
                transform    var(--dur-xs) var(--ease-soft);
}
.btn:active { transform: scale(.97); }

.btn--primary {
    background: linear-gradient(180deg, #4a6832 0%, var(--color-primary) 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.10) inset,
                0 2px 8px rgba(58,84,37,.22);
}
.btn--primary:hover {
    background: linear-gradient(180deg, #3d5829 0%, var(--color-primary-hover) 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.10) inset,
                0 4px 16px rgba(58,84,37,.30);
}

/* ── A8. Section Variants ─────────────────────────────────── */
.section--dark {
    background: var(--color-dark);
    color:      var(--color-dark-text);
}
.section--dark .block__eyebrow        { color: rgba(212,232,204,.70); }
.section--dark .block__section-label  { color: #fff; }
.section--dark .block__subtitle       { color: var(--color-dark-muted); }

.section--mint    { background: var(--color-mint); }
.section--surface { background: var(--color-surface); }

/* ── A9. Image & Layout Utilities ─────────────────────────── */
.img--organic {
    border-radius: 42% 58% 55% 45% / 42% 44% 56% 58%;
    overflow:      hidden;
}
.img--cover {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.aspect-hero      { aspect-ratio: 21 / 9; }
.aspect-landscape { aspect-ratio: 16 / 10; }
.aspect-portrait  { aspect-ratio: 3 / 4; }
.aspect-square    { aspect-ratio: 1 / 1; }

/* Clip-path dividers (apply to section wrapper) */
.clip-diagonal-btm { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.clip-diagonal-top { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); }

/* ── A10. Accessibility: prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-left,
    .reveal-scale {
        opacity:    1;
        transform:  none;
        transition: none;
    }
    .btn,
    .grid-item,
    .blog-card,
    .site-nav a::after,
    .nav-cta {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   PHASE B — HOMEPAGE BLOCK REDESIGN
   B1 Hero · B2 Services Editorial · B3 Cases Masonry
   B4 Blog Magazine · B5 CTA Dark
══════════════════════════════════════════════════════════════ */

/* ── B1. Hero — Full Viewport ─────────────────────────────── */
.block--hero-single {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.block--hero-single::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10,9,8,.55) 0%,
        rgba(10,9,8,.30) 50%,
        rgba(10,9,8,.72) 100%
    );
    z-index: 1;
}
.block--hero-no-image { background-color: var(--color-dark); }
.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(120px,18vh,180px) clamp(24px,6vw,80px) clamp(100px,16vh,160px);
    color: #fff;
    text-align: center;
}
.hero__eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
    margin-bottom: 24px;
    animation: hero-enter var(--dur-lg) var(--ease-expo) 100ms both;
}
.hero__heading {
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
    margin-bottom: 24px;
    animation: hero-enter var(--dur-lg) var(--ease-expo) 220ms both;
}
.hero__text {
    font-size: clamp(.95rem, 2vw, 1.15rem);
    line-height: 1.8;
    color: rgba(255,255,255,.75);
    max-width: 540px;
    margin: 0 auto 40px;
    animation: hero-enter var(--dur-lg) var(--ease-expo) 340ms both;
}
.hero__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    animation: hero-enter var(--dur-lg) var(--ease-expo) 460ms both;
}
.btn--hero {
    background: #fff;
    color: var(--color-dark);
    border-color: #fff;
    font-weight: 700;
}
.btn--hero:hover {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.7);
}
.btn--ghost-white {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.45);
}
.btn--ghost-white:hover {
    border-color: #fff;
    background: rgba(255,255,255,.1);
}
.hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.42);
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    animation: hero-enter var(--dur-lg) var(--ease-expo) 680ms both;
}
.hero__scroll-line {
    width: 1px;
    height: 36px;
    background: currentColor;
    transform-origin: top;
    animation: scroll-drop 2s var(--ease-soft) 1.2s infinite;
}
@keyframes hero-enter {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-drop {
    0%,100% { transform: scaleY(1);    opacity: .4; }
    50%      { transform: scaleY(.35); opacity: 1;  }
}
@media (max-width: 480px) {
    .hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__eyebrow, .hero__heading, .hero__text,
    .hero__actions, .hero__scroll { animation: none; }
    .hero__scroll-line { animation: none; }
}

/* ── B2. Services — Editorial Numbered List ───────────────── */
.services-list {
    margin-top: 48px;
    border-top: 1px solid var(--color-border-light);
}
.services-list__item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: start;
    gap: 0 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
    color: inherit;
    transition: padding var(--dur-sm) var(--ease-soft),
                background var(--dur-sm) var(--ease-soft);
}
.services-list__item:hover {
    padding-left: 14px;
    padding-right: 14px;
    margin-left: -14px;
    margin-right: -14px;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}
.services-list__num {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    padding-top: 3px;
    opacity: .8;
}
.services-list__body { display: flex; flex-direction: column; gap: 5px; }
.services-list__title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}
.services-list__desc {
    font-size: .875rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}
.services-list__arrow {
    font-size: 1.1rem;
    color: var(--color-border);
    padding-top: 4px;
    transition: transform var(--dur-sm) var(--ease-expo),
                color     var(--dur-sm) var(--ease-expo);
}
.services-list__item:hover .services-list__arrow {
    transform: translateX(6px);
    color: var(--color-primary);
}
@media (max-width: 600px) {
    .services-list__item { grid-template-columns: 40px 1fr; }
    .services-list__arrow { display: none; }
}

/* ── B3. Cases — Masonry Portfolio Grid ───────────────────── */
.cases-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 48px;
}
.cases-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    background: var(--color-surface);
    display: block;
    text-decoration: none;
}
.cases-item:first-child,
.cases-item--wide {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
}
.cases-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-md) var(--ease-soft);
}
.cases-item:hover img { transform: scale(1.06); }
.cases-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,9,8,.75) 0%, transparent 55%);
    opacity: 0;
    transition: opacity var(--dur-md) var(--ease-soft);
    display: flex;
    align-items: flex-end;
    padding: 24px;
}
.cases-item:hover .cases-item__overlay { opacity: 1; }
.cases-item__info {
    color: #fff;
    transform: translateY(10px);
    transition: transform var(--dur-md) var(--ease-expo);
}
.cases-item:hover .cases-item__info { transform: translateY(0); }
.cases-item__cat {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
    margin-bottom: 4px;
}
.cases-item__title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
@media (max-width: 720px) {
    .cases-masonry { grid-template-columns: repeat(2, 1fr); }
    .cases-item:first-child, .cases-item--wide { grid-column: span 2; }
}
@media (max-width: 480px) {
    .cases-masonry { grid-template-columns: 1fr; gap: 8px; }
    .cases-item:first-child, .cases-item--wide {
        grid-column: span 1;
        aspect-ratio: 4 / 3;
    }
    .cases-item__overlay { opacity: 1; }
}

/* ── B4. Blog — Magazine Layout ───────────────────────────── */
.blog-magazine {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-radius: var(--radius);
    overflow: hidden;
}
.blog-feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}
.blog-feat__image {
    position: relative;
    overflow: hidden;
}
.blog-feat__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-md) var(--ease-soft);
}
.blog-feat:hover .blog-feat__image img { transform: scale(1.04); }
.blog-feat__body {
    background: var(--color-dark);
    padding: clamp(28px,5vw,52px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
}
.blog-feat__eyebrow {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-sage);
    font-weight: 600;
}
.blog-feat__title {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2.8vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-wrap: balance;
}
.blog-feat__title a { color: inherit; text-decoration: none; }
.blog-feat__title a:hover { color: var(--color-mint, #D4E8CC); }
.blog-feat__excerpt {
    font-size: .875rem;
    line-height: 1.7;
    color: rgba(255,255,255,.6);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-feat__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}
.blog-feat__date { font-size: .75rem; color: rgba(255,255,255,.4); }
.blog-feat__readmore {
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-sage);
    text-decoration: none;
    letter-spacing: .04em;
}
.blog-feat__readmore:hover { color: var(--color-mint, #D4E8CC); }
.blog-feat--no-image { grid-template-columns: 1fr; }
.blog-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}
.blog-sub-card {
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
}
.blog-sub-card__image {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.blog-sub-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-md) var(--ease-soft);
}
.blog-sub-card:hover .blog-sub-card__image img { transform: scale(1.05); }
.blog-sub-card__body {
    padding: 18px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.blog-sub-card__cat {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.blog-sub-card__cat:hover { color: var(--color-primary-dark, #5c7a3e); }
.blog-sub-card__title {
    font-family: var(--font-serif);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
}
.blog-sub-card__title a { color: inherit; text-decoration: none; }
.blog-sub-card__title a:hover { color: var(--color-primary); }
.blog-sub-card__date {
    font-size: .73rem;
    color: var(--color-text-light);
    margin-top: auto;
    padding-top: 6px;
}
@media (max-width: 768px) {
    .blog-feat { grid-template-columns: 1fr; min-height: auto; }
    .blog-feat__image { aspect-ratio: 16 / 9; }
    .blog-sub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .blog-sub-grid { grid-template-columns: 1fr; }
}

/* ── B5. CTA — Dark Section ───────────────────────────────── */
.block--cta-dark {
    background: var(--color-dark);
    position: relative;
    overflow: hidden;
}
.block--cta-dark .block__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    padding-top: 96px;
    padding-bottom: 96px;
}
.cta-dark__eyebrow {
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-sage);
    font-weight: 600;
}
.cta-dark__heading {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-wrap: balance;
}
.cta-dark__text {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,.60);
    max-width: 500px;
}
.cta-dark__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}
.btn--mint {
    background: var(--color-mint, #D4E8CC);
    color: var(--color-dark);
    border-color: transparent;
    font-weight: 700;
}
.btn--mint:hover {
    background: #bee0b3;
    border-color: transparent;
    color: var(--color-dark);
}

/* ══════════════════════════════════════════════════════════════
   PHASE C — INNER PAGE REDESIGN
   C1 Page Hero · C2 Article Cover · C3 Article Layout
   C4 Case Gallery · C5 Blog Index · C6 FAQ · C7 404
══════════════════════════════════════════════════════════════ */

/* ── C1. Page Hero (inner list pages) ─────────────────────── */
.page-hero {
    position: relative;
    min-height: 36vh;
    display: flex;
    align-items: flex-end;
    background: var(--color-dark);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,9,8,.35) 0%, rgba(10,9,8,.80) 100%);
    z-index: 1;
}
.page-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    padding: clamp(48px,8vh,80px) clamp(24px,5vw,64px) clamp(40px,6vh,60px);
    color: #fff;
}
.page-hero__eyebrow {
    display: block;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.48);
    font-weight: 600;
    margin-bottom: 14px;
}
.page-hero__heading {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 10px;
    text-wrap: balance;
}
.page-hero__sub {
    font-size: clamp(.88rem, 1.5vw, 1rem);
    color: rgba(255,255,255,.58);
    line-height: 1.7;
}

/* ── C2. Article Cover ──────────────────────────────────────── */
.article-cover {
    position: relative;
    width: 100%;
    height: clamp(300px, 52vh, 600px);
    overflow: hidden;
    background: var(--color-surface);
}
.article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.article-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(10,9,8,.38) 100%);
    pointer-events: none;
}

/* ── C3. Article Layout ─────────────────────────────────────── */
.article-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 44px clamp(20px,4vw,48px) 80px;
}
.article-wrap--narrow { max-width: 720px; }
.article-h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--color-text);
    margin-bottom: 20px;
    text-wrap: balance;
}
.article-lede {
    font-size: 1.06rem;
    color: var(--color-text-muted);
    line-height: 1.85;
    margin-bottom: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--color-border-light);
    font-weight: 500;
}
.article-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: .78rem;
    color: var(--color-text-light);
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 32px;
}
.article-meta-bar .tag { margin-top: 0; }
.article-meta-bar__sep {
    color: var(--color-border-light);
    font-size: .65rem;
}
.article-footer {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.article-back {
    font-size: .875rem;
    color: var(--color-text-muted);
    text-decoration: none;
}
.article-back:hover { color: var(--color-text); }

/* ── C4. Case Image Gallery ─────────────────────────────────── */
.case-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    margin: 0 0 48px;
}
.case-gallery figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.case-gallery figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-md) var(--ease-soft);
}
.case-gallery figure:hover img { transform: scale(1.04); }
.case-gallery figcaption {
    padding: 7px 12px;
    font-size: .75rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* ── C5. Blog List Page ─────────────────────────────────────── */
.blog-index-wrap {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    padding: 52px clamp(20px,4vw,48px) 80px;
}

/* ── C6. FAQ ─────────────────────────────────────────────────── */
.faq-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 52px clamp(20px,4vw,48px) 80px;
}
.faq-section-heading {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 48px 0 0;
    padding: 0 0 11px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}
.faq-list { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--color-border-light); }
.faq-item details[open] .faq-item__q { color: var(--color-primary); }
.faq-item__q {
    padding: 18px 36px 18px 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    position: relative;
    line-height: 1.55;
    transition: color var(--dur-sm);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
    content: '+';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--color-primary);
    transition: transform var(--dur-sm) var(--ease-expo);
    line-height: 1;
}
details[open] .faq-item__q::after {
    transform: translateY(-50%) rotate(45deg);
}
.faq-item__a {
    padding: 2px 36px 20px 0;
    font-size: .9rem;
    color: var(--color-text-muted);
    line-height: 1.8;
}
.faq-cta-box {
    margin-top: 52px;
    padding: 36px 40px;
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border-light);
    text-align: center;
}
.faq-cta-box__heading {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
}
.faq-cta-box__text {
    font-size: .9rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    line-height: 1.7;
}
@media (max-width: 480px) {
    .faq-cta-box { padding: 28px 24px; }
}

/* ── C7. 404 ─────────────────────────────────────────────────── */
.page-404 {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}
.page-404__inner { max-width: 480px; }
.page-404__num {
    font-family: var(--font-serif);
    font-size: clamp(6rem, 18vw, 11rem);
    font-weight: 700;
    color: var(--color-border-light);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -.04em;
    display: block;
}
.page-404__heading {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 16px;
}
.page-404__text {
    font-size: .95rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 36px;
}
.page-404__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   PHASE D — REMAINING PAGES
   D1 Contact · D2 Legal · D3 Generic Page
══════════════════════════════════════════════════════════════ */

/* ── D1. Contact Page ───────────────────────────────────────── */
.contact-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px clamp(20px,4vw,48px) 80px;
}
/* .contact-layout grid defined in earlier patch (300px 1fr) */
.contact-info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 88px;
}
.contact-info-card__heading {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}
.contact-info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.contact-info-item__icon {
    font-size: 1.1rem;
    color: var(--color-sage);
    margin-top: 2px;
    flex-shrink: 0;
}
.contact-info-item__label {
    font-size: .7rem;
    color: var(--color-text-light);
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.contact-info-item__value {
    color: var(--color-text);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    display: block;
}
.contact-info-item__value:hover { color: var(--color-primary); }
.contact-info-divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
}
.contact-social-label {
    font-size: .7rem;
    color: var(--color-text-light);
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.contact-social-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.contact-social-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: .85rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--dur-sm) var(--ease-soft),
                color     var(--dur-sm) var(--ease-soft),
                border-color var(--dur-sm) var(--ease-soft);
}
.contact-social-pill:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.contact-success {
    padding: 40px 36px;
    text-align: center;
    border-radius: var(--radius);
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.contact-success__icon {
    font-size: 2.5rem;
    margin-bottom: 14px;
    color: #15803d;
}
.contact-success__heading {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #14532d;
}
.contact-success__text {
    margin-bottom: 24px;
    color: #166534;
    font-size: .92rem;
    line-height: 1.7;
}
@media (max-width: 700px) {
    .contact-info-card { position: static; }
}

/* ── D2. Legal / Static Text Pages ─────────────────────────── */
.legal-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px clamp(20px,4vw,48px) 80px;
}
.legal-footer {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border-light);
}
.legal-back {
    font-size: .875rem;
    color: var(--color-primary);
    text-decoration: none;
}
.legal-back:hover { color: var(--color-primary-hover); }

/* ── D3. Generic Page Template ──────────────────────────────── */
/* Uses .article-cover + .article-wrap from Phase C (no new CSS needed) */
/* Page hero without cover image uses .page-hero from Phase C */