/* Source: index.html */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4 */
    :root {
      --color-ink: #101010;
      --color-ink-2: #1A1A1A;
      --color-charcoal: #22201D;
      --color-body: #44403A;
      --color-muted: #8A8378;
      --color-taupe: #A39B8E;
      --color-white: #FFFFFF;
      --color-ivory: #F6F3EE;
      --color-soft: #FBFAF7;
      --color-border: #E5DFD4;
      --color-teal: #32C7BC;
      --color-teal-deep: #15998F;
      --color-teal-soft: #E7FAF7;
      --color-gold: #B8985A;
      --color-pearl: #C9B896;
      --shadow-soft: rgb(16 16 16 / 0.08);
      --shadow-card: rgb(16 16 16 / 0.12);
      --veil-dark-10: rgb(16 16 16 / 0.10);
      --veil-dark-12: rgb(16 16 16 / 0.12);
      --veil-dark-22: rgb(16 16 16 / 0.22);
      --veil-dark-28: rgb(16 16 16 / 0.28);
      --veil-dark-32: rgb(16 16 16 / 0.32);
      --veil-dark-38: rgb(16 16 16 / 0.38);
      --veil-dark-42: rgb(16 16 16 / 0.42);
      --veil-dark-46: rgb(16 16 16 / 0.46);
      --veil-dark-58: rgb(16 16 16 / 0.58);
      --veil-dark-74: rgb(16 16 16 / 0.74);
      --veil-dark-76: rgb(16 16 16 / 0.76);
      --veil-dark-82: rgb(16 16 16 / 0.82);
      --veil-dark-86: rgb(16 16 16 / 0.86);
      --veil-dark-88: rgb(16 16 16 / 0.88);
      --line-light: rgb(255 255 255 / 0.16);
      --photo-onyx: #0D0D0C;
      --photo-coal: #171513;
      --photo-walnut: #4D4033;
      --photo-bronze: #756149;
      --photo-stone: #A79883;
      --photo-linen: #CDBFA9;
      --photo-marble: #DDD3C2;
      --photo-lamp: #FFF1CF;
      --photo-cloud: #F9F5EE;
      --image-about: url("/wp-content/uploads/ejdesign-source/ej-about-gpt-image-2.jpg");
      --image-service-residential: url("/wp-content/uploads/ejdesign-source/ej-service-residential-gpt-image-2.jpg");
      --image-service-commercial: url("/wp-content/uploads/ejdesign-source/ej-service-commercial-gpt-image-2.jpg");
      --image-service-renovation: url("/wp-content/uploads/ejdesign-source/ej-service-renovation-gpt-image-2.jpg");
      --image-service-styling: url("/wp-content/uploads/ejdesign-source/ej-service-styling-gpt-image-2.jpg");
      --image-work-modern: url("/wp-content/uploads/ejdesign-source/ej-work-modern-gpt-image-2.jpg");
      --image-work-wabi: url("/wp-content/uploads/ejdesign-source/ej-work-wabi-gpt-image-2.jpg");
      --image-work-dark-luxury: url("/wp-content/uploads/ejdesign-source/ej-work-dark-luxury-gpt-image-2.jpg");
      --image-work-nordic: url("/wp-content/uploads/ejdesign-source/ej-work-nordic-gpt-image-2.jpg");
      --image-work-retail: url("/wp-content/uploads/ejdesign-source/ej-work-retail-gpt-image-2.jpg");
      --image-work-cafe: url("/wp-content/uploads/ejdesign-source/ej-work-cafe-gpt-image-2.jpg");
      --image-work-clinic: url("/wp-content/uploads/ejdesign-source/ej-work-clinic-gpt-image-2.jpg");
      --image-work-office: url("/wp-content/uploads/ejdesign-source/ej-work-office-gpt-image-2.jpg");
      --image-commercial: url("/wp-content/uploads/ejdesign-source/ej-commercial-gpt-image-2.jpg");
      --image-cta: url("/wp-content/uploads/ejdesign-source/ej-cta-material-gpt-image-2.jpg");
      --font-display: "Iowan Old Style", "Noto Serif TC", "Songti TC", Georgia, serif;
      --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif;
      --radius-card: 10px;
      --radius-soft: 16px;
      --radius-pill: 999px;
      --content: 1180px;
      --wide: 1360px;
      --page-pad: clamp(20px, 5vw, 56px);
      --ease: cubic-bezier(.19, 1, .22, 1);
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; overflow-x: clip; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--color-white);
      color: var(--color-body);
      font-family: var(--font-body);
      line-height: 1.72;
      text-rendering: geometricPrecision;
    }
    button, a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img, svg { display: block; max-width: 100%; }

    .page { min-height: 100dvh; background: var(--color-white); }
    .container {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin-inline: auto;
    }
    .container-wide {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
    }
    .section { padding-block: clamp(58px, 8vw, 112px); }
    .section-tight { padding-block: clamp(42px, 6vw, 76px); }
    .eyebrow {
      margin: 0 0 10px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .section-title {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(30px, 4.2vw, 48px);
      font-weight: 500;
      line-height: 1.18;
      letter-spacing: .02em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .section-copy {
      margin: 16px 0 0;
      max-width: 620px;
      color: var(--color-muted);
      font-size: clamp(15px, 1.7vw, 17px);
    }
    .section-heading {
      display: grid;
      justify-items: center;
      text-align: center;
      margin-block-end: clamp(28px, 4.8vw, 54px);
    }
    .title-rule {
      width: 42px;
      height: 2px;
      margin-block-start: 15px;
      background: var(--color-teal);
    }

    .elementor-location-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 40;
      color: var(--color-white);
    }
    .site-header {
      width: 100%;
      padding: 18px var(--page-pad);
      transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
    }
    .site-header.is-scrolled {
      padding-block: 12px;
      background: color-mix(in srgb, var(--color-ink), transparent 6%);
      border-block-end: 1px solid var(--line-light);
      box-shadow: 0 18px 60px rgb(0 0 0 / 0.14);
      backdrop-filter: blur(18px);
    }
    .site-header > .e-con-full {
      width: min(100%, var(--wide));
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(240px, .75fr) minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(18px, 3vw, 42px);
    }
    .elementor-element-60bd53f4 {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      gap: 12px;
    }
    .elementor-widget-theme-site-logo img {
      width: clamp(144px, 16vw, 206px);
      height: auto;
      object-fit: contain;
    }
    .elementor-widget-heading h6 {
      margin: 0;
      color: color-mix(in srgb, var(--color-white), transparent 8%);
      font-size: 0;
      font-weight: 600;
      letter-spacing: .16em;
      white-space: nowrap;
    }
    .elementor-nav-menu--main {
      display: block;
    }
    .elementor-nav-menu {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(20px, 2.8vw, 42px);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .elementor-item {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      color: color-mix(in srgb, var(--color-white), transparent 12%);
      font-size: 14px;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .elementor-item::after {
      content: "";
      position: absolute;
      inset-inline: 44%;
      inset-block-end: 0;
      height: 2px;
      background: var(--color-teal);
      opacity: 0;
      transition: inset .3s var(--ease), opacity .3s var(--ease);
    }
    .elementor-item:hover::after,
    .elementor-item:focus-visible::after {
      inset-inline: 0;
      opacity: 1;
    }
    .elementor-element-4dbc158 {
      display: flex;
      justify-content: flex-end;
    }
    .elementor-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 12px 22px;
      border-radius: 4px;
      background: var(--color-teal);
      color: var(--color-white);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      white-space: nowrap;
      box-shadow: 0 16px 32px color-mix(in srgb, var(--color-teal), transparent 72%);
      transition: transform .35s var(--ease), background .35s var(--ease);
    }
    .elementor-button:hover {
      transform: translateY(-2px);
      background: var(--color-teal-deep);
    }
    .elementor-menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-light);
      border-radius: 50%;
      background: var(--veil-dark-22);
      color: var(--color-white);
      cursor: pointer;
      place-items: center;
    }
    .elementor-menu-toggle svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }
    .elementor-menu-toggle__icon--close { display: none; }
    .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open { display: none; }
    .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close { display: block; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 12px 22px;
      border: 1px solid transparent;
      border-radius: 4px;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    }
    .btn-teal { background: var(--color-teal); color: var(--color-white); box-shadow: 0 16px 32px color-mix(in srgb, var(--color-teal), transparent 72%); }
    .btn-outline { color: var(--color-white); border-color: color-mix(in srgb, var(--color-white), transparent 42%); background: var(--veil-dark-10); }
    .btn-ink { background: var(--color-ink-2); color: var(--color-white); }
    .btn-link {
      min-height: auto;
      padding: 0;
      border-radius: 0;
      color: var(--color-teal-deep);
      border-block-end: 1px solid var(--color-teal);
    }

    .elementor-nav-menu--dropdown {
      position: fixed;
      inset: 74px var(--page-pad) auto;
      z-index: 50;
      display: none;
      padding: 14px;
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      box-shadow: 0 24px 60px var(--shadow-card);
    }
    .elementor-nav-menu--dropdown.is-open { display: block; }
    .elementor-nav-menu--dropdown .elementor-nav-menu {
      display: grid;
      gap: 0;
      justify-content: stretch;
    }
    .elementor-nav-menu--dropdown .elementor-item {
      display: flex;
      justify-content: space-between;
      padding: 13px 4px;
      border-block-end: 1px solid var(--color-border);
      color: var(--color-ink-2);
      white-space: nowrap;
    }
    .elementor-nav-menu--dropdown li:last-child .elementor-item { border-block-end: 0; }
    .elementor-nav-menu--dropdown .elementor-item::after { display: none; }

    .hero {
      position: relative;
      min-height: clamp(640px, 56vw, 850px);
      display: grid;
      align-items: center;
      overflow: clip;
      color: var(--color-white);
      background: var(--color-ink);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-82) 27%, var(--veil-dark-46) 55%, var(--veil-dark-12) 100%),
        linear-gradient(180deg, var(--veil-dark-28), transparent 38%, var(--veil-dark-42)),
        url("/wp-content/uploads/ejdesign-source/ej-hero-gpt-image-2.jpg");
      background-size: cover;
      background-position: center right;
      transform: scale(1.01);
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 82% 30%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 18rem),
        linear-gradient(90deg, var(--veil-dark-22) 0%, transparent 42%, var(--veil-dark-10) 100%);
      box-shadow: inset 0 -140px 150px var(--veil-dark-32);
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
      padding-block: 132px 72px;
    }
    .hero-copy {
      display: grid;
      gap: 22px;
      max-width: 560px;
    }
    .hero-kicker {
      display: inline-grid;
      grid-template-columns: 3px auto;
      align-items: center;
      gap: 22px;
      width: fit-content;
      color: color-mix(in srgb, var(--color-white), transparent 14%);
      letter-spacing: .14em;
      font-size: 15px;
    }
    .hero-kicker::before {
      content: "";
      width: 3px;
      height: 48px;
      background: var(--color-teal);
    }
    .hero h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(48px, 6vw, 88px);
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .hero p {
      margin: 0;
      max-width: 430px;
      color: color-mix(in srgb, var(--color-white), transparent 16%);
      font-size: clamp(16px, 1.5vw, 20px);
      line-height: 1.9;
      letter-spacing: .04em;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

    .intro {
      display: grid;
      grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
      gap: clamp(56px, 7vw, 92px);
      align-items: center;
      width: min(100% - (var(--page-pad) * 2), 1240px);
      margin-inline: auto;
      padding-block: clamp(76px, 8vw, 122px);
      background: var(--color-white);
      border-block-end: 1px solid var(--color-border);
    }
    .intro-media {
      position: relative;
      padding-block-end: 36px;
      padding-inline-end: clamp(20px, 4vw, 34px);
    }
    .intro-photo {
      min-height: clamp(430px, 42vw, 584px);
      background:
        linear-gradient(90deg, transparent 0 15%, var(--veil-dark-10) 15% 15.3%, transparent 15.3% 100%),
        var(--image-about) center / cover no-repeat;
      position: relative;
      overflow: clip;
      border-radius: 8px;
      box-shadow: 0 26px 72px rgb(16 16 16 / 0.10);
    }
    .intro-photo::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--veil-dark-12), transparent 34%, var(--veil-dark-10));
      pointer-events: none;
    }
    .intro-photo::after {
      display: none;
    }
    .experience-card {
      position: absolute;
      inset-inline-end: 0;
      inset-block-end: 0;
      display: grid;
      align-content: center;
      width: min(44%, 238px);
      min-height: 168px;
      padding: 28px 30px;
      border-radius: 5px;
      background: #087981;
      color: var(--color-white);
      box-shadow: 0 22px 44px rgb(16 16 16 / 0.18);
    }
    .experience-card strong {
      display: block;
      font-size: clamp(38px, 4vw, 58px);
      font-weight: 850;
      line-height: .95;
      letter-spacing: -.03em;
    }
    .experience-card span {
      display: block;
      margin-block-start: 12px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .project-photo::after,
    .service-photo::after,
    .commercial-photo::after,
    .bottom-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, var(--veil-dark-10));
      pointer-events: none;
    }
    .intro-text {
      display: grid;
      align-content: center;
      padding-block: clamp(20px, 3vw, 42px);
    }
    .intro-text .eyebrow {
      margin-block-end: 18px;
      color: #087981;
      font-weight: 800;
      letter-spacing: .16em;
    }
    .about-title {
      max-width: 610px;
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: .04em;
    }
    .intro-text .section-copy {
      max-width: 610px;
      margin-block-start: 18px;
      color: var(--color-muted);
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 2.05;
      letter-spacing: .045em;
    }
    .stats {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 22px 46px;
      max-width: 520px;
      margin-block-start: clamp(32px, 4vw, 46px);
    }
    .stat {
      position: relative;
      min-width: 0;
      padding-inline-start: 22px;
      padding-block: 0 2px;
    }
    .stat::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block: 3px 0;
      width: 1px;
      background: color-mix(in srgb, #087981, var(--color-border) 68%);
    }
    .stat:nth-child(3) { grid-column: 1 / 2; }
    .stat strong {
      display: block;
      color: #087981;
      font-family: var(--font-body);
      font-size: clamp(28px, 3vw, 38px);
      font-weight: 850;
      line-height: 1;
      letter-spacing: -.01em;
    }
    .stat span {
      display: block;
      margin-block-start: 8px;
      color: var(--color-body);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .04em;
      line-height: 1.35;
      white-space: nowrap;
    }

    .advantages {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-block: 1px solid var(--color-border);
    }
    .advantage {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 14px;
      padding: 28px 26px;
      border-inline-end: 1px solid var(--color-border);
    }
    .advantage:last-child { border-inline-end: 0; }
    .icon {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      color: var(--color-teal-deep);
    }
    .icon svg { width: 44px; stroke: currentColor; stroke-width: 1.35; fill: none; }
    .advantage h3,
    .service-card h3,
    .project-card h3,
    .process-step h3 {
      margin: 0;
      color: var(--color-ink-2);
      font-weight: 600;
      letter-spacing: .06em;
    }
    .advantage p,
    .service-card p,
    .process-step p,
    .testimonial p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
    }
    .service-card {
      overflow: clip;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-white);
      box-shadow: 0 16px 32px var(--shadow-soft);
      transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    }
    .service-photo {
      position: relative;
      min-height: 180px;
      background: var(--service-bg) center / cover no-repeat;
    }
    .service-one { --service-bg: var(--image-service-residential); }
    .service-two { --service-bg: var(--image-service-commercial); }
    .service-three { --service-bg: var(--image-service-renovation); }
    .service-four { --service-bg: var(--image-service-styling); }
    .service-card div:last-child { padding: 22px; display: grid; gap: 8px; }

    .works-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-block-end: 30px;
    }
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }
    .project-card { display: grid; gap: 11px; min-width: 0; }
    .project-photo {
      position: relative;
      min-height: 170px;
      overflow: clip;
      border-radius: 2px;
      background: var(--project-bg) center / cover no-repeat;
      box-shadow: 0 14px 30px var(--shadow-soft);
      transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    }
    .project-card h3 { font-size: 15px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .p1 { --project-bg: var(--image-work-modern); }
    .p2 { --project-bg: var(--image-work-wabi); }
    .p3 { --project-bg: var(--image-work-dark-luxury); }
    .p4 { --project-bg: var(--image-work-nordic); }
    .p5 { --project-bg: var(--image-work-retail); }
    .p6 { --project-bg: var(--image-work-cafe); }
    .p7 { --project-bg: var(--image-work-clinic); }
    .p8 { --project-bg: var(--image-work-office); }

    .commercial {
      display: grid;
      grid-template-columns: minmax(320px, .88fr) minmax(0, 1.12fr);
      align-items: stretch;
      background: var(--color-ivory);
    }
    .commercial-copy {
      display: grid;
      align-content: center;
      padding: clamp(44px, 7vw, 82px) clamp(28px, 6vw, 72px);
    }
    .commercial-points {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin: 30px 0;
    }
    .commercial-points span {
      display: grid;
      justify-items: center;
      gap: 9px;
      color: var(--color-muted);
      font-size: 13px;
      text-align: center;
      min-width: 0;
    }
    .commercial-points svg { width: 26px; height: 26px; stroke: var(--color-teal-deep); stroke-width: 1.5; fill: none; }
    .commercial-photo {
      position: relative;
      min-height: 430px;
      background:
        linear-gradient(90deg, var(--veil-dark-10), transparent 44%),
        var(--image-commercial) center / cover no-repeat;
    }

    .process {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(42px, 7vw, 86px);
      align-items: start;
    }
    .process-column {
      display: grid;
      gap: clamp(30px, 4vw, 46px);
      min-width: 0;
    }
    .process-step {
      position: relative;
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr);
      column-gap: 24px;
      align-items: start;
      min-width: 0;
    }
    .process-step::after {
      content: "";
      position: absolute;
      inset-block-start: 61px;
      inset-inline-start: 34px;
      width: 1px;
      height: calc(100% - 22px);
      background: var(--color-border);
    }
    .process-column .process-step:last-child::after { display: none; }
    .step-marker {
      display: grid;
      justify-items: center;
      gap: 12px;
      color: var(--color-muted);
    }
    .step-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      color: var(--color-muted);
      z-index: 1;
    }
    .step-icon svg { width: 42px; stroke: currentColor; stroke-width: 1.45; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .step-arrow {
      width: 0;
      height: 0;
      border-inline: 6px solid transparent;
      border-block-start: 9px solid currentColor;
      opacity: .9;
    }
    .process-column .process-step:last-child .step-arrow { opacity: 0; }
    .step-copy {
      min-width: 0;
      padding-block-start: 4px;
    }
    .step-titleline {
      display: grid;
      grid-template-columns: auto minmax(36px, 1fr) auto;
      align-items: baseline;
      gap: 14px;
      margin-block-end: 13px;
    }
    .process-step h3 {
      margin: 0;
      color: var(--color-body);
      font-size: clamp(16px, 1.7vw, 19px);
      font-weight: 700;
      letter-spacing: .08em;
      white-space: nowrap;
    }
    .step-line {
      height: 1px;
      background: var(--color-border);
      transform: translateY(-3px);
    }
    .process-step small {
      color: color-mix(in srgb, var(--color-muted), transparent 72%);
      font-family: var(--font-display);
      font-size: clamp(22px, 2.8vw, 31px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: .02em;
      white-space: nowrap;
    }
    .process-step p {
      margin: 0;
      color: var(--color-muted);
      font-size: clamp(14px, 1.45vw, 16px);
      letter-spacing: .08em;
      line-height: 1.9;
    }

    .testimonials-wrap {
      position: relative;
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 36px;
      align-items: center;
      gap: 20px;
    }
    .testimonials {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }
    .testimonial {
      padding: 26px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-white);
      box-shadow: 0 16px 34px var(--shadow-soft);
    }
    .client {
      display: grid;
      grid-template-columns: 48px 1fr;
      align-items: center;
      gap: 12px;
      margin-block-start: 20px;
    }
    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--photo-coal), var(--photo-linen));
    }
    .client strong { display: block; color: var(--color-ink-2); }
    .stars { color: var(--color-gold); letter-spacing: .12em; font-size: 12px; }
    .arrow {
      width: 36px;
      height: 36px;
      border: 0;
      background: transparent;
      color: var(--color-muted);
      display: grid;
      place-items: center;
    }
    .arrow svg { width: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; }

    .bottom-cta {
      position: relative;
      overflow: clip;
      min-height: 230px;
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--color-white);
      background:
        linear-gradient(180deg, var(--veil-dark-74), var(--veil-dark-86)),
        var(--image-cta) center / cover no-repeat;
    }
    .bottom-cta .container {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 16px;
    }
    .bottom-cta h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(30px, 4.5vw, 48px);
      font-weight: 500;
      letter-spacing: .04em;
      text-wrap: balance;
    }
    .bottom-cta p { margin: 0; color: color-mix(in srgb, var(--color-white), transparent 18%); }

    .footer {
      background: var(--color-ink);
      color: color-mix(in srgb, var(--color-white), transparent 24%);
      padding-block: 42px 26px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr .72fr .72fr 1fr;
      gap: 42px;
      align-items: start;
    }
    .footer-logo { width: 192px; margin-block-end: 16px; }
    .footer p { margin: 0; max-width: 340px; font-size: 14px; }
    .footer h3 {
      margin: 0 0 14px;
      color: var(--color-white);
      font-size: 14px;
      letter-spacing: .12em;
    }
    .footer-links, .footer-contact { display: grid; gap: 8px; font-size: 14px; }
    .line-box {
      display: grid;
      grid-template-columns: 70px 1fr;
      align-items: center;
      gap: 14px;
      margin-block-start: 16px;
      padding: 12px;
      border: 1px solid var(--line-light);
      border-radius: var(--radius-card);
    }
    .qr {
      width: 70px;
      aspect-ratio: 1;
      border: 7px solid var(--color-white);
      border-radius: 6px;
      background:
        linear-gradient(90deg, var(--color-white) 9px, transparent 9px 13px, var(--color-white) 13px 18px, transparent 18px),
        linear-gradient(var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 18px, transparent 18px),
        var(--color-teal);
      background-size: 20px 20px;
    }
    .copyright {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin: 32px auto 0;
      padding-block-start: 18px;
      border-block-start: 1px solid var(--line-light);
      color: color-mix(in srgb, var(--color-white), transparent 46%);
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    @media (hover: hover) and (pointer: fine) {
      .btn:hover { transform: translateY(-2px); }
      .service-card:hover, .project-card:hover .project-photo { transform: translateY(-4px); box-shadow: 0 22px 46px var(--shadow-card); }
    }

    @media (max-width: 980px) {
      .site-header { padding-block: 14px; }
      .site-header > .e-con-full { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
      .elementor-widget-heading h6 { display: none; }
      .elementor-nav-menu--main { display: none; }
      .elementor-menu-toggle { display: grid; }
      .elementor-element-4dbc158 { justify-content: end; }
      .hero { min-height: 760px; }
      .hero-content { padding-block: 120px 58px; }
      .intro, .commercial { grid-template-columns: 1fr; }
      .intro {
        width: min(100% - (var(--page-pad) * 2), 720px);
        gap: 34px;
        min-height: 0;
        padding-block: 64px;
      }
      .intro-media { padding-inline-end: 26px; padding-block-end: 32px; }
      .intro-photo { min-height: 360px; }
      .intro-text { padding: 0; }
      .advantages, .services-grid, .projects-grid, .testimonials, .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .advantage:nth-child(2n), .advantage:last-child { border-inline-end: 0; }
      .advantage:nth-child(n + 3) { border-block-start: 1px solid var(--color-border); }
      .commercial-photo { min-height: 340px; }
      .process { gap: 34px; }
      .process-step { grid-template-columns: 58px minmax(0, 1fr); column-gap: 18px; }
      .process-step::after { inset-inline-start: 29px; }
      .step-icon { width: 46px; height: 46px; }
      .step-icon svg { width: 36px; }
      .testimonials-wrap { grid-template-columns: minmax(0, 1fr); }
      .arrow { display: none; }
      .footer-grid { gap: 30px; }
    }

    @media (max-width: 620px) {
      :root { --page-pad: 20px; }
      .section { padding-block: 56px; }
      .elementor-widget-theme-site-logo img { width: 138px; }
      .elementor-element-4dbc158 { display: none; }
      .hero { min-height: 720px; }
      .hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-76) 0%, var(--veil-dark-42) 42%, var(--veil-dark-88) 100%),
          url("/wp-content/uploads/ejdesign-source/ej-hero-gpt-image-2.jpg");
        background-size: auto 100%;
        background-position: 64% center;
      }
      .hero h1 { font-size: clamp(42px, 14vw, 58px); }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .intro {
        width: min(100% - 40px, 440px);
        gap: 30px;
        padding-block: 56px;
      }
      .intro-media {
        padding-inline-end: 18px;
        padding-block-end: 26px;
      }
      .intro-photo { min-height: 280px; }
      .experience-card {
        width: min(58%, 176px);
        min-height: 122px;
        padding: 22px 24px;
      }
      .experience-card strong { font-size: 40px; }
      .experience-card span { font-size: 11px; letter-spacing: .12em; }
      .about-title { font-size: 30px; line-height: 1.26; }
      .intro-text .section-copy { margin-block-start: 22px; }
      .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
      .stat { padding-inline-start: 16px; }
      .stat strong { font-size: 30px; }
      .stat span { font-size: 12px; white-space: normal; }
      .advantages, .services-grid, .projects-grid, .commercial-points, .process, .testimonials, .footer-grid { grid-template-columns: 1fr; }
      .advantage { border-inline-end: 0; border-block-start: 1px solid var(--color-border); }
      .advantage:first-child { border-block-start: 0; }
      .works-head { display: grid; justify-items: start; }
      .project-photo { min-height: 210px; }
      .commercial-points span { grid-template-columns: 28px 1fr; justify-items: start; text-align: start; }
      .process { gap: 30px; }
      .process-column { gap: 30px; }
      .process-step { grid-template-columns: 50px minmax(0, 1fr); column-gap: 16px; }
      .process-step::after { inset-block-start: 54px; inset-inline-start: 25px; }
      .step-icon { width: 42px; height: 42px; }
      .step-icon svg { width: 34px; }
      .step-titleline { grid-template-columns: minmax(0, auto) minmax(20px, 1fr) auto; gap: 10px; }
      .process-step h3 { white-space: normal; }
      .process-step small { font-size: 22px; }
      .bottom-cta { min-height: 280px; }
      .copyright { display: grid; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

/* Source: about.html */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
    :root {
      --color-ink: #101010;
      --color-ink-2: #1A1A1A;
      --color-charcoal: #22201D;
      --color-body: #44403A;
      --color-muted: #8A8378;
      --color-taupe: #A39B8E;
      --color-white: #FFFFFF;
      --color-ivory: #F6F3EE;
      --color-soft: #FBFAF7;
      --color-border: #E5DFD4;
      --color-teal: #32C7BC;
      --color-teal-deep: #15998F;
      --color-teal-ink: #087981;
      --color-teal-soft: #E7FAF7;
      --color-gold: #B8985A;
      --color-pearl: #C9B896;
      --shadow-soft: rgb(16 16 16 / 0.08);
      --shadow-card: rgb(16 16 16 / 0.12);
      --veil-dark-10: rgb(16 16 16 / 0.10);
      --veil-dark-16: rgb(16 16 16 / 0.16);
      --veil-dark-22: rgb(16 16 16 / 0.22);
      --veil-dark-38: rgb(16 16 16 / 0.38);
      --veil-dark-46: rgb(16 16 16 / 0.46);
      --veil-dark-58: rgb(16 16 16 / 0.58);
      --veil-dark-74: rgb(16 16 16 / 0.74);
      --veil-dark-82: rgb(16 16 16 / 0.82);
      --veil-dark-88: rgb(16 16 16 / 0.88);
      --line-light: rgb(255 255 255 / 0.16);
      --image-hero: url("/wp-content/uploads/ejdesign-source/ej-hero-gpt-image-2.jpg");
      --image-about: url("/wp-content/uploads/ejdesign-source/ej-about-gpt-image-2.jpg");
      --image-commercial: url("/wp-content/uploads/ejdesign-source/ej-commercial-gpt-image-2.jpg");
      --image-cta: url("/wp-content/uploads/ejdesign-source/ej-cta-material-gpt-image-2.jpg");
      --font-display: "Iowan Old Style", "Noto Serif TC", "Songti TC", Georgia, serif;
      --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif;
      --radius-card: 10px;
      --radius-pill: 999px;
      --content: 1180px;
      --wide: 1360px;
      --page-pad: clamp(20px, 5vw, 56px);
      --ease: cubic-bezier(.19, 1, .22, 1);
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; overflow-x: clip; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--color-white);
      color: var(--color-body);
      font-family: var(--font-body);
      line-height: 1.72;
      text-rendering: geometricPrecision;
    }
    button, a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img, svg { display: block; max-width: 100%; }

    .page { min-height: 100dvh; background: var(--color-white); }
    .container {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin-inline: auto;
    }
    .container-wide {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
    }
    .section { padding-block: clamp(64px, 8vw, 118px); }
    .section-soft { background: linear-gradient(180deg, var(--color-white), var(--color-soft)); }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .section-title {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .section-copy {
      margin: 18px 0 0;
      max-width: 620px;
      color: var(--color-muted);
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 2.05;
      letter-spacing: .045em;
    }
    .section-heading {
      display: grid;
      justify-items: center;
      text-align: center;
      margin-block-end: clamp(30px, 5vw, 58px);
    }
    .title-rule {
      width: 42px;
      height: 2px;
      margin-block-start: 15px;
      background: var(--color-teal);
    }

    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 40;
      padding: 18px var(--page-pad);
      transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
    }
    .site-header.is-scrolled {
      padding-block: 12px;
      background: color-mix(in srgb, var(--color-ink), transparent 6%);
      border-block-end: 1px solid var(--line-light);
      backdrop-filter: blur(18px);
    }
    .header-inner {
      width: min(100%, var(--wide));
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand img { width: clamp(142px, 18vw, 206px); height: auto; }
    .mobile-logo {
      display: none;
      align-items: center;
      gap: 10px;
      color: var(--color-white);
    }
    .mobile-logo b {
      display: grid;
      place-items: center;
      width: 34px;
      aspect-ratio: 1;
      background: var(--color-teal);
      color: var(--color-white);
      border-radius: 2px;
      letter-spacing: -.05em;
    }
    .mobile-logo span {
      font-family: var(--font-display);
      font-size: 16px;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(22px, 3vw, 42px);
      color: color-mix(in srgb, var(--color-white), transparent 12%);
      font-size: 14px;
      letter-spacing: .12em;
    }
    .nav a { position: relative; white-space: nowrap; }
    .nav a::after {
      content: "";
      position: absolute;
      inset-inline: 44%;
      inset-block-end: -10px;
      height: 2px;
      background: var(--color-teal);
      opacity: 0;
      transition: inset .3s var(--ease), opacity .3s var(--ease);
    }
    .nav a:hover::after,
    .nav a[aria-current="page"]::after { inset-inline: 0; opacity: 1; }
    .header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-light);
      border-radius: 50%;
      background: var(--veil-dark-22);
      color: var(--color-white);
      cursor: pointer;
      place-items: center;
    }
    .menu-button svg { width: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 12px 22px;
      border: 1px solid transparent;
      border-radius: 4px;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    }
    .btn-teal { background: var(--color-teal); color: var(--color-white); box-shadow: 0 16px 32px color-mix(in srgb, var(--color-teal), transparent 72%); }
    .btn-outline { color: var(--color-white); border-color: color-mix(in srgb, var(--color-white), transparent 42%); background: var(--veil-dark-10); }
    .mobile-nav {
      position: fixed;
      inset: 74px var(--page-pad) auto;
      z-index: 50;
      display: none;
      padding: 14px;
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      box-shadow: 0 24px 60px var(--shadow-card);
    }
    .mobile-nav.is-open { display: block; }
    .mobile-nav a {
      display: flex;
      justify-content: space-between;
      padding: 13px 4px;
      border-block-end: 1px solid var(--color-border);
      color: var(--color-ink-2);
      white-space: nowrap;
    }
    .mobile-nav a:last-child { border-block-end: 0; }
    .mobile-nav small { color: var(--color-teal-deep); letter-spacing: .14em; }

    .about-hero {
      position: relative;
      min-height: clamp(540px, 62vh, 680px);
      display: grid;
      align-items: center;
      overflow: clip;
      color: var(--color-white);
      background: var(--color-ink);
    }
    .about-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-74) 35%, var(--veil-dark-38) 68%, var(--veil-dark-16) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-46)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .about-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 78% 36%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 20rem);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
      padding-block: clamp(120px, 13vh, 154px) clamp(96px, 10vh, 118px);
    }
    .hero-copy {
      display: grid;
      gap: 18px;
      max-width: 620px;
    }
    .hero-kicker {
      display: inline-grid;
      grid-template-columns: 3px auto;
      align-items: center;
      gap: 20px;
      width: fit-content;
      color: color-mix(in srgb, var(--color-white), transparent 14%);
      letter-spacing: .15em;
      font-size: 13px;
      font-weight: 700;
    }
    .hero-kicker::before {
      content: "";
      width: 3px;
      height: 36px;
      background: var(--color-teal);
    }
    .about-hero h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(38px, 4.6vw, 62px);
      font-weight: 500;
      line-height: 1.16;
      letter-spacing: .05em;
      text-wrap: balance;
    }
    .about-hero p {
      margin: 0;
      max-width: 500px;
      color: color-mix(in srgb, var(--color-white), transparent 15%);
      font-size: clamp(15px, 1.35vw, 17px);
      line-height: 1.95;
      letter-spacing: .045em;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 4px; }
    .philosophy-grid {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
      align-items: center;
      gap: clamp(44px, 7vw, 92px);
    }
    .philosophy-icons {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-block-start: clamp(34px, 4vw, 48px);
      border-block-start: 1px solid var(--color-border);
    }
    .philosophy-icon {
      display: grid;
      justify-items: center;
      gap: 12px;
      padding: 24px 12px 0;
      border-inline-end: 1px solid var(--color-border);
      color: var(--color-muted);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-align: center;
    }
    .philosophy-icon:last-child { border-inline-end: 0; }
    .philosophy-icon svg { width: 42px; height: 42px; stroke: var(--color-teal-deep); stroke-width: 1.25; fill: none; }
    .material-photo {
      min-height: clamp(360px, 42vw, 560px);
      border-radius: 2px;
      background:
        linear-gradient(180deg, transparent, var(--veil-dark-10)),
        var(--image-about) center / cover no-repeat;
      box-shadow: 0 24px 64px var(--shadow-soft);
    }

    .designer {
      display: grid;
      grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr);
      align-items: stretch;
      background: var(--color-soft);
    }
    .designer-photo {
      min-height: clamp(420px, 47vw, 660px);
      background:
        linear-gradient(180deg, transparent, var(--veil-dark-16)),
        var(--image-commercial) center / cover no-repeat;
    }
    .designer-copy {
      display: grid;
      align-content: center;
      padding: clamp(52px, 7vw, 96px) var(--page-pad);
      max-width: 720px;
    }
    .designer-name {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 500;
      letter-spacing: .08em;
    }
    .profile-list {
      display: grid;
      gap: 10px;
      margin: 30px 0 34px;
      padding: 0;
      list-style: none;
      color: var(--color-charcoal);
      font-size: 16px;
      letter-spacing: .06em;
    }
    .profile-list b {
      display: inline-block;
      min-width: 48px;
      color: var(--color-muted);
      font-weight: 700;
    }

    .licenses {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(22px, 4vw, 42px);
    }
    .license-card {
      position: relative;
      display: grid;
      justify-items: center;
      min-height: 160px;
      padding: 34px 28px 28px;
      border: 1px solid var(--color-border);
      background: var(--color-white);
      box-shadow: 0 14px 34px var(--shadow-soft);
      text-align: center;
      overflow: clip;
    }
    .license-card::before,
    .license-card::after {
      content: "";
      position: absolute;
      width: 34px;
      aspect-ratio: 1;
      border-color: var(--color-pearl);
      opacity: .82;
    }
    .license-card::before {
      inset-block-start: 12px;
      inset-inline-start: 12px;
      border-block-start: 1px solid;
      border-inline-start: 1px solid;
    }
    .license-card::after {
      inset-block-end: 12px;
      inset-inline-end: 12px;
      border-block-end: 1px solid;
      border-inline-end: 1px solid;
    }
    .license-card p {
      margin: 0;
      color: var(--color-body);
      line-height: 1.9;
      letter-spacing: .08em;
    }
    .license-card strong {
      display: block;
      margin-block-start: 6px;
      color: var(--color-charcoal);
      font-family: var(--font-display);
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 500;
      letter-spacing: .08em;
    }
    .laurel {
      width: 38px;
      height: 18px;
      margin-block-start: 18px;
      border-block-end: 2px solid var(--color-gold);
      border-radius: 50%;
      opacity: .72;
    }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-block: 1px solid var(--color-border);
    }
    .value-card {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 14px;
      padding: 34px 24px;
      border-inline-end: 1px solid var(--color-border);
      min-width: 0;
    }
    .value-card:last-child { border-inline-end: 0; }
    .value-card svg { width: 52px; height: 52px; stroke: var(--color-teal-deep); stroke-width: 1.35; fill: none; }
    .value-card h3,
    .attitude-step h3 {
      margin: 0;
      color: var(--color-ink-2);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .08em;
    }
    .value-card p,
    .attitude-step p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.8;
    }

    .attitude-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: start;
      gap: 0;
    }
    .attitude-step {
      position: relative;
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 14px;
      padding-inline: 22px;
      min-width: 0;
    }
    .attitude-step::after {
      content: "";
      position: absolute;
      inset-block-start: 31px;
      inset-inline-start: calc(50% + 42px);
      width: calc(100% - 84px);
      border-block-start: 1px dashed var(--color-gold);
    }
    .attitude-step:last-child::after { display: none; }
    .attitude-number {
      display: grid;
      place-items: center;
      width: 64px;
      aspect-ratio: 1;
      border: 1px solid var(--color-border);
      border-radius: 50%;
      background: var(--color-white);
      color: var(--color-teal-deep);
      font-family: var(--font-display);
      font-size: 22px;
      letter-spacing: .02em;
      z-index: 1;
    }

    .bottom-cta {
      position: relative;
      overflow: clip;
      min-height: 280px;
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--color-white);
      background:
        linear-gradient(180deg, var(--veil-dark-74), var(--veil-dark-88)),
        var(--image-cta) center / cover no-repeat;
    }
    .bottom-cta .container {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 16px;
    }
    .bottom-cta h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(30px, 4.5vw, 48px);
      font-weight: 500;
      letter-spacing: .05em;
      text-wrap: balance;
    }
    .bottom-cta p { margin: 0; color: color-mix(in srgb, var(--color-white), transparent 18%); }

    .footer {
      background: var(--color-ink);
      color: color-mix(in srgb, var(--color-white), transparent 24%);
      padding-block: 42px 26px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr .72fr .72fr 1fr;
      gap: 42px;
      align-items: start;
    }
    .footer-logo { width: 192px; margin-block-end: 16px; }
    .footer p { margin: 0; max-width: 340px; font-size: 14px; }
    .footer h3 {
      margin: 0 0 14px;
      color: var(--color-white);
      font-size: 14px;
      letter-spacing: .12em;
    }
    .footer-links,
    .footer-contact { display: grid; gap: 8px; font-size: 14px; }
    .line-box {
      display: grid;
      grid-template-columns: 70px 1fr;
      align-items: center;
      gap: 14px;
      margin-block-start: 16px;
      padding: 12px;
      border: 1px solid var(--line-light);
      border-radius: var(--radius-card);
    }
    .qr {
      width: 70px;
      aspect-ratio: 1;
      border: 7px solid var(--color-white);
      border-radius: 6px;
      background:
        linear-gradient(90deg, var(--color-white) 9px, transparent 9px 13px, var(--color-white) 13px 18px, transparent 18px),
        linear-gradient(var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 18px, transparent 18px),
        var(--color-teal);
      background-size: 20px 20px;
    }
    .copyright {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin: 32px auto 0;
      padding-block-start: 18px;
      border-block-start: 1px solid var(--line-light);
      color: color-mix(in srgb, var(--color-white), transparent 46%);
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    @media (hover: hover) and (pointer: fine) {
      .btn:hover { transform: translateY(-2px); }
      .value-card:hover svg { color: var(--color-teal); }
    }

    @media (max-width: 980px) {
      .site-header { padding-block: 14px; }
      .header-inner { grid-template-columns: 1fr auto auto; }
      .brand img,
      .nav { display: none; }
      .mobile-logo { display: inline-flex; }
      .menu-button { display: grid; }
      .header-actions .btn { display: none; }
      .about-hero { min-height: 560px; }
      .hero-inner { padding-block: 116px 86px; }
      .philosophy-grid,
      .designer { grid-template-columns: 1fr; }
      .designer-photo { min-height: 420px; }
      .designer-copy { max-width: none; }
      .values-grid,
      .attitude-row,
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .value-card:nth-child(2n),
      .value-card:last-child { border-inline-end: 0; }
      .value-card:nth-child(n + 3) { border-block-start: 1px solid var(--color-border); }
      .attitude-step:nth-child(2)::after { display: none; }
      .footer-grid { gap: 30px; }
    }

    @media (max-width: 620px) {
      :root { --page-pad: 20px; }
      .section { padding-block: 58px; }
      .about-hero { min-height: 500px; }
      .about-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 46%, var(--veil-dark-88) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .about-hero h1 { font-size: clamp(34px, 10vw, 46px); }
      .hero-actions { display: grid; grid-template-columns: 1fr; }      .philosophy-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .philosophy-icon:nth-child(2n) { border-inline-end: 0; }
      .philosophy-icon:nth-child(n + 3) { border-block-start: 1px solid var(--color-border); }
      .material-photo,
      .designer-photo { min-height: 310px; }
      .licenses,
      .values-grid,
      .attitude-row,
      .footer-grid { grid-template-columns: 1fr; }
      .value-card { border-inline-end: 0; border-block-start: 1px solid var(--color-border); }
      .value-card:first-child { border-block-start: 0; }
      .attitude-row { gap: 30px; }
      .attitude-step::after {
        inset-block-start: calc(100% + 8px);
        inset-inline-start: 50%;
        width: 1px;
        height: 22px;
        border-block-start: 0;
        border-inline-start: 1px dashed var(--color-gold);
      }
      .attitude-step:nth-child(2)::after { display: block; }
      .attitude-step:last-child::after { display: none; }
      .line-box { grid-template-columns: 56px 1fr; }
      .qr { width: 56px; border-width: 6px; }
      .copyright { display: grid; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

/* Source: service.html */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
    :root {
      --color-ink: #101010;
      --color-ink-2: #1A1A1A;
      --color-charcoal: #22201D;
      --color-body: #44403A;
      --color-muted: #8A8378;
      --color-taupe: #A39B8E;
      --color-white: #FFFFFF;
      --color-ivory: #F6F3EE;
      --color-soft: #FBFAF7;
      --color-border: #E5DFD4;
      --color-teal: #32C7BC;
      --color-teal-deep: #15998F;
      --color-teal-ink: #087981;
      --color-teal-soft: #E7FAF7;
      --color-gold: #B8985A;
      --color-pearl: #C9B896;
      --shadow-soft: rgb(16 16 16 / 0.08);
      --shadow-card: rgb(16 16 16 / 0.12);
      --veil-dark-10: rgb(16 16 16 / 0.10);
      --veil-dark-12: rgb(16 16 16 / 0.12);
      --veil-dark-18: rgb(16 16 16 / 0.18);
      --veil-dark-22: rgb(16 16 16 / 0.22);
      --veil-dark-38: rgb(16 16 16 / 0.38);
      --veil-dark-46: rgb(16 16 16 / 0.46);
      --veil-dark-58: rgb(16 16 16 / 0.58);
      --veil-dark-74: rgb(16 16 16 / 0.74);
      --veil-dark-82: rgb(16 16 16 / 0.82);
      --veil-dark-88: rgb(16 16 16 / 0.88);
      --line-light: rgb(255 255 255 / 0.16);
      --image-hero: url("/wp-content/uploads/ejdesign-source/ej-hero-gpt-image-2.jpg");
      --image-about: url("/wp-content/uploads/ejdesign-source/ej-about-gpt-image-2.jpg");
      --image-service-residential: url("/wp-content/uploads/ejdesign-source/ej-service-residential-gpt-image-2.jpg");
      --image-service-commercial: url("/wp-content/uploads/ejdesign-source/ej-service-commercial-gpt-image-2.jpg");
      --image-service-renovation: url("/wp-content/uploads/ejdesign-source/ej-service-renovation-gpt-image-2.jpg");
      --image-service-styling: url("/wp-content/uploads/ejdesign-source/ej-service-styling-gpt-image-2.jpg");
      --image-work-office: url("/wp-content/uploads/ejdesign-source/ej-work-office-gpt-image-2.jpg");
      --image-commercial: url("/wp-content/uploads/ejdesign-source/ej-commercial-gpt-image-2.jpg");
      --image-cta: url("/wp-content/uploads/ejdesign-source/ej-cta-material-gpt-image-2.jpg");
      --font-display: "Iowan Old Style", "Noto Serif TC", "Songti TC", Georgia, serif;
      --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif;
      --radius-card: 10px;
      --radius-pill: 999px;
      --content: 1180px;
      --wide: 1360px;
      --page-pad: clamp(20px, 5vw, 56px);
      --ease: cubic-bezier(.19, 1, .22, 1);
    }

    * { box-sizing: border-box; }
    html,
    body { margin: 0; min-height: 100%; overflow-x: clip; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--color-white);
      color: var(--color-body);
      font-family: var(--font-body);
      line-height: 1.72;
      text-rendering: geometricPrecision;
    }
    button,
    a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img,
    svg { display: block; max-width: 100%; }

    .page { min-height: 100dvh; background: var(--color-white); }
    .container {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin-inline: auto;
    }
    .container-wide {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
    }
    .section { padding-block: clamp(64px, 8vw, 118px); }
    .section-soft { background: linear-gradient(180deg, var(--color-white), var(--color-soft)); }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .section-title {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .section-copy {
      margin: 18px 0 0;
      max-width: 640px;
      color: var(--color-muted);
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 2.05;
      letter-spacing: .045em;
    }
    .section-heading {
      display: grid;
      justify-items: center;
      text-align: center;
      margin-block-end: clamp(30px, 5vw, 58px);
    }
    .title-rule {
      width: 42px;
      height: 2px;
      margin-block-start: 15px;
      background: var(--color-teal);
    }

    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 40;
      padding: 18px var(--page-pad);
      transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
    }
    .site-header.is-scrolled {
      padding-block: 12px;
      background: color-mix(in srgb, var(--color-ink), transparent 6%);
      border-block-end: 1px solid var(--line-light);
      backdrop-filter: blur(18px);
    }
    .header-inner {
      width: min(100%, var(--wide));
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand img { width: clamp(142px, 18vw, 206px); height: auto; }
    .mobile-logo {
      display: none;
      align-items: center;
      gap: 10px;
      color: var(--color-white);
    }
    .mobile-logo b {
      display: grid;
      place-items: center;
      width: 34px;
      aspect-ratio: 1;
      background: var(--color-teal);
      color: var(--color-white);
      border-radius: 2px;
      letter-spacing: -.05em;
    }
    .mobile-logo span {
      font-family: var(--font-display);
      font-size: 16px;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(22px, 3vw, 42px);
      color: color-mix(in srgb, var(--color-white), transparent 12%);
      font-size: 14px;
      letter-spacing: .12em;
    }
    .nav a { position: relative; white-space: nowrap; }
    .nav a::after {
      content: "";
      position: absolute;
      inset-inline: 44%;
      inset-block-end: -10px;
      height: 2px;
      background: var(--color-teal);
      opacity: 0;
      transition: inset .3s var(--ease), opacity .3s var(--ease);
    }
    .nav a:hover::after,
    .nav a[aria-current="page"]::after { inset-inline: 0; opacity: 1; }
    .header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-light);
      border-radius: 50%;
      background: var(--veil-dark-22);
      color: var(--color-white);
      cursor: pointer;
      place-items: center;
    }
    .menu-button svg { width: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 12px 22px;
      border: 1px solid transparent;
      border-radius: 4px;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-teal {
      background: var(--color-teal);
      color: var(--color-white);
      box-shadow: 0 16px 32px color-mix(in srgb, var(--color-teal), transparent 72%);
    }
    .btn-outline {
      color: var(--color-white);
      border-color: color-mix(in srgb, var(--color-white), transparent 42%);
      background: var(--veil-dark-10);
    }
    .btn-link {
      min-height: auto;
      padding: 0;
      border-radius: 0;
      color: var(--color-teal-deep);
      border-block-end: 1px solid var(--color-teal);
    }
    .mobile-nav {
      position: fixed;
      inset: 74px var(--page-pad) auto;
      z-index: 50;
      display: none;
      padding: 14px;
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      box-shadow: 0 24px 60px var(--shadow-card);
    }
    .mobile-nav.is-open { display: block; }
    .mobile-nav a {
      display: flex;
      justify-content: space-between;
      padding: 13px 4px;
      border-block-end: 1px solid var(--color-border);
      color: var(--color-ink-2);
      white-space: nowrap;
    }
    .mobile-nav a:last-child { border-block-end: 0; }
    .mobile-nav small { color: var(--color-teal-deep); letter-spacing: .14em; }

    .service-hero {
      position: relative;
      min-height: clamp(520px, 48vw, 690px);
      display: grid;
      align-items: center;
      overflow: clip;
      color: var(--color-white);
      background: var(--color-ink);
    }
    .service-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-82) 26%, var(--veil-dark-46) 57%, var(--veil-dark-12) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-38)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .service-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 78% 28%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 18rem),
        linear-gradient(90deg, var(--veil-dark-18), transparent 52%);
      box-shadow: inset 0 -120px 130px var(--veil-dark-38);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
      padding-block: 120px 78px;
    }
    .hero-copy {
      display: grid;
      gap: 22px;
      max-width: 620px;
    }
    .hero-kicker {
      display: inline-grid;
      grid-template-columns: 3px auto;
      align-items: center;
      gap: 22px;
      width: fit-content;
      color: color-mix(in srgb, var(--color-white), transparent 14%);
      letter-spacing: .14em;
      font-size: 15px;
    }
    .hero-kicker::before {
      content: "";
      width: 3px;
      height: 48px;
      background: var(--color-teal);
    }
    .service-hero h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(42px, 5.2vw, 78px);
      font-weight: 500;
      line-height: 1.14;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .service-hero p {
      margin: 0;
      max-width: 520px;
      color: color-mix(in srgb, var(--color-white), transparent 16%);
      font-size: clamp(16px, 1.45vw, 19px);
      line-height: 1.95;
      letter-spacing: .045em;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

    .service-intro {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr);
      gap: clamp(44px, 7vw, 86px);
      align-items: center;
      padding-block: clamp(70px, 8vw, 112px);
    }
    .intro-panel {
      display: grid;
      gap: 18px;
      min-width: 0;
    }
    .feature-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-block: 1px solid var(--color-border);
    }
    .feature-item {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 14px;
      padding: 26px clamp(16px, 2vw, 28px);
      border-inline-start: 1px solid var(--color-border);
      min-width: 0;
    }
    .feature-item:first-child { border-inline-start: 0; }
    .icon {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      color: var(--color-teal-deep);
    }
    .icon svg { width: 42px; stroke: currentColor; stroke-width: 1.35; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .feature-item h3,
    .service-card h3,
    .reason h3,
    .process-node h3 {
      margin: 0;
      color: var(--color-ink-2);
      font-weight: 700;
      letter-spacing: .06em;
    }
    .feature-item p,
    .service-card p,
    .reason p,
    .process-node p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.85;
    }

    .service-board {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid var(--color-border);
      background: var(--color-white);
    }
    .service-card {
      display: grid;
      grid-template-columns: minmax(180px, .54fr) minmax(0, .46fr);
      min-height: 286px;
      border-block-end: 1px solid var(--color-border);
      min-width: 0;
    }
    .service-card:nth-child(odd) { border-inline-end: 1px solid var(--color-border); }
    .service-card:nth-last-child(-n + 2) { border-block-end: 0; }
    .service-card:nth-child(even) .service-copy { order: 2; }
    .service-card:nth-child(even) .service-photo { order: 1; }
    .service-copy {
      display: grid;
      align-content: center;
      gap: 16px;
      padding: clamp(24px, 3.2vw, 42px);
      min-width: 0;
    }
    .service-index {
      width: fit-content;
      color: var(--color-gold);
      font-family: var(--font-display);
      font-size: clamp(22px, 2.5vw, 32px);
      line-height: 1;
      letter-spacing: .02em;
      border-block-end: 1px solid var(--color-pearl);
      padding-block-end: 10px;
    }
    .service-card h3 {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.8vw, 34px);
      font-weight: 500;
      letter-spacing: .06em;
    }
    .service-card .btn-link {
      justify-self: start;
      margin-block-start: 8px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .08em;
    }
    .service-photo {
      position: relative;
      min-height: 286px;
      background: var(--service-image) center / cover no-repeat;
      overflow: clip;
    }
    .service-photo::after,
    .cta-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, var(--veil-dark-12));
      pointer-events: none;
    }
    .service-one { --service-image: var(--image-service-residential); }
    .service-two { --service-image: var(--image-service-styling); }
    .service-three { --service-image: var(--image-service-renovation); }
    .service-four { --service-image: var(--image-about); }
    .service-five { --service-image: var(--image-service-commercial); }
    .service-six { --service-image: var(--image-work-office); }

    .reasons {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-block: 1px solid var(--color-border);
    }
    .reason {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 14px;
      padding: 30px 26px;
      border-inline-end: 1px solid var(--color-border);
      min-width: 0;
    }
    .reason:last-child { border-inline-end: 0; }
    .reason .icon { color: var(--color-gold); }

    .process-strip {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: start;
      gap: 0;
      position: relative;
    }
    .process-strip::before {
      content: "";
      position: absolute;
      inset-inline: 8%;
      inset-block-start: 36px;
      border-block-start: 1px dashed var(--color-pearl);
    }
    .process-node {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 10px;
      padding-inline: 14px;
      min-width: 0;
    }
    .process-icon {
      display: grid;
      place-items: center;
      width: 72px;
      aspect-ratio: 1;
      border: 1px solid var(--color-pearl);
      border-radius: 50%;
      background: var(--color-white);
      color: var(--color-teal-deep);
    }
    .process-icon svg { width: 32px; stroke: currentColor; stroke-width: 1.55; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .process-node small {
      color: var(--color-gold);
      font-family: var(--font-display);
      font-size: 18px;
      line-height: 1;
    }
    .process-node h3 { font-size: 16px; }

    .cta-band {
      position: relative;
      min-height: clamp(320px, 36vw, 460px);
      display: grid;
      place-items: center;
      overflow: clip;
      text-align: center;
      color: var(--color-white);
      background:
        linear-gradient(90deg, var(--veil-dark-74), var(--veil-dark-46)),
        var(--image-cta) center / cover no-repeat;
    }
    .cta-band .container {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 18px;
    }
    .cta-band h2 {
      margin: 0;
      max-width: 760px;
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: .05em;
      text-wrap: balance;
    }
    .cta-band p {
      margin: 0;
      color: color-mix(in srgb, var(--color-white), transparent 18%);
      letter-spacing: .06em;
    }

    .footer {
      background: var(--color-ink);
      color: color-mix(in srgb, var(--color-white), transparent 18%);
      padding-block: 56px 28px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr .7fr .7fr 1fr;
      gap: clamp(28px, 5vw, 64px);
    }
    .footer-logo { width: 190px; margin-block-end: 20px; }
    .footer h3 {
      margin: 0 0 18px;
      color: var(--color-white);
      font-size: 15px;
      letter-spacing: .14em;
    }
    .footer p {
      margin: 0;
      max-width: 340px;
      color: color-mix(in srgb, var(--color-white), transparent 36%);
      font-size: 14px;
      line-height: 1.9;
    }
    .footer-links,
    .footer-contact {
      display: grid;
      gap: 10px;
      color: color-mix(in srgb, var(--color-white), transparent 34%);
      font-size: 14px;
    }
    .line-box {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      margin-block-start: 20px;
      padding: 14px;
      border: 1px solid var(--line-light);
      border-radius: 8px;
    }
    .qr {
      width: 54px;
      aspect-ratio: 1;
      border-radius: 4px;
      background:
        linear-gradient(90deg, var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 20px, transparent 20px),
        linear-gradient(var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 20px, transparent 20px),
        var(--color-teal);
      background-size: 24px 24px;
    }
    .copyright {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin: 42px auto 0;
      padding-block-start: 24px;
      border-block-start: 1px solid var(--line-light);
      display: flex;
      justify-content: space-between;
      gap: 18px;
      color: color-mix(in srgb, var(--color-white), transparent 54%);
      font-size: 12px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: none; }

    @media (max-width: 1180px) {
      .nav { gap: 22px; }
      .service-card { grid-template-columns: 1fr; }
      .service-card:nth-child(even) .service-copy,
      .service-card:nth-child(even) .service-photo { order: initial; }
      .service-photo { min-height: 240px; }
      .process-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 0; }
      .process-strip::before { display: none; }
    }

    @media (max-width: 980px) {
      .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
      .brand img { display: none; }
      .mobile-logo { display: inline-flex; }
      .nav,
      .header-actions .btn { display: none; }
      .menu-button { display: grid; }
      .service-intro,
      .service-board,
      .reasons,
      .footer-grid { grid-template-columns: 1fr; }
      .service-card,
      .service-card:nth-child(odd) {
        border-inline-end: 0;
        border-block-end: 1px solid var(--color-border);
      }
      .service-card:last-child { border-block-end: 0; }
      .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .feature-item:nth-child(odd) { border-inline-start: 0; }
      .feature-item:nth-child(n + 3) { border-block-start: 1px solid var(--color-border); }
      .reason { border-inline-end: 0; border-block-start: 1px solid var(--color-border); }
      .reason:first-child { border-block-start: 0; }
    }

    @media (max-width: 620px) {
      :root { --page-pad: 20px; }
      .section { padding-block: 56px; }
      .service-hero { min-height: 560px; }
      .service-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 42%, var(--veil-dark-82) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .hero-inner { padding-block: 112px 62px; }
      .service-hero h1 { font-size: clamp(36px, 11vw, 48px); }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .service-intro { gap: 32px; padding-block: 58px; }
      .feature-row,
      .process-strip { grid-template-columns: 1fr; }
      .feature-item { border-inline-start: 0; border-block-start: 1px solid var(--color-border); }
      .feature-item:first-child { border-block-start: 0; }
      .service-copy { padding: 26px 24px; }
      .service-photo { min-height: 224px; }
      .process-strip { gap: 22px; }
      .process-node {
        grid-template-columns: 72px minmax(0, 1fr);
        justify-items: start;
        text-align: start;
        column-gap: 16px;
      }
      .process-icon { grid-row: span 3; }
      .process-node h3 { font-size: 16px; }
      .copyright { display: grid; }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

    .service-hero {
      min-height: clamp(540px, 62vh, 680px);
      display: grid;
      align-items: center;
      padding-block: 0;
    }
    .service-hero::before {
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-74) 35%, var(--veil-dark-38) 68%, var(--veil-dark-16) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-46)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .service-hero::after {
      inset: 0;
      height: auto;
      background: radial-gradient(ellipse at 78% 36%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 20rem);
    }
    .service-hero .hero-inner { padding-block: clamp(120px, 13vh, 154px) clamp(96px, 10vh, 118px); }
    .service-hero .hero-copy { gap: 18px; max-width: 620px; }
    .service-hero .hero-kicker { color: color-mix(in srgb, var(--color-white), transparent 14%); }
    .service-hero h1 {
      font-size: clamp(38px, 4.6vw, 62px);
      line-height: 1.16;
      letter-spacing: .05em;
    }
    .service-hero p {
      max-width: 500px;
      font-size: clamp(15px, 1.35vw, 17px);
      line-height: 1.95;
    }
    @media (max-width: 980px) {
      .service-hero { min-height: 560px; }
      .service-hero .hero-inner { padding-block: 116px 86px; }
    }

    @media (max-width: 620px) {
      .service-hero { min-height: 500px; }
      .service-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 46%, var(--veil-dark-88) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .service-hero h1 { font-size: clamp(34px, 10vw, 46px); }    }

/* Source: portfolio.html */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
    :root {
      --color-ink: #101010;
      --color-ink-2: #1A1A1A;
      --color-charcoal: #22201D;
      --color-body: #44403A;
      --color-muted: #8A8378;
      --color-taupe: #A39B8E;
      --color-white: #FFFFFF;
      --color-ivory: #F6F3EE;
      --color-soft: #FBFAF7;
      --color-border: #E5DFD4;
      --color-teal: #32C7BC;
      --color-teal-deep: #15998F;
      --color-teal-ink: #087981;
      --color-teal-soft: #E7FAF7;
      --color-gold: #B8985A;
      --color-pearl: #C9B896;
      --shadow-soft: rgb(16 16 16 / 0.08);
      --shadow-card: rgb(16 16 16 / 0.12);
      --veil-dark-10: rgb(16 16 16 / 0.10);
      --veil-dark-18: rgb(16 16 16 / 0.18);
      --veil-dark-22: rgb(16 16 16 / 0.22);
      --veil-dark-38: rgb(16 16 16 / 0.38);
      --veil-dark-58: rgb(16 16 16 / 0.58);
      --veil-dark-74: rgb(16 16 16 / 0.74);
      --veil-dark-88: rgb(16 16 16 / 0.88);
      --line-light: rgb(255 255 255 / 0.16);
      --font-display: "Iowan Old Style", "Noto Serif TC", "Songti TC", Georgia, serif;
      --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif;
      --radius-card: 10px;
      --radius-pill: 999px;
      --content: 1180px;
      --wide: 1360px;
      --page-pad: clamp(20px, 5vw, 56px);
      --ease: cubic-bezier(.19, 1, .22, 1);
    }

    * { box-sizing: border-box; }
    html,
    body { margin: 0; min-height: 100%; overflow-x: clip; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--color-white);
      color: var(--color-body);
      font-family: var(--font-body);
      line-height: 1.72;
      text-rendering: geometricPrecision;
    }
    button,
    a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img,
    svg { display: block; max-width: 100%; }

    .page { min-height: 100dvh; background: var(--color-white); }
    .container {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin-inline: auto;
    }
    .container-wide {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
    }
    .section { padding-block: clamp(64px, 8vw, 118px); }
    .section-soft { background: linear-gradient(180deg, var(--color-white), var(--color-soft)); }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .section-title {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .section-copy {
      margin: 18px 0 0;
      max-width: 640px;
      color: var(--color-muted);
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 2.05;
      letter-spacing: .045em;
    }
    .section-heading {
      display: grid;
      justify-items: center;
      text-align: center;
      margin-block-end: clamp(30px, 5vw, 58px);
    }
    .title-rule {
      width: 42px;
      height: 2px;
      margin-block-start: 15px;
      background: var(--color-teal);
    }

    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 40;
      padding: 18px var(--page-pad);
      transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
    }
    .site-header.is-scrolled {
      padding-block: 12px;
      background: color-mix(in srgb, var(--color-ink), transparent 6%);
      border-block-end: 1px solid var(--line-light);
      backdrop-filter: blur(18px);
    }
    .header-inner {
      width: min(100%, var(--wide));
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand img { width: clamp(142px, 18vw, 206px); height: auto; }
    .mobile-logo {
      display: none;
      align-items: center;
      gap: 10px;
      color: var(--color-white);
    }
    .mobile-logo b {
      display: grid;
      place-items: center;
      width: 34px;
      aspect-ratio: 1;
      background: var(--color-teal);
      color: var(--color-white);
      border-radius: 2px;
      letter-spacing: -.05em;
    }
    .mobile-logo span {
      font-family: var(--font-display);
      font-size: 16px;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(22px, 3vw, 42px);
      color: color-mix(in srgb, var(--color-white), transparent 12%);
      font-size: 14px;
      letter-spacing: .12em;
    }
    .nav a { position: relative; white-space: nowrap; }
    .nav a::after {
      content: "";
      position: absolute;
      inset-inline: 44%;
      inset-block-end: -10px;
      height: 2px;
      background: var(--color-teal);
      opacity: 0;
      transition: inset .3s var(--ease), opacity .3s var(--ease);
    }
    .nav a:hover::after,
    .nav a[aria-current="page"]::after { inset-inline: 0; opacity: 1; }
    .header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-light);
      border-radius: 50%;
      background: var(--veil-dark-22);
      color: var(--color-white);
      cursor: pointer;
      place-items: center;
    }
    .menu-button svg { width: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 22px;
      border-radius: var(--radius-pill);
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .12em;
      white-space: nowrap;
      transition: transform .32s var(--ease), background .32s var(--ease), border-color .32s var(--ease), color .32s var(--ease);
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-teal { background: var(--color-teal); color: var(--color-ink); }
    .btn-outline { border-color: color-mix(in srgb, var(--color-white), transparent 50%); color: var(--color-white); }
    .btn-dark { background: var(--color-ink-2); color: var(--color-white); }
    .btn-link {
      min-height: auto;
      padding: 0;
      border-radius: 0;
      color: var(--color-teal-deep);
      letter-spacing: .12em;
    }

    .mobile-nav {
      position: fixed;
      z-index: 35;
      inset: 74px var(--page-pad) auto;
      display: none;
      padding: 10px;
      border: 1px solid var(--line-light);
      background: color-mix(in srgb, var(--color-ink), transparent 4%);
      color: var(--color-white);
      backdrop-filter: blur(18px);
      box-shadow: 0 24px 70px var(--veil-dark-38);
    }
    .mobile-nav.is-open { display: block; }
    .mobile-nav a {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 15px 12px;
      border-block-end: 1px solid var(--line-light);
      letter-spacing: .12em;
    }
    .mobile-nav a:last-child { border-block-end: 0; }
    .mobile-nav small { color: var(--color-teal); letter-spacing: .14em; }

    .portfolio-hero {
      position: relative;
      min-height: clamp(520px, 72vh, 760px);
      display: grid;
      align-items: end;
      isolation: isolate;
      overflow: hidden;
      background: var(--color-ink);
    }
    .portfolio-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-58) 36%, var(--veil-dark-18) 68%),
        linear-gradient(180deg, var(--veil-dark-18), var(--veil-dark-58)),
        url("/wp-content/uploads/ejdesign-source/ejdesign/C1755246759961.jpg") center / cover no-repeat;
      transform: scale(1.02);
    }
    .portfolio-hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 34%;
      z-index: -1;
      background: linear-gradient(180deg, transparent, var(--color-white));
      opacity: .88;
    }
    .hero-inner {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
      padding-block: 150px clamp(70px, 10vw, 118px);
    }
    .hero-copy {
      width: min(620px, 100%);
      color: var(--color-white);
    }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-block-end: 18px;
      color: var(--color-teal);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .hero-kicker::before {
      content: "";
      width: 42px;
      height: 2px;
      background: var(--color-teal);
    }
    .portfolio-hero h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(44px, 7vw, 84px);
      font-weight: 500;
      line-height: 1.08;
      letter-spacing: .05em;
      text-wrap: balance;
    }
    .portfolio-hero p {
      margin: 24px 0 0;
      max-width: 560px;
      color: color-mix(in srgb, var(--color-white), transparent 14%);
      font-size: clamp(16px, 1.6vw, 18px);
      line-height: 2;
      letter-spacing: .06em;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-block-start: 30px; }

    .portfolio-intro {
      display: grid;
      grid-template-columns: minmax(0, .72fr) minmax(280px, .28fr);
      gap: clamp(26px, 5vw, 72px);
      align-items: end;
    }
    .intro-note {
      padding-block-start: 28px;
      border-block-start: 1px solid var(--color-border);
      color: var(--color-muted);
      font-size: 15px;
      line-height: 2;
      letter-spacing: .05em;
    }

    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-block-end: clamp(30px, 5vw, 54px);
    }
    .filter-button {
      min-height: 40px;
      padding: 0 18px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-white);
      color: var(--color-muted);
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .1em;
      transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
    }
    .filter-button.is-active {
      border-color: var(--color-teal);
      background: var(--color-teal-soft);
      color: var(--color-teal-ink);
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 2.4vw, 32px);
      align-items: start;
    }
    .project-card {
      display: grid;
      gap: 14px;
      min-width: 0;
    }
    .project-card:nth-child(3n + 2) { margin-block-start: 46px; }
    .project-link {
      display: grid;
      gap: 14px;
      min-width: 0;
    }
    .project-media {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border-radius: var(--radius-card);
      background: var(--color-ivory);
      box-shadow: 0 18px 48px var(--shadow-soft);
    }
    .project-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .8s var(--ease), filter .8s var(--ease);
    }
    .project-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58));
      opacity: .78;
      transition: opacity .45s var(--ease);
    }
    .project-card:hover img { transform: scale(1.055); filter: saturate(1.05); }
    .project-card:hover .project-media::after { opacity: .92; }
    .project-meta {
      position: absolute;
      inset: auto 18px 18px;
      z-index: 1;
      color: var(--color-white);
    }
    .project-meta small {
      display: inline-flex;
      margin-block-end: 8px;
      color: var(--color-teal);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .project-meta h3 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 500;
      line-height: 1.28;
      letter-spacing: .04em;
      overflow-wrap: anywhere;
    }
    .project-caption {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding-inline: 2px;
      color: var(--color-muted);
      font-size: 13px;
      letter-spacing: .1em;
    }
    .project-caption span:last-child { color: var(--color-teal-deep); font-weight: 800; }
    .empty-state {
      display: none;
      padding: 34px;
      border: 1px solid var(--color-border);
      background: var(--color-soft);
      color: var(--color-muted);
      text-align: center;
      letter-spacing: .08em;
    }
    .empty-state.is-visible { display: block; }

    .curation {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(280px, .55fr);
      gap: clamp(28px, 5vw, 74px);
      align-items: center;
    }
    .curation-photo {
      min-height: clamp(360px, 46vw, 560px);
      border-radius: var(--radius-card);
      background:
        linear-gradient(180deg, transparent, var(--veil-dark-38)),
        url("/wp-content/uploads/ejdesign-source/ejdesign/C1679730832461.jpg") center / cover no-repeat;
      box-shadow: 0 24px 70px var(--shadow-soft);
    }
    .curation-list {
      display: grid;
      gap: 18px;
      margin-block-start: 28px;
    }
    .curation-item {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 16px;
      padding-block: 18px;
      border-block-end: 1px solid var(--color-border);
    }
    .curation-item b {
      color: var(--color-teal-deep);
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 500;
    }
    .curation-item h3 {
      margin: 0 0 4px;
      color: var(--color-ink-2);
      font-size: 17px;
      letter-spacing: .08em;
    }
    .curation-item p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.9;
      letter-spacing: .04em;
    }

    .cta-band {
      position: relative;
      overflow: hidden;
      padding-block: clamp(74px, 9vw, 124px);
      background:
        linear-gradient(90deg, var(--veil-dark-88), var(--veil-dark-58)),
        url("/wp-content/uploads/ejdesign-source/ej-cta-material-gpt-image-2.jpg") center / cover no-repeat;
      color: var(--color-white);
      text-align: center;
    }
    .cta-band h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: .06em;
      text-wrap: balance;
    }
    .cta-band p {
      margin: 18px auto 30px;
      max-width: 640px;
      color: color-mix(in srgb, var(--color-white), transparent 18%);
      letter-spacing: .06em;
    }

    .footer {
      padding: 64px var(--page-pad) 28px;
      background: var(--color-ink);
      color: color-mix(in srgb, var(--color-white), transparent 24%);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr .8fr .8fr 1fr;
      gap: clamp(28px, 4vw, 58px);
    }
    .footer-logo { width: 190px; margin-block-end: 20px; }
    .footer h3 {
      margin: 0 0 18px;
      color: var(--color-white);
      font-size: 14px;
      letter-spacing: .16em;
    }
    .footer p {
      margin: 0;
      max-width: 340px;
      font-size: 14px;
      line-height: 1.9;
    }
    .footer-links,
    .footer-contact {
      display: grid;
      gap: 8px;
      font-size: 14px;
      letter-spacing: .08em;
    }
    .footer a:hover { color: var(--color-teal); }
    .line-box {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      margin-block-start: 18px;
      padding: 14px;
      border: 1px solid var(--line-light);
      color: var(--color-white);
    }
    .qr {
      width: 54px;
      aspect-ratio: 1;
      background:
        linear-gradient(90deg, var(--color-white) 50%, transparent 0) 0 0 / 12px 12px,
        linear-gradient(var(--color-white) 50%, transparent 0) 0 0 / 12px 12px,
        var(--color-teal);
      opacity: .95;
    }
    .copyright {
      width: min(100%, var(--wide));
      margin: 48px auto 0;
      padding-block-start: 22px;
      border-block-start: 1px solid var(--line-light);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: color-mix(in srgb, var(--color-white), transparent 48%);
      font-size: 12px;
      letter-spacing: .08em;
    }

    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
    .reveal.is-visible { opacity: 1; transform: none; }

    @media (max-width: 1120px) {
      .nav { gap: 22px; }
      .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
      .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .project-card:nth-child(3n + 2) { margin-block-start: 0; }
      .project-card:nth-child(even) { margin-block-start: 40px; }
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 820px) {
      .brand img,
      .nav,
      .header-actions .btn { display: none; }
      .mobile-logo,
      .menu-button { display: inline-grid; }
      .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
      .portfolio-intro,
      .curation { grid-template-columns: 1fr; }
      .portfolio-hero { min-height: 560px; }
      .hero-inner { padding-block: 112px 62px; }
      .portfolio-hero h1 { font-size: clamp(36px, 11vw, 48px); }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .footer-grid,
      .copyright { grid-template-columns: 1fr; }
      .copyright { display: grid; }
    }

    @media (max-width: 620px) {
      .portfolio-grid { grid-template-columns: 1fr; }
      .project-card:nth-child(even) { margin-block-start: 0; }
      .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 6px; }
      .filter-button { flex: 0 0 auto; }
      .project-media { aspect-ratio: 1 / 1.18; }
      .curation-photo { min-height: 320px; }
      .btn { width: 100%; }
      .footer-grid { gap: 30px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

    .portfolio-hero {
      min-height: clamp(540px, 62vh, 680px);
      display: grid;
      align-items: center;
      padding-block: 0;
    }
    .portfolio-hero::before {
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-74) 35%, var(--veil-dark-38) 68%, var(--veil-dark-16) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-46)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .portfolio-hero::after {
      inset: 0;
      height: auto;
      background: radial-gradient(ellipse at 78% 36%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 20rem);
    }
    .portfolio-hero .hero-inner { padding-block: clamp(120px, 13vh, 154px) clamp(96px, 10vh, 118px); }
    .portfolio-hero .hero-copy { gap: 18px; max-width: 620px; }
    .portfolio-hero .hero-kicker { color: color-mix(in srgb, var(--color-white), transparent 14%); }
    .portfolio-hero h1 {
      font-size: clamp(38px, 4.6vw, 62px);
      line-height: 1.16;
      letter-spacing: .05em;
    }
    .portfolio-hero p {
      max-width: 500px;
      font-size: clamp(15px, 1.35vw, 17px);
      line-height: 1.95;
    }
    @media (max-width: 980px) {
      .portfolio-hero { min-height: 560px; }
      .portfolio-hero .hero-inner { padding-block: 116px 86px; }
    }

    @media (max-width: 620px) {
      .portfolio-hero { min-height: 500px; }
      .portfolio-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 46%, var(--veil-dark-88) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .portfolio-hero h1 { font-size: clamp(34px, 10vw, 46px); }    }

/* Source: blog.html */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
    :root {
      --color-ink: #101010;
      --color-ink-2: #1A1A1A;
      --color-charcoal: #22201D;
      --color-body: #44403A;
      --color-muted: #8A8378;
      --color-taupe: #A39B8E;
      --color-white: #FFFFFF;
      --color-ivory: #F6F3EE;
      --color-soft: #FBFAF7;
      --color-border: #E5DFD4;
      --color-teal: #32C7BC;
      --color-teal-deep: #15998F;
      --color-teal-ink: #087981;
      --color-teal-soft: #E7FAF7;
      --color-gold: #B8985A;
      --color-pearl: #C9B896;
      --shadow-soft: rgb(16 16 16 / 0.08);
      --shadow-card: rgb(16 16 16 / 0.12);
      --veil-dark-10: rgb(16 16 16 / 0.10);
      --veil-dark-12: rgb(16 16 16 / 0.12);
      --veil-dark-18: rgb(16 16 16 / 0.18);
      --veil-dark-22: rgb(16 16 16 / 0.22);
      --veil-dark-38: rgb(16 16 16 / 0.38);
      --veil-dark-46: rgb(16 16 16 / 0.46);
      --veil-dark-58: rgb(16 16 16 / 0.58);
      --veil-dark-74: rgb(16 16 16 / 0.74);
      --veil-dark-82: rgb(16 16 16 / 0.82);
      --veil-dark-88: rgb(16 16 16 / 0.88);
      --line-light: rgb(255 255 255 / 0.16);
      --image-hero: url("/wp-content/uploads/ejdesign-source/ej-hero-gpt-image-2.jpg");
      --image-about: url("/wp-content/uploads/ejdesign-source/ej-about-gpt-image-2.jpg");
      --image-service-residential: url("/wp-content/uploads/ejdesign-source/ej-service-residential-gpt-image-2.jpg");
      --image-service-commercial: url("/wp-content/uploads/ejdesign-source/ej-service-commercial-gpt-image-2.jpg");
      --image-service-renovation: url("/wp-content/uploads/ejdesign-source/ej-service-renovation-gpt-image-2.jpg");
      --image-service-styling: url("/wp-content/uploads/ejdesign-source/ej-service-styling-gpt-image-2.jpg");
      --image-work-office: url("/wp-content/uploads/ejdesign-source/ej-work-office-gpt-image-2.jpg");
      --image-commercial: url("/wp-content/uploads/ejdesign-source/ej-commercial-gpt-image-2.jpg");
      --image-cta: url("/wp-content/uploads/ejdesign-source/ej-cta-material-gpt-image-2.jpg");
      --font-display: "Iowan Old Style", "Noto Serif TC", "Songti TC", Georgia, serif;
      --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif;
      --radius-card: 10px;
      --radius-pill: 999px;
      --content: 1180px;
      --wide: 1360px;
      --page-pad: clamp(20px, 5vw, 56px);
      --ease: cubic-bezier(.19, 1, .22, 1);
    }

    * { box-sizing: border-box; }
    html,
    body { margin: 0; min-height: 100%; overflow-x: clip; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--color-white);
      color: var(--color-body);
      font-family: var(--font-body);
      line-height: 1.72;
      text-rendering: geometricPrecision;
    }
    button,
    a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img,
    svg { display: block; max-width: 100%; }

    .page { min-height: 100dvh; background: var(--color-white); }
    .container {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin-inline: auto;
    }
    .container-wide {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
    }
    .section { padding-block: clamp(64px, 8vw, 118px); }
    .section-soft { background: linear-gradient(180deg, var(--color-white), var(--color-soft)); }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .section-title {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .section-copy {
      margin: 18px 0 0;
      max-width: 640px;
      color: var(--color-muted);
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 2.05;
      letter-spacing: .045em;
    }
    .section-heading {
      display: grid;
      justify-items: center;
      text-align: center;
      margin-block-end: clamp(30px, 5vw, 58px);
    }
    .title-rule {
      width: 42px;
      height: 2px;
      margin-block-start: 15px;
      background: var(--color-teal);
    }

    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 40;
      padding: 18px var(--page-pad);
      transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
    }
    .site-header.is-scrolled {
      padding-block: 12px;
      background: color-mix(in srgb, var(--color-ink), transparent 6%);
      border-block-end: 1px solid var(--line-light);
      backdrop-filter: blur(18px);
    }
    .header-inner {
      width: min(100%, var(--wide));
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand img { width: clamp(142px, 18vw, 206px); height: auto; }
    .mobile-logo {
      display: none;
      align-items: center;
      gap: 10px;
      color: var(--color-white);
    }
    .mobile-logo b {
      display: grid;
      place-items: center;
      width: 34px;
      aspect-ratio: 1;
      background: var(--color-teal);
      color: var(--color-white);
      border-radius: 2px;
      letter-spacing: -.05em;
    }
    .mobile-logo span {
      font-family: var(--font-display);
      font-size: 16px;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(22px, 3vw, 42px);
      color: color-mix(in srgb, var(--color-white), transparent 12%);
      font-size: 14px;
      letter-spacing: .12em;
    }
    .nav a { position: relative; white-space: nowrap; }
    .nav a::after {
      content: "";
      position: absolute;
      inset-inline: 44%;
      inset-block-end: -10px;
      height: 2px;
      background: var(--color-teal);
      opacity: 0;
      transition: inset .3s var(--ease), opacity .3s var(--ease);
    }
    .nav a:hover::after,
    .nav a[aria-current="page"]::after { inset-inline: 0; opacity: 1; }
    .header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-light);
      border-radius: 50%;
      background: var(--veil-dark-22);
      color: var(--color-white);
      cursor: pointer;
      place-items: center;
    }
    .menu-button svg { width: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 12px 22px;
      border: 1px solid transparent;
      border-radius: 4px;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-teal {
      background: var(--color-teal);
      color: var(--color-white);
      box-shadow: 0 16px 32px color-mix(in srgb, var(--color-teal), transparent 72%);
    }
    .btn-outline {
      color: var(--color-white);
      border-color: color-mix(in srgb, var(--color-white), transparent 42%);
      background: var(--veil-dark-10);
    }
    .btn-link {
      min-height: auto;
      padding: 0;
      border-radius: 0;
      color: var(--color-teal-deep);
      border-block-end: 1px solid var(--color-teal);
    }
    .mobile-nav {
      position: fixed;
      inset: 74px var(--page-pad) auto;
      z-index: 50;
      display: none;
      padding: 14px;
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      box-shadow: 0 24px 60px var(--shadow-card);
    }
    .mobile-nav.is-open { display: block; }
    .mobile-nav a {
      display: flex;
      justify-content: space-between;
      padding: 13px 4px;
      border-block-end: 1px solid var(--color-border);
      color: var(--color-ink-2);
      white-space: nowrap;
    }
    .mobile-nav a:last-child { border-block-end: 0; }
    .mobile-nav small { color: var(--color-teal-deep); letter-spacing: .14em; }

    .service-hero {
      position: relative;
      min-height: clamp(520px, 48vw, 690px);
      display: grid;
      align-items: center;
      overflow: clip;
      color: var(--color-white);
      background: var(--color-ink);
    }
    .service-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-82) 26%, var(--veil-dark-46) 57%, var(--veil-dark-12) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-38)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .service-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 78% 28%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 18rem),
        linear-gradient(90deg, var(--veil-dark-18), transparent 52%);
      box-shadow: inset 0 -120px 130px var(--veil-dark-38);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
      padding-block: 120px 78px;
    }
    .hero-copy {
      display: grid;
      gap: 22px;
      max-width: 620px;
    }
    .hero-kicker {
      display: inline-grid;
      grid-template-columns: 3px auto;
      align-items: center;
      gap: 22px;
      width: fit-content;
      color: color-mix(in srgb, var(--color-white), transparent 14%);
      letter-spacing: .14em;
      font-size: 15px;
    }
    .hero-kicker::before {
      content: "";
      width: 3px;
      height: 48px;
      background: var(--color-teal);
    }
    .service-hero h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(42px, 5.2vw, 78px);
      font-weight: 500;
      line-height: 1.14;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .service-hero p {
      margin: 0;
      max-width: 520px;
      color: color-mix(in srgb, var(--color-white), transparent 16%);
      font-size: clamp(16px, 1.45vw, 19px);
      line-height: 1.95;
      letter-spacing: .045em;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

    .service-intro {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr);
      gap: clamp(44px, 7vw, 86px);
      align-items: center;
      padding-block: clamp(70px, 8vw, 112px);
    }
    .intro-panel {
      display: grid;
      gap: 18px;
      min-width: 0;
    }
    .feature-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-block: 1px solid var(--color-border);
    }
    .feature-item {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 14px;
      padding: 26px clamp(16px, 2vw, 28px);
      border-inline-start: 1px solid var(--color-border);
      min-width: 0;
    }
    .feature-item:first-child { border-inline-start: 0; }
    .icon {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      color: var(--color-teal-deep);
    }
    .icon svg { width: 42px; stroke: currentColor; stroke-width: 1.35; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .feature-item h3,
    .service-card h3,
    .reason h3,
    .process-node h3 {
      margin: 0;
      color: var(--color-ink-2);
      font-weight: 700;
      letter-spacing: .06em;
    }
    .feature-item p,
    .service-card p,
    .reason p,
    .process-node p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.85;
    }

    .service-board {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid var(--color-border);
      background: var(--color-white);
    }
    .service-card {
      display: grid;
      grid-template-columns: minmax(180px, .54fr) minmax(0, .46fr);
      min-height: 286px;
      border-block-end: 1px solid var(--color-border);
      min-width: 0;
    }
    .service-card:nth-child(odd) { border-inline-end: 1px solid var(--color-border); }
    .service-card:nth-last-child(-n + 2) { border-block-end: 0; }
    .service-card:nth-child(even) .service-copy { order: 2; }
    .service-card:nth-child(even) .service-photo { order: 1; }
    .service-copy {
      display: grid;
      align-content: center;
      gap: 16px;
      padding: clamp(24px, 3.2vw, 42px);
      min-width: 0;
    }
    .service-index {
      width: fit-content;
      color: var(--color-gold);
      font-family: var(--font-display);
      font-size: clamp(22px, 2.5vw, 32px);
      line-height: 1;
      letter-spacing: .02em;
      border-block-end: 1px solid var(--color-pearl);
      padding-block-end: 10px;
    }
    .service-card h3 {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.8vw, 34px);
      font-weight: 500;
      letter-spacing: .06em;
    }
    .service-card .btn-link {
      justify-self: start;
      margin-block-start: 8px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .08em;
    }
    .service-photo {
      position: relative;
      min-height: 286px;
      background: var(--service-image) center / cover no-repeat;
      overflow: clip;
    }
    .service-photo::after,
    .cta-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, var(--veil-dark-12));
      pointer-events: none;
    }
    .service-one { --service-image: var(--image-service-residential); }
    .service-two { --service-image: var(--image-service-styling); }
    .service-three { --service-image: var(--image-service-renovation); }
    .service-four { --service-image: var(--image-about); }
    .service-five { --service-image: var(--image-service-commercial); }
    .service-six { --service-image: var(--image-work-office); }

    .reasons {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-block: 1px solid var(--color-border);
    }
    .reason {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 14px;
      padding: 30px 26px;
      border-inline-end: 1px solid var(--color-border);
      min-width: 0;
    }
    .reason:last-child { border-inline-end: 0; }
    .reason .icon { color: var(--color-gold); }

    .process-strip {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: start;
      gap: 0;
      position: relative;
    }
    .process-strip::before {
      content: "";
      position: absolute;
      inset-inline: 8%;
      inset-block-start: 36px;
      border-block-start: 1px dashed var(--color-pearl);
    }
    .process-node {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 10px;
      padding-inline: 14px;
      min-width: 0;
    }
    .process-icon {
      display: grid;
      place-items: center;
      width: 72px;
      aspect-ratio: 1;
      border: 1px solid var(--color-pearl);
      border-radius: 50%;
      background: var(--color-white);
      color: var(--color-teal-deep);
    }
    .process-icon svg { width: 32px; stroke: currentColor; stroke-width: 1.55; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .process-node small {
      color: var(--color-gold);
      font-family: var(--font-display);
      font-size: 18px;
      line-height: 1;
    }
    .process-node h3 { font-size: 16px; }

    .blog-hero {
      position: relative;
      padding-block: clamp(126px, 13vw, 166px) clamp(44px, 6vw, 72px);
      overflow: clip;
      color: var(--color-white);
      background:
        linear-gradient(90deg, var(--veil-dark-88), var(--veil-dark-58) 48%, var(--veil-dark-22)),
        var(--image-about) center / cover no-repeat;
    }
    .blog-hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 160px;
      background: linear-gradient(180deg, transparent, var(--color-white));
      pointer-events: none;
    }
    .blog-hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 780px);
      gap: 18px;
      align-items: end;
    }
    .blog-hero-copy {
      display: grid;
      gap: 20px;
      max-width: 720px;
    }
    .blog-hero h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(42px, 5vw, 68px);
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: .04em;
      text-wrap: balance;
    }
    .blog-hero p {
      margin: 0;
      max-width: 560px;
      color: color-mix(in srgb, var(--color-white), transparent 16%);
      font-size: clamp(16px, 1.5vw, 19px);
      line-height: 1.95;
      letter-spacing: .045em;
    }
    .blog-toolbar {
      position: sticky;
      inset-block-start: 74px;
      z-index: 8;
      margin-block-start: -1px;
      background: color-mix(in srgb, var(--color-white), transparent 5%);
      border-block: 1px solid var(--color-border);
      backdrop-filter: blur(18px);
    }
    .blog-toolbar-inner {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-block: 16px;
    }
    .blog-toolbar p {
      margin: 0;
      color: var(--color-muted);
      font-size: 13px;
      letter-spacing: .08em;
      white-space: nowrap;
    }
    .filter-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }
    .filter-button {
      min-height: 38px;
      padding: 8px 14px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-white);
      color: var(--color-body);
      font-size: 13px;
      letter-spacing: .08em;
      cursor: pointer;
      transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
    }
    .filter-button[aria-pressed="true"],
    .filter-button:hover {
      color: var(--color-white);
      border-color: var(--color-teal-deep);
      background: var(--color-teal-deep);
    }

    .blog-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
      gap: clamp(34px, 6vw, 72px);
      align-items: start;
    }
    .post-grid {
      display: grid;
      gap: 28px;
    }
    .post-card {
      display: grid;
      grid-template-columns: minmax(220px, .46fr) minmax(0, .54fr);
      min-height: 300px;
      background: var(--color-white);
      border: 1px solid var(--color-border);
      overflow: clip;
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
    }
    .post-card:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--color-teal), var(--color-border) 44%);
      box-shadow: 0 24px 58px var(--shadow-soft);
    }
    .post-card.is-hidden { display: none; }
    .post-media {
      position: relative;
      min-height: 300px;
      background: var(--post-image) center / cover no-repeat;
    }
    .post-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 48%, var(--veil-dark-22));
    }
    .post-body {
      display: grid;
      align-content: center;
      gap: 16px;
      padding: clamp(26px, 4vw, 44px);
      min-width: 0;
    }
    .post-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .post-meta span + span::before {
      content: "/";
      margin-inline-end: 8px;
      color: var(--color-pearl);
    }
    .post-card h2 {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: .045em;
      text-wrap: balance;
    }
    .post-card p {
      margin: 0;
      color: var(--color-muted);
      font-size: 15px;
      line-height: 1.95;
      letter-spacing: .04em;
    }
    .post-one { --post-image: var(--image-service-residential); }
    .post-two { --post-image: var(--image-service-styling); }
    .post-three { --post-image: var(--image-service-renovation); }
    .post-four { --post-image: var(--image-service-commercial); }
    .post-five { --post-image: var(--image-about); }
    .post-six { --post-image: var(--image-work-office); }

    .blog-sidebar {
      position: sticky;
      inset-block-start: 150px;
      display: grid;
      gap: 18px;
    }
    .sidebar-card {
      padding: 24px;
      border: 1px solid var(--color-border);
      background: var(--color-soft);
    }
    .sidebar-card h2,
    .sidebar-card h3 {
      margin: 0 0 14px;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 500;
      letter-spacing: .05em;
    }
    .sidebar-card p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.9;
      letter-spacing: .04em;
    }
    .topic-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .topic-list a {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding-block: 10px;
      border-block-end: 1px solid var(--color-border);
      color: var(--color-body);
      font-size: 14px;
      letter-spacing: .06em;
    }
    .topic-list small { color: var(--color-teal-deep); }

    .cta-band {
      position: relative;
      min-height: clamp(320px, 36vw, 460px);
      display: grid;
      place-items: center;
      overflow: clip;
      text-align: center;
      color: var(--color-white);
      background:
        linear-gradient(90deg, var(--veil-dark-74), var(--veil-dark-46)),
        var(--image-cta) center / cover no-repeat;
    }
    .cta-band .container {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 18px;
    }
    .cta-band h2 {
      margin: 0;
      max-width: 760px;
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: .05em;
      text-wrap: balance;
    }
    .cta-band p {
      margin: 0;
      color: color-mix(in srgb, var(--color-white), transparent 18%);
      letter-spacing: .06em;
    }

    .footer {
      background: var(--color-ink);
      color: color-mix(in srgb, var(--color-white), transparent 18%);
      padding-block: 56px 28px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr .7fr .7fr 1fr;
      gap: clamp(28px, 5vw, 64px);
    }
    .footer-logo { width: 190px; margin-block-end: 20px; }
    .footer h3 {
      margin: 0 0 18px;
      color: var(--color-white);
      font-size: 15px;
      letter-spacing: .14em;
    }
    .footer p {
      margin: 0;
      max-width: 340px;
      color: color-mix(in srgb, var(--color-white), transparent 36%);
      font-size: 14px;
      line-height: 1.9;
    }
    .footer-links,
    .footer-contact {
      display: grid;
      gap: 10px;
      color: color-mix(in srgb, var(--color-white), transparent 34%);
      font-size: 14px;
    }
    .line-box {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      margin-block-start: 20px;
      padding: 14px;
      border: 1px solid var(--line-light);
      border-radius: 8px;
    }
    .qr {
      width: 54px;
      aspect-ratio: 1;
      border-radius: 4px;
      background:
        linear-gradient(90deg, var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 20px, transparent 20px),
        linear-gradient(var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 20px, transparent 20px),
        var(--color-teal);
      background-size: 24px 24px;
    }
    .copyright {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin: 42px auto 0;
      padding-block-start: 24px;
      border-block-start: 1px solid var(--line-light);
      display: flex;
      justify-content: space-between;
      gap: 18px;
      color: color-mix(in srgb, var(--color-white), transparent 54%);
      font-size: 12px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: none; }

    @media (max-width: 1180px) {
      .nav { gap: 22px; }
      .service-card { grid-template-columns: 1fr; }
      .service-card:nth-child(even) .service-copy,
      .service-card:nth-child(even) .service-photo { order: initial; }
      .service-photo { min-height: 240px; }
      .process-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 0; }
      .process-strip::before { display: none; }
    }

    @media (max-width: 980px) {
      .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
      .brand img { display: none; }
      .mobile-logo { display: inline-flex; }
      .nav,
      .header-actions .btn { display: none; }
      .menu-button { display: grid; }
      .service-intro,
      .service-board,
      .reasons,
      .footer-grid { grid-template-columns: 1fr; }
      .service-card,
      .service-card:nth-child(odd) {
        border-inline-end: 0;
        border-block-end: 1px solid var(--color-border);
      }
      .service-card:last-child { border-block-end: 0; }
      .blog-hero-inner,
      .blog-layout,
      .post-card {
        grid-template-columns: 1fr;
      }
      .blog-sidebar { position: static; }
      .blog-toolbar { inset-block-start: 68px; }
      .blog-toolbar-inner {
        display: grid;
        justify-items: start;
      }
      .filter-list { justify-content: flex-start; }
      .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .feature-item:nth-child(odd) { border-inline-start: 0; }
      .feature-item:nth-child(n + 3) { border-block-start: 1px solid var(--color-border); }
      .reason { border-inline-end: 0; border-block-start: 1px solid var(--color-border); }
      .reason:first-child { border-block-start: 0; }
    }

    @media (max-width: 620px) {
      :root { --page-pad: 20px; }
      .section { padding-block: 56px; }
      .blog-hero { padding-block: 118px 48px; }
      .blog-hero h1 { font-size: clamp(36px, 12vw, 48px); }
      .blog-toolbar { position: relative; inset-block-start: auto; }
      .blog-toolbar p { white-space: normal; }
      .filter-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }
      .filter-button { width: 100%; }
      .post-card { min-height: 0; }
      .post-media { min-height: 230px; }
      .post-body { padding: 24px; }
      .service-hero { min-height: 560px; }
      .service-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 42%, var(--veil-dark-82) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .hero-inner { padding-block: 112px 62px; }
      .service-hero h1 { font-size: clamp(36px, 11vw, 48px); }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .service-intro { gap: 32px; padding-block: 58px; }
      .feature-row,
      .process-strip { grid-template-columns: 1fr; }
      .feature-item { border-inline-start: 0; border-block-start: 1px solid var(--color-border); }
      .feature-item:first-child { border-block-start: 0; }
      .service-copy { padding: 26px 24px; }
      .service-photo { min-height: 224px; }
      .process-strip { gap: 22px; }
      .process-node {
        grid-template-columns: 72px minmax(0, 1fr);
        justify-items: start;
        text-align: start;
        column-gap: 16px;
      }
      .process-icon { grid-row: span 3; }
      .process-node h3 { font-size: 16px; }
      .copyright { display: grid; }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

    .blog-hero {
      min-height: clamp(540px, 62vh, 680px);
      display: grid;
      align-items: center;
      padding-block: 0;
      background: var(--color-ink);
    }
    .blog-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-74) 35%, var(--veil-dark-38) 68%, var(--veil-dark-16) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-46)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .blog-hero::after {
      inset: 0;
      height: auto;
      background: radial-gradient(ellipse at 78% 36%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 20rem);
    }
    .blog-hero-inner {
      position: relative;
      z-index: 1;
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
      padding-block: clamp(120px, 13vh, 154px) clamp(96px, 10vh, 118px);
      display: block;
    }
    .blog-hero-copy { display: grid; gap: 18px; max-width: 620px; }
    .blog-hero .hero-kicker { color: color-mix(in srgb, var(--color-white), transparent 14%); }
    .blog-hero h1 {
      font-size: clamp(38px, 4.6vw, 62px);
      line-height: 1.16;
      letter-spacing: .05em;
    }
    .blog-hero p {
      max-width: 500px;
      font-size: clamp(15px, 1.35vw, 17px);
      line-height: 1.95;
    }
    @media (max-width: 980px) {
      .blog-hero { min-height: 560px; }
      .blog-hero-inner { padding-block: 116px 86px; }
    }

    @media (max-width: 620px) {
      .blog-hero { min-height: 500px; padding-block: 0; }
      .blog-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 46%, var(--veil-dark-88) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .blog-hero h1 { font-size: clamp(34px, 10vw, 46px); }    }

/* Source: contact.html */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
    :root {
      --color-ink: #101010;
      --color-ink-2: #1A1A1A;
      --color-charcoal: #22201D;
      --color-body: #44403A;
      --color-muted: #8A8378;
      --color-taupe: #A39B8E;
      --color-white: #FFFFFF;
      --color-ivory: #F6F3EE;
      --color-soft: #FBFAF7;
      --color-border: #E5DFD4;
      --color-teal: #32C7BC;
      --color-teal-deep: #15998F;
      --color-teal-ink: #087981;
      --color-teal-soft: #E7FAF7;
      --color-gold: #B8985A;
      --color-pearl: #C9B896;
      --shadow-soft: rgb(16 16 16 / 0.08);
      --shadow-card: rgb(16 16 16 / 0.12);
      --veil-dark-10: rgb(16 16 16 / 0.10);
      --veil-dark-12: rgb(16 16 16 / 0.12);
      --veil-dark-18: rgb(16 16 16 / 0.18);
      --veil-dark-22: rgb(16 16 16 / 0.22);
      --veil-dark-38: rgb(16 16 16 / 0.38);
      --veil-dark-46: rgb(16 16 16 / 0.46);
      --veil-dark-58: rgb(16 16 16 / 0.58);
      --veil-dark-74: rgb(16 16 16 / 0.74);
      --veil-dark-82: rgb(16 16 16 / 0.82);
      --veil-dark-88: rgb(16 16 16 / 0.88);
      --line-light: rgb(255 255 255 / 0.16);
      --image-hero: url("/wp-content/uploads/ejdesign-source/ej-commercial-gpt-image-2.jpg");
      --image-about: url("/wp-content/uploads/ejdesign-source/ej-about-gpt-image-2.jpg");
      --image-cta: url("/wp-content/uploads/ejdesign-source/ej-cta-material-gpt-image-2.jpg");
      --font-display: "Iowan Old Style", "Noto Serif TC", "Songti TC", Georgia, serif;
      --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif;
      --radius-card: 10px;
      --radius-pill: 999px;
      --content: 1180px;
      --wide: 1360px;
      --page-pad: clamp(20px, 5vw, 56px);
      --ease: cubic-bezier(.19, 1, .22, 1);
    }

    * { box-sizing: border-box; }
    html,
    body { margin: 0; min-height: 100%; overflow-x: clip; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--color-white);
      color: var(--color-body);
      font-family: var(--font-body);
      line-height: 1.72;
      text-rendering: geometricPrecision;
    }
    button,
    input,
    textarea,
    select,
    a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img,
    svg { display: block; max-width: 100%; }

    .page { min-height: 100dvh; background: var(--color-white); }
    .container {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin-inline: auto;
    }
    .container-wide {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
    }
    .section { padding-block: clamp(64px, 8vw, 118px); }
    .section-soft { background: linear-gradient(180deg, var(--color-white), var(--color-soft)); }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .section-title {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .section-copy {
      margin: 18px 0 0;
      max-width: 640px;
      color: var(--color-muted);
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 2.05;
      letter-spacing: .045em;
    }
    .section-heading {
      display: grid;
      justify-items: center;
      text-align: center;
      margin-block-end: clamp(30px, 5vw, 58px);
    }
    .title-rule {
      width: 42px;
      height: 2px;
      margin-block-start: 15px;
      background: var(--color-teal);
    }

    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 40;
      padding: 18px var(--page-pad);
      transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
    }
    .site-header.is-scrolled {
      padding-block: 12px;
      background: color-mix(in srgb, var(--color-ink), transparent 6%);
      border-block-end: 1px solid var(--line-light);
      backdrop-filter: blur(18px);
    }
    .header-inner {
      width: min(100%, var(--wide));
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand img { width: clamp(142px, 18vw, 206px); height: auto; }
    .mobile-logo {
      display: none;
      align-items: center;
      gap: 10px;
      color: var(--color-white);
    }
    .mobile-logo b {
      display: grid;
      place-items: center;
      width: 34px;
      aspect-ratio: 1;
      background: var(--color-teal);
      color: var(--color-white);
      border-radius: 2px;
      letter-spacing: -.05em;
    }
    .mobile-logo span {
      font-family: var(--font-display);
      font-size: 16px;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(22px, 3vw, 42px);
      color: color-mix(in srgb, var(--color-white), transparent 12%);
      font-size: 14px;
      letter-spacing: .12em;
    }
    .nav a { position: relative; white-space: nowrap; }
    .nav a::after {
      content: "";
      position: absolute;
      inset-inline: 44%;
      inset-block-end: -10px;
      height: 2px;
      background: var(--color-teal);
      opacity: 0;
      transition: inset .3s var(--ease), opacity .3s var(--ease);
    }
    .nav a:hover::after,
    .nav a[aria-current="page"]::after { inset-inline: 0; opacity: 1; }
    .header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-light);
      border-radius: 50%;
      background: var(--veil-dark-22);
      color: var(--color-white);
      cursor: pointer;
      place-items: center;
    }
    .menu-button svg { width: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 12px 22px;
      border: 1px solid transparent;
      border-radius: 4px;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-teal {
      background: var(--color-teal);
      color: var(--color-white);
      box-shadow: 0 16px 32px color-mix(in srgb, var(--color-teal), transparent 72%);
    }
    .btn-outline {
      color: var(--color-white);
      border-color: color-mix(in srgb, var(--color-white), transparent 42%);
      background: var(--veil-dark-10);
    }
    .btn-ink {
      background: var(--color-ink-2);
      color: var(--color-white);
      box-shadow: 0 18px 38px var(--shadow-soft);
    }
    .btn-link {
      min-height: auto;
      padding: 0;
      border-radius: 0;
      color: var(--color-teal-deep);
      border-block-end: 1px solid var(--color-teal);
    }
    .mobile-nav {
      position: fixed;
      inset: 74px var(--page-pad) auto;
      z-index: 50;
      display: none;
      padding: 14px;
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      box-shadow: 0 24px 60px var(--shadow-card);
    }
    .mobile-nav.is-open { display: block; }
    .mobile-nav a {
      display: flex;
      justify-content: space-between;
      padding: 13px 4px;
      border-block-end: 1px solid var(--color-border);
      color: var(--color-ink-2);
      white-space: nowrap;
    }
    .mobile-nav a:last-child { border-block-end: 0; }
    .mobile-nav small { color: var(--color-teal-deep); letter-spacing: .14em; }

    .contact-hero {
      position: relative;
      min-height: clamp(480px, 44vw, 640px);
      display: grid;
      align-items: center;
      overflow: clip;
      color: var(--color-white);
      background: var(--color-ink);
    }
    .contact-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-82) 28%, var(--veil-dark-46) 58%, var(--veil-dark-12) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-38)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .contact-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 78% 28%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 18rem),
        linear-gradient(90deg, var(--veil-dark-18), transparent 52%);
      box-shadow: inset 0 -110px 120px var(--veil-dark-38);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
      padding-block: 116px 68px;
    }
    .hero-copy {
      display: grid;
      gap: 22px;
      max-width: 620px;
    }
    .hero-kicker {
      display: inline-grid;
      grid-template-columns: 3px auto;
      align-items: center;
      gap: 22px;
      width: fit-content;
      color: color-mix(in srgb, var(--color-white), transparent 14%);
      letter-spacing: .14em;
      font-size: 15px;
    }
    .hero-kicker::before {
      content: "";
      width: 3px;
      height: 48px;
      background: var(--color-teal);
    }
    .contact-hero h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(42px, 5vw, 72px);
      font-weight: 500;
      line-height: 1.14;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .contact-hero p {
      margin: 0;
      max-width: 540px;
      color: color-mix(in srgb, var(--color-white), transparent 16%);
      font-size: clamp(16px, 1.45vw, 19px);
      line-height: 1.95;
      letter-spacing: .045em;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

    .contact-layout {
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
      gap: clamp(34px, 6vw, 78px);
      align-items: start;
    }
    .contact-intro {
      display: grid;
      gap: 26px;
      position: sticky;
      inset-block-start: 104px;
      min-width: 0;
    }
    .contact-photo {
      min-height: clamp(280px, 38vw, 520px);
      border-radius: var(--radius-card);
      background:
        linear-gradient(180deg, transparent, var(--veil-dark-18)),
        var(--image-about) center / cover no-repeat;
      box-shadow: 0 24px 60px var(--shadow-soft);
    }
    .contact-methods {
      display: grid;
      gap: 14px;
    }
    .method-card {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      padding: 18px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-white);
      box-shadow: 0 16px 36px var(--shadow-soft);
      min-width: 0;
    }
    .method-icon,
    .choice-icon {
      display: grid;
      place-items: center;
      width: 54px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--color-teal-soft);
      color: var(--color-teal-deep);
    }
    .method-icon svg,
    .choice-icon svg {
      width: 26px;
      stroke: currentColor;
      stroke-width: 1.65;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .method-card h3,
    .choice-card h3,
    .prep-card h3,
    .step h3 {
      margin: 0;
      color: var(--color-ink-2);
      letter-spacing: .06em;
    }
    .method-card p,
    .choice-card p,
    .prep-card p,
    .step p {
      margin: 5px 0 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.8;
    }
    .method-card a {
      color: var(--color-teal-deep);
      font-weight: 800;
    }

    .consult-panel {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-white);
      box-shadow: 0 28px 70px var(--shadow-soft);
      overflow: clip;
      min-width: 0;
    }
    .panel-head {
      display: grid;
      gap: 10px;
      padding: clamp(26px, 4vw, 42px);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-teal-soft), transparent 18%), var(--color-white) 64%),
        var(--color-white);
      border-block-end: 1px solid var(--color-border);
    }
    .panel-head h2 {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(28px, 3vw, 42px);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: .04em;
    }
    .panel-head p {
      margin: 0;
      color: var(--color-muted);
      letter-spacing: .04em;
    }
    .contact-form {
      display: grid;
      gap: 20px;
      padding: clamp(24px, 4vw, 42px);
    }
    .field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .field {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    .field-full { grid-column: 1 / -1; }
    label {
      color: var(--color-ink-2);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .1em;
    }
    input,
    select,
    textarea {
      width: 100%;
      min-height: 48px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      background: var(--color-soft);
      color: var(--color-ink-2);
      padding: 12px 14px;
      outline: none;
      transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
    }
    textarea {
      min-height: 132px;
      resize: vertical;
      line-height: 1.7;
    }
    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--color-teal);
      background: var(--color-white);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-teal), transparent 84%);
    }
    .choice-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .choice-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 16px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-white);
      cursor: pointer;
      transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
    }
    .choice-card:hover,
    .choice-card:has(input:checked) {
      border-color: var(--color-teal);
      background: color-mix(in srgb, var(--color-teal-soft), transparent 24%);
      transform: translateY(-2px);
    }
    .choice-card input {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .choice-icon {
      width: 44px;
      background: var(--color-soft);
    }
    .form-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      justify-content: space-between;
      padding-block-start: 4px;
    }
    .form-note {
      margin: 0;
      max-width: 440px;
      color: var(--color-muted);
      font-size: 13px;
      line-height: 1.8;
    }
    .form-status {
      margin: 0;
      min-height: 24px;
      color: var(--color-teal-deep);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .prep-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border: 1px solid var(--color-border);
      background: var(--color-white);
    }
    .prep-card {
      padding: clamp(24px, 3vw, 36px);
      border-inline-start: 1px solid var(--color-border);
      min-width: 0;
    }
    .prep-card:first-child { border-inline-start: 0; }
    .prep-card small {
      display: block;
      margin-block-end: 18px;
      color: var(--color-gold);
      font-family: var(--font-display);
      font-size: 28px;
      line-height: 1;
    }

    .contact-process {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      border-block: 1px solid var(--color-border);
    }
    .step {
      display: grid;
      gap: 14px;
      padding: 30px clamp(18px, 2.5vw, 32px);
      border-inline-start: 1px solid var(--color-border);
      min-width: 0;
    }
    .step:first-child { border-inline-start: 0; }
    .step-number {
      color: var(--color-gold);
      font-family: var(--font-display);
      font-size: 24px;
      line-height: 1;
    }

    .cta-band {
      position: relative;
      min-height: clamp(320px, 36vw, 460px);
      display: grid;
      place-items: center;
      overflow: clip;
      text-align: center;
      color: var(--color-white);
      background:
        linear-gradient(90deg, var(--veil-dark-74), var(--veil-dark-46)),
        var(--image-cta) center / cover no-repeat;
    }
    .cta-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, var(--veil-dark-12));
      pointer-events: none;
    }
    .cta-band .container {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 18px;
    }
    .cta-band h2 {
      margin: 0;
      max-width: 760px;
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: .05em;
      text-wrap: balance;
    }
    .cta-band p {
      margin: 0;
      color: color-mix(in srgb, var(--color-white), transparent 18%);
      letter-spacing: .06em;
    }

    .footer {
      background: var(--color-ink);
      color: color-mix(in srgb, var(--color-white), transparent 18%);
      padding-block: 56px 28px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr .7fr .7fr 1fr;
      gap: clamp(28px, 5vw, 64px);
    }
    .footer-logo { width: 190px; margin-block-end: 20px; }
    .footer h3 {
      margin: 0 0 18px;
      color: var(--color-white);
      font-size: 15px;
      letter-spacing: .14em;
    }
    .footer p {
      margin: 0;
      max-width: 340px;
      color: color-mix(in srgb, var(--color-white), transparent 36%);
      font-size: 14px;
      line-height: 1.9;
    }
    .footer-links,
    .footer-contact {
      display: grid;
      gap: 10px;
      color: color-mix(in srgb, var(--color-white), transparent 34%);
      font-size: 14px;
    }
    .line-box {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      margin-block-start: 20px;
      padding: 14px;
      border: 1px solid var(--line-light);
      border-radius: 8px;
    }
    .qr {
      width: 54px;
      aspect-ratio: 1;
      border-radius: 4px;
      background:
        linear-gradient(90deg, var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 20px, transparent 20px),
        linear-gradient(var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 20px, transparent 20px),
        var(--color-teal);
      background-size: 24px 24px;
    }
    .copyright {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin: 42px auto 0;
      padding-block-start: 24px;
      border-block-start: 1px solid var(--line-light);
      display: flex;
      justify-content: space-between;
      gap: 18px;
      color: color-mix(in srgb, var(--color-white), transparent 54%);
      font-size: 12px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: none; }

    @media (max-width: 1180px) {
      .nav { gap: 22px; }
      .contact-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 34px; }
      .contact-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .step:nth-child(odd) { border-inline-start: 0; }
      .step:nth-child(n + 3) { border-block-start: 1px solid var(--color-border); }
    }

    @media (max-width: 980px) {
      .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
      .brand img { display: none; }
      .mobile-logo { display: inline-flex; }
      .nav,
      .header-actions .btn { display: none; }
      .menu-button { display: grid; }
      .contact-layout,
      .footer-grid { grid-template-columns: 1fr; }
      .contact-intro { position: static; }
      .prep-grid { grid-template-columns: 1fr; }
      .prep-card { border-inline-start: 0; border-block-start: 1px solid var(--color-border); }
      .prep-card:first-child { border-block-start: 0; }
    }

    @media (max-width: 620px) {
      :root { --page-pad: 20px; }
      .section { padding-block: 56px; }
      .contact-hero { min-height: 520px; }
      .contact-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 42%, var(--veil-dark-82) 100%),
          var(--image-hero) 58% center / auto 100% no-repeat;
      }
      .hero-inner { padding-block: 112px 58px; }
      .contact-hero h1 { font-size: clamp(36px, 11vw, 48px); }
      .hero-actions,
      .field-grid,
      .choice-grid,
      .contact-process { grid-template-columns: 1fr; }
      .hero-actions { display: grid; }
      .contact-photo { min-height: 300px; }
      .method-card { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; }
      .contact-form { gap: 18px; }
      .choice-card { grid-template-columns: 42px minmax(0, 1fr); }
      .form-actions { display: grid; justify-items: stretch; }
      .step,
      .step:nth-child(n + 3) {
        border-inline-start: 0;
        border-block-start: 1px solid var(--color-border);
      }
      .step:first-child { border-block-start: 0; }
      .copyright { display: grid; }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

    .contact-hero {
      min-height: clamp(540px, 62vh, 680px);
      display: grid;
      align-items: center;
      padding-block: 0;
    }
    .contact-hero::before {
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-74) 35%, var(--veil-dark-38) 68%, var(--veil-dark-16) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-46)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .contact-hero::after {
      inset: 0;
      height: auto;
      background: radial-gradient(ellipse at 78% 36%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 20rem);
    }
    .contact-hero .hero-inner { padding-block: clamp(120px, 13vh, 154px) clamp(96px, 10vh, 118px); }
    .contact-hero .hero-copy { gap: 18px; max-width: 620px; }
    .contact-hero .hero-kicker { color: color-mix(in srgb, var(--color-white), transparent 14%); }
    .contact-hero h1 {
      font-size: clamp(38px, 4.6vw, 62px);
      line-height: 1.16;
      letter-spacing: .05em;
    }
    .contact-hero p {
      max-width: 500px;
      font-size: clamp(15px, 1.35vw, 17px);
      line-height: 1.95;
    }
    @media (max-width: 980px) {
      .contact-hero { min-height: 560px; }
      .contact-hero .hero-inner { padding-block: 116px 86px; }
    }

    @media (max-width: 620px) {
      .contact-hero { min-height: 500px; }
      .contact-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 46%, var(--veil-dark-88) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .contact-hero h1 { font-size: clamp(34px, 10vw, 46px); }    }

/* Source: portfolio-detail.html */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
    :root {
      --color-ink: #101010;
      --color-ink-2: #1A1A1A;
      --color-body: #44403A;
      --color-muted: #8A8378;
      --color-white: #FFFFFF;
      --color-soft: #FBFAF7;
      --color-border: #E5DFD4;
      --color-teal: #32C7BC;
      --color-teal-deep: #15998F;
      --color-teal-ink: #087981;
      --color-teal-soft: #E7FAF7;
      --veil-dark-18: rgb(16 16 16 / 0.18);
      --veil-dark-22: rgb(16 16 16 / 0.22);
      --veil-dark-38: rgb(16 16 16 / 0.38);
      --veil-dark-58: rgb(16 16 16 / 0.58);
      --veil-dark-88: rgb(16 16 16 / 0.88);
      --line-light: rgb(255 255 255 / 0.16);
      --shadow-soft: rgb(16 16 16 / 0.08);
      --font-display: "Iowan Old Style", "Noto Serif TC", "Songti TC", Georgia, serif;
      --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif;
      --radius-card: 10px;
      --radius-pill: 999px;
      --content: 1180px;
      --wide: 1360px;
      --page-pad: clamp(20px, 5vw, 56px);
      --ease: cubic-bezier(.19, 1, .22, 1);
    }

    * { box-sizing: border-box; }
    html,
    body { margin: 0; min-height: 100%; overflow-x: clip; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--color-white);
      color: var(--color-body);
      font-family: var(--font-body);
      line-height: 1.72;
      text-rendering: geometricPrecision;
    }
    button,
    a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img,
    svg { display: block; max-width: 100%; }

    .container {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin-inline: auto;
    }
    .section { padding-block: clamp(64px, 8vw, 118px); }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 40;
      padding: 18px var(--page-pad);
      transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
    }
    .site-header.is-scrolled {
      padding-block: 12px;
      background: color-mix(in srgb, var(--color-ink), transparent 6%);
      border-block-end: 1px solid var(--line-light);
      backdrop-filter: blur(18px);
    }
    .header-inner {
      width: min(100%, var(--wide));
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 24px;
    }
    .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
    .brand img { width: clamp(142px, 18vw, 206px); height: auto; }
    .mobile-logo {
      display: none;
      align-items: center;
      gap: 10px;
      color: var(--color-white);
    }
    .mobile-logo b {
      display: grid;
      place-items: center;
      width: 34px;
      aspect-ratio: 1;
      background: var(--color-teal);
      color: var(--color-white);
      border-radius: 2px;
      letter-spacing: -.05em;
    }
    .mobile-logo span {
      font-family: var(--font-display);
      font-size: 16px;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(22px, 3vw, 42px);
      color: color-mix(in srgb, var(--color-white), transparent 12%);
      font-size: 14px;
      letter-spacing: .12em;
    }
    .nav a { position: relative; white-space: nowrap; }
    .nav a::after {
      content: "";
      position: absolute;
      inset-inline: 44%;
      inset-block-end: -10px;
      height: 2px;
      background: var(--color-teal);
      opacity: 0;
      transition: inset .3s var(--ease), opacity .3s var(--ease);
    }
    .nav a:hover::after,
    .nav a[aria-current="page"]::after { inset-inline: 0; opacity: 1; }
    .header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 22px;
      border-radius: var(--radius-pill);
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .12em;
      white-space: nowrap;
      transition: transform .32s var(--ease), background .32s var(--ease), border-color .32s var(--ease), color .32s var(--ease);
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-teal { background: var(--color-teal); color: var(--color-ink); }
    .btn-outline { border-color: color-mix(in srgb, var(--color-white), transparent 50%); color: var(--color-white); }
    .btn-dark { background: var(--color-ink-2); color: var(--color-white); }
    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-light);
      border-radius: 50%;
      background: var(--veil-dark-22);
      color: var(--color-white);
      cursor: pointer;
      place-items: center;
    }
    .menu-button svg { width: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
    .mobile-nav {
      position: fixed;
      z-index: 35;
      inset: 74px var(--page-pad) auto;
      display: none;
      padding: 10px;
      border: 1px solid var(--line-light);
      background: color-mix(in srgb, var(--color-ink), transparent 4%);
      color: var(--color-white);
      backdrop-filter: blur(18px);
      box-shadow: 0 24px 70px var(--veil-dark-38);
    }
    .mobile-nav.is-open { display: block; }
    .mobile-nav a {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 15px 12px;
      border-block-end: 1px solid var(--line-light);
      letter-spacing: .12em;
    }
    .mobile-nav a:last-child { border-block-end: 0; }
    .mobile-nav small { color: var(--color-teal); letter-spacing: .14em; }

    .case-hero {
      position: relative;
      min-height: clamp(520px, 72vh, 760px);
      display: grid;
      align-items: end;
      isolation: isolate;
      overflow: hidden;
      background: var(--color-ink);
    }
    .case-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-58) 42%, var(--veil-dark-18) 72%),
        var(--case-image, url("/wp-content/uploads/ejdesign-source/ejdesign/C1755246759961.jpg")) center / cover no-repeat;
      transform: scale(1.02);
    }
    .case-hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 30%;
      z-index: -1;
      background: linear-gradient(180deg, transparent, var(--color-white));
      opacity: .9;
    }
    .hero-inner {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
      padding-block: 150px clamp(70px, 10vw, 118px);
    }
    .hero-copy { width: min(660px, 100%); color: var(--color-white); }
    .hero-copy h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(42px, 6vw, 76px);
      font-weight: 500;
      line-height: 1.08;
      letter-spacing: .05em;
      text-wrap: balance;
      overflow-wrap: anywhere;
    }
    .hero-copy p {
      margin: 22px 0 0;
      max-width: 560px;
      color: color-mix(in srgb, var(--color-white), transparent 16%);
      letter-spacing: .06em;
      line-height: 2;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-block-start: 30px; }

    .case-layout {
      display: grid;
      grid-template-columns: minmax(0, .62fr) minmax(280px, .38fr);
      gap: clamp(28px, 5vw, 74px);
      align-items: start;
    }
    .case-main-image {
      overflow: hidden;
      border-radius: var(--radius-card);
      background: var(--color-soft);
      box-shadow: 0 24px 70px var(--shadow-soft);
    }
    .case-main-image img {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
    }
    .case-panel {
      position: sticky;
      inset-block-start: 112px;
      padding: clamp(24px, 4vw, 42px);
      border: 1px solid var(--color-border);
      background: var(--color-soft);
      border-radius: var(--radius-card);
    }
    .case-panel h2 {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(28px, 4vw, 46px);
      font-weight: 500;
      line-height: 1.22;
      letter-spacing: .04em;
    }
    .case-panel p {
      margin: 18px 0 0;
      color: var(--color-muted);
      line-height: 2;
      letter-spacing: .045em;
    }
    .case-info {
      display: grid;
      gap: 12px;
      margin-block: 28px;
      padding-block: 22px;
      border-block: 1px solid var(--color-border);
    }
    .case-info div {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      color: var(--color-muted);
      font-size: 14px;
      letter-spacing: .08em;
    }
    .case-info b { color: var(--color-ink-2); font-weight: 700; }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 24px;
      margin-block-end: clamp(26px, 4vw, 44px);
    }
    .section-title {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(32px, 5vw, 58px);
      font-weight: 500;
      line-height: 1.14;
      letter-spacing: .04em;
      text-wrap: balance;
    }
    .section-note {
      margin: 0;
      max-width: 390px;
      color: var(--color-muted);
      font-size: 14px;
      letter-spacing: .06em;
      line-height: 1.9;
    }
    .photo-gallery {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(14px, 2vw, 22px);
    }
    .photo-card {
      position: relative;
      display: block;
      overflow: hidden;
      min-height: 280px;
      border-radius: var(--radius-card);
      background: var(--color-soft);
      box-shadow: 0 18px 48px var(--shadow-soft);
    }
    .photo-card:nth-child(4n + 1) { grid-column: span 7; }
    .photo-card:nth-child(4n + 2) { grid-column: span 5; }
    .photo-card:nth-child(4n + 3) { grid-column: span 5; }
    .photo-card:nth-child(4n) { grid-column: span 7; }
    .photo-card img {
      width: 100%;
      height: 100%;
      min-height: inherit;
      object-fit: cover;
      transition: transform .9s var(--ease), filter .9s var(--ease);
    }
    .photo-card::after {
      content: attr(data-index);
      position: absolute;
      inset: auto 18px 18px auto;
      display: grid;
      place-items: center;
      width: 42px;
      aspect-ratio: 1;
      border: 1px solid rgb(255 255 255 / .34);
      border-radius: 50%;
      background: rgb(16 16 16 / .34);
      color: var(--color-white);
      font-size: 12px;
      letter-spacing: .08em;
      backdrop-filter: blur(10px);
    }
    .photo-card:hover img {
      transform: scale(1.035);
      filter: saturate(1.03) contrast(1.02);
    }

    .more-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-block-start: 30px;
    }
    .more-card {
      display: grid;
      gap: 10px;
      min-width: 0;
      color: var(--color-ink-2);
    }
    .more-card img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: var(--radius-card);
    }
    .more-card span {
      color: var(--color-muted);
      font-size: 13px;
      letter-spacing: .06em;
      overflow-wrap: anywhere;
    }

    .footer {
      padding: 64px var(--page-pad) 28px;
      background: var(--color-ink);
      color: color-mix(in srgb, var(--color-white), transparent 24%);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr .8fr .8fr 1fr;
      gap: clamp(28px, 4vw, 58px);
    }
    .footer-logo { width: 190px; margin-block-end: 20px; }
    .footer h3 {
      margin: 0 0 18px;
      color: var(--color-white);
      font-size: 14px;
      letter-spacing: .16em;
    }
    .footer p {
      margin: 0;
      max-width: 340px;
      font-size: 14px;
      line-height: 1.9;
    }
    .footer-links,
    .footer-contact {
      display: grid;
      gap: 8px;
      font-size: 14px;
      letter-spacing: .08em;
    }
    .footer a:hover { color: var(--color-teal); }
    .line-box {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      margin-block-start: 18px;
      padding: 14px;
      border: 1px solid var(--line-light);
      color: var(--color-white);
    }
    .qr {
      width: 54px;
      aspect-ratio: 1;
      background:
        linear-gradient(90deg, var(--color-white) 50%, transparent 0) 0 0 / 12px 12px,
        linear-gradient(var(--color-white) 50%, transparent 0) 0 0 / 12px 12px,
        var(--color-teal);
      opacity: .95;
    }
    .copyright {
      width: min(100%, var(--wide));
      margin: 48px auto 0;
      padding-block-start: 22px;
      border-block-start: 1px solid var(--line-light);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: color-mix(in srgb, var(--color-white), transparent 48%);
      font-size: 12px;
      letter-spacing: .08em;
    }

    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
    .reveal.is-visible { opacity: 1; transform: none; }

    @media (max-width: 1120px) {
      .nav { gap: 22px; }
      .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
      .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .photo-card,
      .photo-card:nth-child(n) { grid-column: span 6; }
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 820px) {
      .brand img,
      .nav,
      .header-actions .btn { display: none; }
      .mobile-logo,
      .menu-button { display: inline-grid; }
      .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
      .case-hero { min-height: 560px; }
      .hero-inner { padding-block: 112px 62px; }
      .hero-copy h1 { font-size: clamp(34px, 10vw, 48px); }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .case-layout { grid-template-columns: 1fr; }
      .case-panel { position: static; }
      .section-head { display: grid; }
      .footer-grid,
      .copyright { grid-template-columns: 1fr; }
      .copyright { display: grid; }
    }
    @media (max-width: 620px) {
      .photo-gallery { grid-template-columns: 1fr; }
      .photo-card,
      .photo-card:nth-child(n) {
        grid-column: auto;
        min-height: 250px;
      }
      .more-grid { grid-template-columns: 1fr; }
      .btn { width: 100%; }
      .footer-grid { gap: 30px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

    .case-hero {
      min-height: clamp(540px, 62vh, 680px);
      display: grid;
      align-items: center;
      padding-block: 0;
    }
    .case-hero::before {
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-74) 35%, var(--veil-dark-38) 68%, var(--veil-dark-16) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-46)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .case-hero::after {
      inset: 0;
      height: auto;
      background: radial-gradient(ellipse at 78% 36%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 20rem);
    }
    .case-hero .hero-inner { padding-block: clamp(120px, 13vh, 154px) clamp(96px, 10vh, 118px); }
    .case-hero .hero-copy { display: grid; gap: 18px; max-width: 620px; }
    .case-hero .hero-kicker {
      display: inline-grid;
      grid-template-columns: 3px auto;
      align-items: center;
      gap: 20px;
      width: fit-content;
      color: color-mix(in srgb, var(--color-white), transparent 14%);
      letter-spacing: .15em;
      font-size: 13px;
      font-weight: 700;
    }
    .case-hero .hero-kicker::before {
      content: "";
      width: 3px;
      height: 36px;
      background: var(--color-teal);
    }
    .case-hero h1 {
      font-size: clamp(38px, 4.6vw, 62px);
      line-height: 1.16;
      letter-spacing: .05em;
    }
    .case-hero p {
      max-width: 500px;
      font-size: clamp(15px, 1.35vw, 17px);
      line-height: 1.95;
    }
    @media (max-width: 980px) {
      .case-hero { min-height: 560px; }
      .case-hero .hero-inner { padding-block: 116px 86px; }
    }

    @media (max-width: 620px) {
      .case-hero { min-height: 500px; }
      .case-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 46%, var(--veil-dark-88) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .case-hero h1 { font-size: clamp(34px, 10vw, 46px); }    }

/* Source: article.html */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
    :root {
      --color-ink: #101010;
      --color-ink-2: #1A1A1A;
      --color-charcoal: #22201D;
      --color-body: #44403A;
      --color-muted: #8A8378;
      --color-taupe: #A39B8E;
      --color-white: #FFFFFF;
      --color-ivory: #F6F3EE;
      --color-soft: #FBFAF7;
      --color-border: #E5DFD4;
      --color-teal: #32C7BC;
      --color-teal-deep: #15998F;
      --color-teal-ink: #087981;
      --color-teal-soft: #E7FAF7;
      --color-gold: #B8985A;
      --color-pearl: #C9B896;
      --shadow-soft: rgb(16 16 16 / 0.08);
      --shadow-card: rgb(16 16 16 / 0.12);
      --veil-dark-10: rgb(16 16 16 / 0.10);
      --veil-dark-12: rgb(16 16 16 / 0.12);
      --veil-dark-18: rgb(16 16 16 / 0.18);
      --veil-dark-22: rgb(16 16 16 / 0.22);
      --veil-dark-38: rgb(16 16 16 / 0.38);
      --veil-dark-46: rgb(16 16 16 / 0.46);
      --veil-dark-58: rgb(16 16 16 / 0.58);
      --veil-dark-74: rgb(16 16 16 / 0.74);
      --veil-dark-82: rgb(16 16 16 / 0.82);
      --veil-dark-88: rgb(16 16 16 / 0.88);
      --line-light: rgb(255 255 255 / 0.16);
      --image-hero: url("/wp-content/uploads/ejdesign-source/ej-hero-gpt-image-2.jpg");
      --image-about: url("/wp-content/uploads/ejdesign-source/ej-about-gpt-image-2.jpg");
      --image-service-residential: url("/wp-content/uploads/ejdesign-source/ej-service-residential-gpt-image-2.jpg");
      --image-service-commercial: url("/wp-content/uploads/ejdesign-source/ej-service-commercial-gpt-image-2.jpg");
      --image-service-renovation: url("/wp-content/uploads/ejdesign-source/ej-service-renovation-gpt-image-2.jpg");
      --image-service-styling: url("/wp-content/uploads/ejdesign-source/ej-service-styling-gpt-image-2.jpg");
      --image-work-office: url("/wp-content/uploads/ejdesign-source/ej-work-office-gpt-image-2.jpg");
      --image-commercial: url("/wp-content/uploads/ejdesign-source/ej-commercial-gpt-image-2.jpg");
      --image-cta: url("/wp-content/uploads/ejdesign-source/ej-cta-material-gpt-image-2.jpg");
      --font-display: "Iowan Old Style", "Noto Serif TC", "Songti TC", Georgia, serif;
      --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", system-ui, sans-serif;
      --radius-card: 10px;
      --radius-pill: 999px;
      --content: 1180px;
      --wide: 1360px;
      --page-pad: clamp(20px, 5vw, 56px);
      --ease: cubic-bezier(.19, 1, .22, 1);
    }

    * { box-sizing: border-box; }
    html,
    body { margin: 0; min-height: 100%; overflow-x: clip; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--color-white);
      color: var(--color-body);
      font-family: var(--font-body);
      line-height: 1.72;
      text-rendering: geometricPrecision;
    }
    button,
    a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img,
    svg { display: block; max-width: 100%; }

    .page { min-height: 100dvh; background: var(--color-white); }
    .container {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin-inline: auto;
    }
    .container-wide {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
    }
    .section { padding-block: clamp(64px, 8vw, 118px); }
    .section-soft { background: linear-gradient(180deg, var(--color-white), var(--color-soft)); }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .section-title {
      margin: 0;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .section-copy {
      margin: 18px 0 0;
      max-width: 640px;
      color: var(--color-muted);
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 2.05;
      letter-spacing: .045em;
    }
    .section-heading {
      display: grid;
      justify-items: center;
      text-align: center;
      margin-block-end: clamp(30px, 5vw, 58px);
    }
    .title-rule {
      width: 42px;
      height: 2px;
      margin-block-start: 15px;
      background: var(--color-teal);
    }

    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 40;
      padding: 18px var(--page-pad);
      transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
    }
    .site-header.is-scrolled {
      padding-block: 12px;
      background: color-mix(in srgb, var(--color-ink), transparent 6%);
      border-block-end: 1px solid var(--line-light);
      backdrop-filter: blur(18px);
    }
    .header-inner {
      width: min(100%, var(--wide));
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand img { width: clamp(142px, 18vw, 206px); height: auto; }
    .mobile-logo {
      display: none;
      align-items: center;
      gap: 10px;
      color: var(--color-white);
    }
    .mobile-logo b {
      display: grid;
      place-items: center;
      width: 34px;
      aspect-ratio: 1;
      background: var(--color-teal);
      color: var(--color-white);
      border-radius: 2px;
      letter-spacing: -.05em;
    }
    .mobile-logo span {
      font-family: var(--font-display);
      font-size: 16px;
      letter-spacing: .12em;
      white-space: nowrap;
    }
    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(22px, 3vw, 42px);
      color: color-mix(in srgb, var(--color-white), transparent 12%);
      font-size: 14px;
      letter-spacing: .12em;
    }
    .nav a { position: relative; white-space: nowrap; }
    .nav a::after {
      content: "";
      position: absolute;
      inset-inline: 44%;
      inset-block-end: -10px;
      height: 2px;
      background: var(--color-teal);
      opacity: 0;
      transition: inset .3s var(--ease), opacity .3s var(--ease);
    }
    .nav a:hover::after,
    .nav a[aria-current="page"]::after { inset-inline: 0; opacity: 1; }
    .header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-light);
      border-radius: 50%;
      background: var(--veil-dark-22);
      color: var(--color-white);
      cursor: pointer;
      place-items: center;
    }
    .menu-button svg { width: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 12px 22px;
      border: 1px solid transparent;
      border-radius: 4px;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-teal {
      background: var(--color-teal);
      color: var(--color-white);
      box-shadow: 0 16px 32px color-mix(in srgb, var(--color-teal), transparent 72%);
    }
    .btn-outline {
      color: var(--color-white);
      border-color: color-mix(in srgb, var(--color-white), transparent 42%);
      background: var(--veil-dark-10);
    }
    .btn-link {
      min-height: auto;
      padding: 0;
      border-radius: 0;
      color: var(--color-teal-deep);
      border-block-end: 1px solid var(--color-teal);
    }
    .mobile-nav {
      position: fixed;
      inset: 74px var(--page-pad) auto;
      z-index: 50;
      display: none;
      padding: 14px;
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      box-shadow: 0 24px 60px var(--shadow-card);
    }
    .mobile-nav.is-open { display: block; }
    .mobile-nav a {
      display: flex;
      justify-content: space-between;
      padding: 13px 4px;
      border-block-end: 1px solid var(--color-border);
      color: var(--color-ink-2);
      white-space: nowrap;
    }
    .mobile-nav a:last-child { border-block-end: 0; }
    .mobile-nav small { color: var(--color-teal-deep); letter-spacing: .14em; }

    .service-hero {
      position: relative;
      min-height: clamp(520px, 48vw, 690px);
      display: grid;
      align-items: center;
      overflow: clip;
      color: var(--color-white);
      background: var(--color-ink);
    }
    .service-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-82) 26%, var(--veil-dark-46) 57%, var(--veil-dark-12) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-38)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .service-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 78% 28%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 18rem),
        linear-gradient(90deg, var(--veil-dark-18), transparent 52%);
      box-shadow: inset 0 -120px 130px var(--veil-dark-38);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
      padding-block: 120px 78px;
    }
    .hero-copy {
      display: grid;
      gap: 22px;
      max-width: 620px;
    }
    .hero-kicker {
      display: inline-grid;
      grid-template-columns: 3px auto;
      align-items: center;
      gap: 22px;
      width: fit-content;
      color: color-mix(in srgb, var(--color-white), transparent 14%);
      letter-spacing: .14em;
      font-size: 15px;
    }
    .hero-kicker::before {
      content: "";
      width: 3px;
      height: 48px;
      background: var(--color-teal);
    }
    .service-hero h1 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(42px, 5.2vw, 78px);
      font-weight: 500;
      line-height: 1.14;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .service-hero p {
      margin: 0;
      max-width: 520px;
      color: color-mix(in srgb, var(--color-white), transparent 16%);
      font-size: clamp(16px, 1.45vw, 19px);
      line-height: 1.95;
      letter-spacing: .045em;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

    .service-intro {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr);
      gap: clamp(44px, 7vw, 86px);
      align-items: center;
      padding-block: clamp(70px, 8vw, 112px);
    }
    .intro-panel {
      display: grid;
      gap: 18px;
      min-width: 0;
    }
    .feature-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-block: 1px solid var(--color-border);
    }
    .feature-item {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 14px;
      padding: 26px clamp(16px, 2vw, 28px);
      border-inline-start: 1px solid var(--color-border);
      min-width: 0;
    }
    .feature-item:first-child { border-inline-start: 0; }
    .icon {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      color: var(--color-teal-deep);
    }
    .icon svg { width: 42px; stroke: currentColor; stroke-width: 1.35; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .feature-item h3,
    .service-card h3,
    .reason h3,
    .process-node h3 {
      margin: 0;
      color: var(--color-ink-2);
      font-weight: 700;
      letter-spacing: .06em;
    }
    .feature-item p,
    .service-card p,
    .reason p,
    .process-node p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.85;
    }

    .service-board {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid var(--color-border);
      background: var(--color-white);
    }
    .service-card {
      display: grid;
      grid-template-columns: minmax(180px, .54fr) minmax(0, .46fr);
      min-height: 286px;
      border-block-end: 1px solid var(--color-border);
      min-width: 0;
    }
    .service-card:nth-child(odd) { border-inline-end: 1px solid var(--color-border); }
    .service-card:nth-last-child(-n + 2) { border-block-end: 0; }
    .service-card:nth-child(even) .service-copy { order: 2; }
    .service-card:nth-child(even) .service-photo { order: 1; }
    .service-copy {
      display: grid;
      align-content: center;
      gap: 16px;
      padding: clamp(24px, 3.2vw, 42px);
      min-width: 0;
    }
    .service-index {
      width: fit-content;
      color: var(--color-gold);
      font-family: var(--font-display);
      font-size: clamp(22px, 2.5vw, 32px);
      line-height: 1;
      letter-spacing: .02em;
      border-block-end: 1px solid var(--color-pearl);
      padding-block-end: 10px;
    }
    .service-card h3 {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.8vw, 34px);
      font-weight: 500;
      letter-spacing: .06em;
    }
    .service-card .btn-link {
      justify-self: start;
      margin-block-start: 8px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .08em;
    }
    .service-photo {
      position: relative;
      min-height: 286px;
      background: var(--service-image) center / cover no-repeat;
      overflow: clip;
    }
    .service-photo::after,
    .cta-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, var(--veil-dark-12));
      pointer-events: none;
    }
    .service-one { --service-image: var(--image-service-residential); }
    .service-two { --service-image: var(--image-service-styling); }
    .service-three { --service-image: var(--image-service-renovation); }
    .service-four { --service-image: var(--image-about); }
    .service-five { --service-image: var(--image-service-commercial); }
    .service-six { --service-image: var(--image-work-office); }

    .reasons {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-block: 1px solid var(--color-border);
    }
    .reason {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 14px;
      padding: 30px 26px;
      border-inline-end: 1px solid var(--color-border);
      min-width: 0;
    }
    .reason:last-child { border-inline-end: 0; }
    .reason .icon { color: var(--color-gold); }

    .process-strip {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: start;
      gap: 0;
      position: relative;
    }
    .process-strip::before {
      content: "";
      position: absolute;
      inset-inline: 8%;
      inset-block-start: 36px;
      border-block-start: 1px dashed var(--color-pearl);
    }
    .process-node {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 10px;
      padding-inline: 14px;
      min-width: 0;
    }
    .process-icon {
      display: grid;
      place-items: center;
      width: 72px;
      aspect-ratio: 1;
      border: 1px solid var(--color-pearl);
      border-radius: 50%;
      background: var(--color-white);
      color: var(--color-teal-deep);
    }
    .process-icon svg { width: 32px; stroke: currentColor; stroke-width: 1.55; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .process-node small {
      color: var(--color-gold);
      font-family: var(--font-display);
      font-size: 18px;
      line-height: 1;
    }
    .process-node h3 { font-size: 16px; }

    .cta-band {
      position: relative;
      min-height: clamp(320px, 36vw, 460px);
      display: grid;
      place-items: center;
      overflow: clip;
      text-align: center;
      color: var(--color-white);
      background:
        linear-gradient(90deg, var(--veil-dark-74), var(--veil-dark-46)),
        var(--image-cta) center / cover no-repeat;
    }
    .cta-band .container {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 18px;
    }
    .cta-band h2 {
      margin: 0;
      max-width: 760px;
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: .05em;
      text-wrap: balance;
    }
    .cta-band p {
      margin: 0;
      color: color-mix(in srgb, var(--color-white), transparent 18%);
      letter-spacing: .06em;
    }

    .footer {
      background: var(--color-ink);
      color: color-mix(in srgb, var(--color-white), transparent 18%);
      padding-block: 56px 28px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr .7fr .7fr 1fr;
      gap: clamp(28px, 5vw, 64px);
    }
    .footer-logo { width: 190px; margin-block-end: 20px; }
    .footer h3 {
      margin: 0 0 18px;
      color: var(--color-white);
      font-size: 15px;
      letter-spacing: .14em;
    }
    .footer p {
      margin: 0;
      max-width: 340px;
      color: color-mix(in srgb, var(--color-white), transparent 36%);
      font-size: 14px;
      line-height: 1.9;
    }
    .footer-links,
    .footer-contact {
      display: grid;
      gap: 10px;
      color: color-mix(in srgb, var(--color-white), transparent 34%);
      font-size: 14px;
    }
    .line-box {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      margin-block-start: 20px;
      padding: 14px;
      border: 1px solid var(--line-light);
      border-radius: 8px;
    }
    .qr {
      width: 54px;
      aspect-ratio: 1;
      border-radius: 4px;
      background:
        linear-gradient(90deg, var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 20px, transparent 20px),
        linear-gradient(var(--color-white) 8px, transparent 8px 12px, var(--color-white) 12px 20px, transparent 20px),
        var(--color-teal);
      background-size: 24px 24px;
    }
    .copyright {
      width: min(100% - (var(--page-pad) * 2), var(--content));
      margin: 42px auto 0;
      padding-block-start: 24px;
      border-block-start: 1px solid var(--line-light);
      display: flex;
      justify-content: space-between;
      gap: 18px;
      color: color-mix(in srgb, var(--color-white), transparent 54%);
      font-size: 12px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: none; }

    @media (max-width: 1180px) {
      .nav { gap: 22px; }
      .service-card { grid-template-columns: 1fr; }
      .service-card:nth-child(even) .service-copy,
      .service-card:nth-child(even) .service-photo { order: initial; }
      .service-photo { min-height: 240px; }
      .process-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 0; }
      .process-strip::before { display: none; }
    }

    @media (max-width: 980px) {
      .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
      .brand img { display: none; }
      .mobile-logo { display: inline-flex; }
      .nav,
      .header-actions .btn { display: none; }
      .menu-button { display: grid; }
      .service-intro,
      .service-board,
      .reasons,
      .footer-grid { grid-template-columns: 1fr; }
      .service-card,
      .service-card:nth-child(odd) {
        border-inline-end: 0;
        border-block-end: 1px solid var(--color-border);
      }
      .service-card:last-child { border-block-end: 0; }
      .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .feature-item:nth-child(odd) { border-inline-start: 0; }
      .feature-item:nth-child(n + 3) { border-block-start: 1px solid var(--color-border); }
      .reason { border-inline-end: 0; border-block-start: 1px solid var(--color-border); }
      .reason:first-child { border-block-start: 0; }
    }

    @media (max-width: 620px) {
      :root { --page-pad: 20px; }
      .section { padding-block: 56px; }
      .service-hero { min-height: 560px; }
      .service-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 42%, var(--veil-dark-82) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .hero-inner { padding-block: 112px 62px; }
      .service-hero h1 { font-size: clamp(36px, 11vw, 48px); }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .service-intro { gap: 32px; padding-block: 58px; }
      .feature-row,
      .process-strip { grid-template-columns: 1fr; }
      .feature-item { border-inline-start: 0; border-block-start: 1px solid var(--color-border); }
      .feature-item:first-child { border-block-start: 0; }
      .service-copy { padding: 26px 24px; }
      .service-photo { min-height: 224px; }
      .process-strip { gap: 22px; }
      .process-node {
        grid-template-columns: 72px minmax(0, 1fr);
        justify-items: start;
        text-align: start;
        column-gap: 16px;
      }
      .process-icon { grid-row: span 3; }
      .process-node h3 { font-size: 16px; }
      .copyright { display: grid; }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

    .article-shell {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
    }
    .article-hero {
      padding-block: clamp(132px, 15vw, 184px) clamp(58px, 8vw, 92px);
      background:
        linear-gradient(180deg, var(--color-soft), var(--color-white));
      border-block-end: 1px solid var(--color-border);
    }
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-block-end: 24px;
      color: var(--color-muted);
      font-size: 13px;
      letter-spacing: .08em;
    }
    .breadcrumb a {
      color: var(--color-teal-ink);
      font-weight: 800;
    }
    .article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      margin-block-end: 20px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .article-meta span + span::before {
      content: "/";
      margin-inline-end: 14px;
      color: var(--color-pearl);
    }
    .article-hero h1 {
      margin: 0;
      max-width: 880px;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(38px, 6vw, 76px);
      font-weight: 500;
      line-height: 1.13;
      letter-spacing: .035em;
      text-wrap: balance;
      overflow-wrap: anywhere;
    }
    .article-deck {
      margin: 24px 0 0;
      max-width: 760px;
      color: var(--color-muted);
      font-size: clamp(16px, 2vw, 20px);
      line-height: 2;
      letter-spacing: .045em;
    }
    .article-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
      gap: clamp(34px, 6vw, 72px);
      align-items: start;
      padding-block: clamp(56px, 8vw, 104px);
    }
    .article-body {
      min-width: 0;
    }
    .featured-image,
    .article-media {
      margin: 0 0 clamp(36px, 5vw, 62px);
    }
    .featured-image__frame,
    .article-media__frame {
      min-height: clamp(300px, 48vw, 560px);
      border-radius: 18px;
      overflow: hidden;
      background:
        linear-gradient(90deg, var(--veil-dark-46), var(--veil-dark-10)),
        var(--image-about) center / cover no-repeat;
      box-shadow: 0 28px 70px var(--shadow-card);
    }
    .article-media__frame {
      min-height: clamp(240px, 38vw, 420px);
      background:
        linear-gradient(120deg, var(--veil-dark-38), transparent 60%),
        var(--image-service-styling) center / cover no-repeat;
    }
    .featured-image__caption,
    .wp-element-caption {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-block-start: 12px;
      color: var(--color-taupe);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .toc {
      margin-block-end: clamp(36px, 5vw, 64px);
    }
    .toc__box {
      display: grid;
      gap: 10px;
      padding: 24px;
      border: 1px solid var(--color-border);
      background: var(--color-soft);
    }
    .toc__box p {
      margin: 0 0 8px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .16em;
    }
    .toc a {
      color: var(--color-body);
      font-size: 14px;
      letter-spacing: .045em;
    }
    .toc__link--h3 {
      padding-inline-start: 20px;
      color: var(--color-muted) !important;
      font-size: 13px !important;
    }
    .elementor-widget-container {
      color: var(--color-body);
      font-size: 17px;
      letter-spacing: .04em;
    }
    .wp-block-paragraph {
      margin: 0 0 1.45em;
      line-height: 2.08;
    }
    .wp-block-heading {
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-weight: 500;
      letter-spacing: .04em;
      text-wrap: balance;
      overflow-wrap: anywhere;
    }
    h2.wp-block-heading {
      margin: clamp(44px, 6vw, 78px) 0 18px;
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.25;
    }
    h3.wp-block-heading,
    .rank-math-question {
      margin: 34px 0 14px;
      font-size: clamp(22px, 2.6vw, 30px);
      line-height: 1.35;
    }
    .wp-block-list {
      display: grid;
      gap: 12px;
      margin: 0 0 1.6em;
      padding-inline-start: 1.2em;
      line-height: 2;
    }
    .wp-block-quote {
      margin: clamp(34px, 5vw, 58px) 0;
      padding: 24px 28px;
      border-inline-start: 3px solid var(--color-teal);
      background: var(--color-teal-soft);
      color: var(--color-teal-ink);
    }
    .wp-block-table {
      margin: clamp(28px, 4vw, 48px) 0;
      overflow-x: auto;
    }
    .wp-block-table table {
      width: 100%;
      min-width: 680px;
      border-collapse: collapse;
      background: var(--color-white);
      border: 1px solid var(--color-border);
    }
    .wp-block-table th,
    .wp-block-table td {
      padding: 16px;
      border: 1px solid var(--color-border);
      text-align: left;
      vertical-align: top;
      line-height: 1.8;
    }
    .wp-block-table th {
      color: var(--color-teal-ink);
      background: var(--color-soft);
      font-size: 13px;
      letter-spacing: .08em;
    }
    .rank-math-block {
      display: grid;
      gap: 12px;
      margin-block: 24px 44px;
    }
    .rank-math-list-item {
      border: 1px solid var(--color-border);
      background: var(--color-white);
    }
    .rank-math-question {
      display: block;
      margin: 0;
      padding: 18px 20px;
      cursor: pointer;
    }
    .rank-math-answer {
      display: block;
      padding: 0 20px 20px;
      color: var(--color-muted);
    }
    .elementor-heading-title {
      margin-block-start: 36px;
      color: var(--color-teal-deep);
      font-weight: 900;
      letter-spacing: .08em;
    }
    .more-links {
      color: var(--color-teal-ink);
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    .article-sidebar {
      position: sticky;
      inset-block-start: 104px;
      display: grid;
      gap: 18px;
      min-width: 0;
    }
    .sidebar-widget {
      padding: 24px;
      border: 1px solid var(--color-border);
      background: var(--color-soft);
    }
    .sidebar-widget h2 {
      margin: 0 0 16px;
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 500;
      letter-spacing: .08em;
    }
    .search-form {
      display: grid;
      gap: 12px;
    }
    .search-form input {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--color-border);
      border-radius: 0;
      padding: 10px 12px;
      background: var(--color-white);
      color: var(--color-body);
      font: inherit;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .sidebar-links {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .sidebar-links a {
      display: block;
      padding-block: 10px;
      border-block-end: 1px solid var(--color-border);
      color: var(--color-body);
      font-size: 14px;
      letter-spacing: .055em;
    }
    .article-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-block-start: clamp(40px, 6vw, 72px);
      padding-block-start: clamp(32px, 5vw, 56px);
      border-block-start: 1px solid var(--color-border);
    }
    .related {
      padding-block: clamp(16px, 3vw, 34px) clamp(72px, 9vw, 120px);
    }
    .related .e-con-inner {
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      margin-inline: auto;
    }
    .related .elementor-heading-title {
      margin: 0 0 clamp(24px, 4vw, 40px);
      color: var(--color-ink-2);
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 500;
      letter-spacing: .08em;
    }
    .elementor-posts-container {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 2.4vw, 28px);
    }
    .elementor-post__card {
      height: 100%;
      display: grid;
      grid-template-rows: auto 1fr auto;
      overflow: hidden;
      border: 1px solid var(--color-border);
      border-radius: 18px;
      background: var(--color-white);
      box-shadow: 0 22px 52px var(--shadow-card);
      transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
    }
    .elementor-post__card:hover {
      transform: translateY(-4px);
      border-color: color-mix(in srgb, var(--color-teal), var(--color-border) 42%);
      box-shadow: 0 30px 72px var(--shadow-card-strong);
    }
    .elementor-post__thumbnail__link {
      display: block;
      color: inherit;
    }
    .elementor-post__thumbnail {
      aspect-ratio: 3 / 2;
      overflow: hidden;
      background: var(--color-soft);
    }
    .elementor-post__thumbnail img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform .7s ease;
    }
    .elementor-post__card:hover .elementor-post__thumbnail img {
      transform: scale(1.045);
    }
    .elementor-post__text {
      display: grid;
      gap: 12px;
      padding: 22px 22px 12px;
    }
    .elementor-post__title {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(20px, 2vw, 26px);
      font-weight: 500;
      line-height: 1.42;
      letter-spacing: .055em;
      text-wrap: balance;
    }
    .elementor-post__title a {
      color: var(--color-ink-2);
    }
    .elementor-post__excerpt p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.9;
      letter-spacing: .045em;
    }
    .elementor-post__meta-data {
      padding: 0 22px 22px;
      color: var(--color-teal-deep);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    @media (max-width: 980px) {
      .article-layout { grid-template-columns: 1fr; }
      .article-sidebar { position: static; }
      .elementor-posts-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
      .article-meta span + span::before { margin-inline-end: 10px; }
      .featured-image__caption,
      .wp-element-caption { display: grid; }
      .article-actions .btn,
      .search-form .btn { width: 100%; justify-content: center; }
      .elementor-posts-container { grid-template-columns: 1fr; }
      .related { padding-block-start: 0; }
    }

    .article-hero {
      position: relative;
      min-height: clamp(540px, 62vh, 680px);
      display: grid;
      align-items: center;
      overflow: clip;
      padding-block: 0;
      color: var(--color-white);
      background: var(--color-ink);
      border-block-end: 0;
    }
    .article-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--veil-dark-88) 0%, var(--veil-dark-74) 35%, var(--veil-dark-38) 68%, var(--veil-dark-16) 100%),
        linear-gradient(180deg, var(--veil-dark-22), transparent 42%, var(--veil-dark-46)),
        var(--image-hero) center right / cover no-repeat;
      transform: scale(1.01);
    }
    .article-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 78% 36%, color-mix(in srgb, var(--color-teal), transparent 88%), transparent 20rem);
      pointer-events: none;
    }
    .article-hero .article-shell {
      position: relative;
      z-index: 1;
      width: min(100% - (var(--page-pad) * 2), var(--wide));
      padding-block: clamp(120px, 13vh, 154px) clamp(96px, 10vh, 118px);
      display: grid;
      gap: 18px;
      max-width: var(--wide);
      margin-inline: auto;
    }
    .article-hero .breadcrumb {
      margin: 0;
      color: color-mix(in srgb, var(--color-white), transparent 26%);
    }
    .article-hero .breadcrumb a { color: var(--color-teal); }
    .article-hero .article-meta {
      margin: 0;
      color: color-mix(in srgb, var(--color-white), transparent 14%);
    }
    .article-hero .article-meta span + span::before { color: color-mix(in srgb, var(--color-white), transparent 46%); }
    .article-hero h1 {
      max-width: 760px;
      color: var(--color-white);
      font-size: clamp(38px, 4.6vw, 62px);
      line-height: 1.16;
      letter-spacing: .05em;
    }
    .article-hero .article-deck {
      margin: 0;
      max-width: 560px;
      color: color-mix(in srgb, var(--color-white), transparent 15%);
      font-size: clamp(15px, 1.35vw, 17px);
      line-height: 1.95;
    }
    @media (max-width: 980px) {
      .article-hero { min-height: 560px; }
      .article-hero .article-shell { padding-block: 116px 86px; }
    }

    @media (max-width: 620px) {
      .article-hero { min-height: 500px; }
      .article-hero::before {
        background:
          linear-gradient(180deg, var(--veil-dark-74) 0%, var(--veil-dark-46) 46%, var(--veil-dark-88) 100%),
          var(--image-hero) 63% center / auto 100% no-repeat;
      }
      .article-hero h1 { font-size: clamp(34px, 10vw, 46px); }    }

    .article-page .site-header {
      background: transparent;
      border-block-end: 1px solid transparent;
      backdrop-filter: none;
    }
    .article-page .site-header.is-scrolled {
      background: color-mix(in srgb, var(--color-ink), transparent 6%);
      border-block-end: 1px solid var(--line-light);
      backdrop-filter: blur(18px);
    }
    .article-page .nav a { color: color-mix(in srgb, var(--color-white), transparent 12%); }
    .article-page .mobile-logo { color: var(--color-white); }
    .article-page .menu-button {
      color: var(--color-white);
      border-color: var(--line-light);
      background: var(--veil-dark-22);
    }
    .article-page .btn-outline {
      color: var(--color-ink-2);
      border-color: var(--color-border);
      background: color-mix(in srgb, var(--color-ivory), transparent 18%);
    }
    .article-page .btn-outline:hover {
      border-color: var(--color-teal);
      background: var(--color-teal-soft);
      color: var(--color-teal-ink);
    }
    .article-page .article-wrap { padding-block-start: clamp(118px, 12vw, 172px); }


/* WordPress Elementor adapter */
body.elementor-page { margin: 0; background: var(--color-white, #fff); }
.elementor-location-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 40; color: var(--color-white); }
.elementor-location-header .e-con, .elementor-location-footer .e-con, .elementor.elementor-location-single .e-con { --container-widget-width: 100%; }
.elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor p { margin: 0; }
.elementor-widget-heading.hero-kicker .elementor-heading-title, .hero-kicker .elementor-heading-title { font: inherit; color: inherit; }
.elementor-widget-button .elementor-button { padding: 0; border: 0; background: transparent; color: inherit; box-shadow: none; }
.elementor-widget-button .elementor-button:hover { background: transparent; color: inherit; }
.elementor-widget-button.btn .elementor-button, .elementor-widget-button .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 13px 20px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 14px; font-weight: 800; letter-spacing: .08em; line-height: 1; text-decoration: none; }
.elementor-widget-button.btn-teal .elementor-button { background: var(--color-teal); color: var(--color-white); box-shadow: 0 16px 32px color-mix(in srgb, var(--color-teal), transparent 72%); }
.elementor-widget-button.btn-outline .elementor-button { color: var(--color-white); border-color: color-mix(in srgb, var(--color-white), transparent 42%); background: var(--veil-dark-10); }
.elementor-widget-button.btn-link .elementor-button { min-height: auto; padding: 0; background: transparent; color: var(--color-teal-deep); border: 0; box-shadow: none; }
.elementor-widget-button.btn-ink .elementor-button { background: var(--color-ink-2); color: var(--color-white); }
.title-rule { display:block; width:42px; height:2px; background:var(--color-teal); }
.title-rule .elementor-divider { display:none; }
.elementor-widget-heading.eyebrow .elementor-heading-title { margin: 0 0 10px; color: var(--color-teal-deep); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.elementor-widget-heading.section-title .elementor-heading-title, .section-title .elementor-heading-title { margin: 0; color: var(--color-ink-2); font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 48px); font-weight: 500; line-height: 1.18; letter-spacing: .02em; }
.elementor-widget-text-editor.section-copy, .section-copy .elementor-widget-container { max-width: 620px; color: var(--color-muted); font-size: clamp(15px, 1.7vw, 17px); }
.hero-actions .elementor-widget-button { width: auto; }
.service-photo, .project-photo, .post-media, .contact-photo, .curation-photo, .intro-photo, .commercial-photo { background-size: cover; background-position: center; }
.service-card > .e-con-inner, .project-card > .e-con-inner { display: contents; }
.elementor-widget-form .elementor-field-group { margin-bottom: 14px; }
.elementor-widget-form .elementor-field, .elementor-widget-form select, .elementor-widget-form textarea { min-height: 48px; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-soft); color: var(--color-ink); padding: 12px 14px; }
.elementor-widget-form textarea { min-height: 126px; }
.elementor-widget-form .elementor-button { min-height: 48px; border-radius: var(--radius-pill); background: var(--color-ink-2); color: var(--color-white); font-weight: 800; letter-spacing: .08em; }

/* Static WordPress rendering: source HTML reveal animation is JS-driven. */
.reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; filter: none !important; }
.elementor-element.reveal { opacity: 1 !important; transform: none !important; }


/* Elementor theme-kit heading overrides */
.hero h1.elementor-heading-title,
.portfolio-hero h1.elementor-heading-title,
.blog-hero h1.elementor-heading-title,
.contact-hero h1.elementor-heading-title { margin:0 !important; color:var(--color-white) !important; font-family:var(--font-display) !important; font-size:clamp(42px,5vw,72px) !important; font-weight:500 !important; line-height:1.14 !important; letter-spacing:.04em !important; text-wrap:balance; }
.hero p.elementor-heading-title,
.portfolio-hero p.elementor-heading-title,
.blog-hero p.elementor-heading-title,
.contact-hero p.elementor-heading-title { margin:0 !important; max-width:560px !important; color:color-mix(in srgb, var(--color-white), transparent 16%) !important; font-family:var(--font-body) !important; font-size:clamp(16px,1.5vw,19px) !important; font-weight:400 !important; line-height:1.95 !important; letter-spacing:.045em !important; }
.elementor-widget-heading.hero-kicker .elementor-heading-title { color:inherit !important; font-family:var(--font-body) !important; font-size:15px !important; font-weight:400 !important; line-height:1.4 !important; letter-spacing:.14em !important; }
.elementor-widget-heading.eyebrow .elementor-heading-title { color:var(--color-teal-deep) !important; font-family:var(--font-body) !important; font-size:12px !important; font-weight:700 !important; line-height:1.4 !important; letter-spacing:.18em !important; }
.elementor-widget-heading.section-title .elementor-heading-title,
.section-title .elementor-heading-title { color:var(--color-ink-2) !important; font-family:var(--font-display) !important; font-size:clamp(30px,4.2vw,48px) !important; font-weight:500 !important; line-height:1.18 !important; letter-spacing:.02em !important; }
.service-card h3.elementor-heading-title,
.advantage h3.elementor-heading-title,
.method-card h3.elementor-heading-title,
.choice-card h3.elementor-heading-title,
.prep-card h3.elementor-heading-title,
.step h3.elementor-heading-title,
.curation-item h3.elementor-heading-title,
.sidebar-card h3.elementor-heading-title { margin:0 !important; color:var(--color-ink-2) !important; font-family:var(--font-body) !important; font-size:16px !important; font-weight:700 !important; line-height:1.35 !important; letter-spacing:.06em !important; white-space:normal !important; }
.project-card h3.elementor-heading-title { margin:0 !important; color:var(--color-ink-2) !important; font-family:var(--font-body) !important; font-size:15px !important; font-weight:700 !important; line-height:1.35 !important; letter-spacing:.02em !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; text-align:center !important; }
.project-meta h3.elementor-heading-title { color:var(--color-white) !important; font-family:var(--font-display) !important; font-size:clamp(18px,1.6vw,24px) !important; font-weight:500 !important; line-height:1.3 !important; text-align:left !important; white-space:normal !important; }
.post-card h2.elementor-heading-title { margin:0 !important; color:var(--color-ink-2) !important; font-family:var(--font-display) !important; font-size:clamp(26px,3vw,38px) !important; font-weight:500 !important; line-height:1.3 !important; letter-spacing:.045em !important; }
.post-meta .elementor-heading-title { color:var(--color-teal-deep) !important; font-family:var(--font-body) !important; font-size:12px !important; font-weight:800 !important; line-height:1.4 !important; letter-spacing:.14em !important; }
.experience-card .elementor-heading-title:first-child,
.stat strong.elementor-heading-title { color:var(--color-white) !important; font-family:var(--font-display) !important; font-size:42px !important; line-height:1 !important; }
.stat span.elementor-heading-title { color:var(--color-muted) !important; font-size:13px !important; line-height:1.5 !important; }


/* Elementor nested container width normalization */
.service-card > .e-con,
.service-card > .elementor-element,
.service-card .e-con,
.service-card .elementor-widget,
.advantage .elementor-widget,
.method-card .elementor-widget,
.prep-card .elementor-widget,
.step .elementor-widget,
.curation-item .elementor-widget,
.post-body .elementor-widget,
.sidebar-card .elementor-widget { width:100% !important; max-width:100% !important; min-width:0 !important; }
.service-card > .e-con:not(.service-photo) { padding:22px !important; display:grid !important; gap:8px !important; }
.service-card .elementor-heading-title,
.advantage .elementor-heading-title,
.method-card .elementor-heading-title,
.prep-card .elementor-heading-title,
.step .elementor-heading-title { width:100% !important; overflow-wrap:normal !important; }
.service-card .elementor-widget-text-editor,
.advantage .elementor-widget-text-editor,
.method-card .elementor-widget-text-editor,
.prep-card .elementor-widget-text-editor,
.step .elementor-widget-text-editor { color:var(--color-muted) !important; font-size:14px !important; line-height:1.8 !important; }

/* Grid item stretch fixes for Elementor containers */
.service-card > .e-con:not(.service-photo),
.advantage > .e-con,
.method-card > .e-con,
.prep-card > .e-con,
.step > .e-con,
.post-card > .e-con,
.project-card > .e-con { inline-size:100% !important; width:100% !important; justify-self:stretch !important; align-self:stretch !important; }

/* High-specificity Elementor width variable override */
body .elementor .service-card > .elementor-element.e-con.e-con-full:not(.service-photo),
body .elementor .advantage > .elementor-element.e-con.e-con-full,
body .elementor .method-card > .elementor-element.e-con.e-con-full,
body .elementor .prep-card > .elementor-element.e-con.e-con-full,
body .elementor .step > .elementor-element.e-con.e-con-full { --width:100% !important; --container-widget-width:100% !important; --flex-basis:100% !important; width:100% !important; inline-size:100% !important; min-inline-size:0 !important; max-inline-size:100% !important; justify-self:stretch !important; align-self:stretch !important; }
body .elementor .service-card > .elementor-element.e-con.e-con-full:not(.service-photo) > .elementor-widget { --container-widget-width:100% !important; width:100% !important; inline-size:100% !important; }

/* Source service cards are single-column cards; neutralize Elementor container row grid. */
body .elementor .service-card { grid-template-columns:1fr !important; grid-template-rows:auto auto !important; grid-auto-flow:row !important; justify-items:stretch !important; }
body .elementor .service-card > .service-photo { width:100% !important; inline-size:100% !important; min-height:180px !important; }
body .elementor .service-card > .e-con:not(.service-photo) { width:100% !important; inline-size:100% !important; }

/* Additional page hero and card overrides */
.about-hero h1.elementor-heading-title,
.service-hero h1.elementor-heading-title,
.case-hero h1.elementor-heading-title,
.article-hero h1.elementor-heading-title { margin:0 !important; color:var(--color-white) !important; font-family:var(--font-display) !important; font-size:clamp(42px,5vw,72px) !important; font-weight:500 !important; line-height:1.14 !important; letter-spacing:.04em !important; text-wrap:balance; }
.about-hero p.elementor-heading-title,
.service-hero p.elementor-heading-title,
.case-hero p.elementor-heading-title,
.article-hero p.elementor-heading-title { margin:0 !important; max-width:560px !important; color:color-mix(in srgb, var(--color-white), transparent 16%) !important; font-family:var(--font-body) !important; font-size:clamp(16px,1.5vw,19px) !important; font-weight:400 !important; line-height:1.95 !important; letter-spacing:.045em !important; }
.designer-name.elementor-widget-heading .elementor-heading-title,
.designer-name .elementor-heading-title { color:var(--color-ink-2) !important; font-family:var(--font-display) !important; font-size:clamp(34px,4vw,54px) !important; font-weight:500 !important; line-height:1.16 !important; }
.value-card h3.elementor-heading-title,
.attitude-step h3.elementor-heading-title,
.feature-item h3.elementor-heading-title,
.reason h3.elementor-heading-title,
.process-node h3.elementor-heading-title { margin:0 !important; color:var(--color-ink-2) !important; font-family:var(--font-body) !important; font-size:16px !important; font-weight:700 !important; line-height:1.35 !important; letter-spacing:.06em !important; }
.service-board .service-card { grid-template-columns:minmax(180px,.54fr) minmax(0,.46fr) !important; grid-template-rows:auto !important; min-height:286px !important; }
.service-board .service-card > .service-copy { display:grid !important; align-content:center !important; gap:16px !important; padding:clamp(24px,3.2vw,42px) !important; width:100% !important; inline-size:100% !important; }
.service-board .service-card > .service-photo { min-height:286px !important; width:100% !important; inline-size:100% !important; }
.service-board .service-card h3.elementor-heading-title { font-family:var(--font-display) !important; font-size:clamp(24px,2.8vw,34px) !important; font-weight:500 !important; line-height:1.25 !important; letter-spacing:.06em !important; text-align:left !important; white-space:normal !important; }
.service-board .service-card .elementor-widget-text-editor { color:var(--color-muted) !important; font-size:14px !important; line-height:1.85 !important; }
.services-grid .service-card { grid-template-columns:1fr !important; grid-template-rows:auto auto !important; }

/* Portfolio card image binding for Elementor containers */
body .elementor .portfolio-grid .project-card:nth-child(1) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1755246759961.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(2) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1679730832461.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(3) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1650442107321.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(4) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1623807116941.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(5) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1585124826731.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(6) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558579317571.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(7) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558577471171.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(8) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558577523741.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(9) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558577691321.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(10) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558577991711.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(11) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558578268271.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(12) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558578690051.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(13) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558578748081.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(14) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558578800561.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(15) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558578882541.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(16) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558579273121.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-card:nth-child(17) .project-media { background: linear-gradient(180deg, transparent 42%, var(--veil-dark-58)), url("/wp-content/uploads/ejdesign-source/ejdesign/C1558577402981.jpg") center / cover no-repeat !important; }
body .elementor .portfolio-grid .project-media > .e-con:first-child { display:none !important; }

/* Home and service card image binding for Elementor containers */
body .elementor .projects-grid .project-card:nth-child(1) .project-photo { background: url("/wp-content/uploads/ejdesign-source/ej-work-modern-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .projects-grid .project-card:nth-child(2) .project-photo { background: url("/wp-content/uploads/ejdesign-source/ej-work-wabi-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .projects-grid .project-card:nth-child(3) .project-photo { background: url("/wp-content/uploads/ejdesign-source/ej-work-dark-luxury-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .projects-grid .project-card:nth-child(4) .project-photo { background: url("/wp-content/uploads/ejdesign-source/ej-work-nordic-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .projects-grid .project-card:nth-child(5) .project-photo { background: url("/wp-content/uploads/ejdesign-source/ej-work-retail-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .projects-grid .project-card:nth-child(6) .project-photo { background: url("/wp-content/uploads/ejdesign-source/ej-work-cafe-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .projects-grid .project-card:nth-child(7) .project-photo { background: url("/wp-content/uploads/ejdesign-source/ej-work-clinic-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .projects-grid .project-card:nth-child(8) .project-photo { background: url("/wp-content/uploads/ejdesign-source/ej-work-office-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .service-board .service-card:nth-child(1) .service-photo { background: linear-gradient(180deg, transparent, var(--veil-dark-12)), url("/wp-content/uploads/ejdesign-source/ej-service-residential-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .service-board .service-card:nth-child(2) .service-photo { background: linear-gradient(180deg, transparent, var(--veil-dark-12)), url("/wp-content/uploads/ejdesign-source/ej-about-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .service-board .service-card:nth-child(3) .service-photo { background: linear-gradient(180deg, transparent, var(--veil-dark-12)), url("/wp-content/uploads/ejdesign-source/ej-services-sheet-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .service-board .service-card:nth-child(4) .service-photo { background: linear-gradient(180deg, transparent, var(--veil-dark-12)), url("/wp-content/uploads/ejdesign-source/ej-service-renovation-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .service-board .service-card:nth-child(5) .service-photo { background: linear-gradient(180deg, transparent, var(--veil-dark-12)), url("/wp-content/uploads/ejdesign-source/ej-service-styling-gpt-image-2.jpg") center / cover no-repeat !important; }
body .elementor .service-board .service-card:nth-child(6) .service-photo { background: linear-gradient(180deg, transparent, var(--veil-dark-12)), url("/wp-content/uploads/ejdesign-source/ej-work-office-gpt-image-2.jpg") center / cover no-repeat !important; }