@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/young-serif-regular.woff2') format('woff2');
}


  /* ============================================================
     KWM DESIGN — full-site concept
     Palette is locked to brand spec. Do not introduce new hues.
       Brand orange ..... #F47920  (canonical)
       Orange, dark ..... #E8600A  (hover / darker variant)
       Charcoal ......... #1A1A1A
       Ink black ........ #130C0E
       Grey ............. #6D6E71
       + white / warm light-grey neutrals only

     Pages: Home · Graphic Design · Digital Marketing ·
            Automation & CRM · Our Work · About · Contact
     Content: real live-site copy (July 2026 scrape), light typo
     fixes only. Copy rewrite is a later pass.
     ============================================================ */

  :root{
    --orange:      #f47920;
    --orange-dark: #E8600A;
    --ink:         #1A1A1A;
    --ink-deep:    #130c0e;
    --grey:        #6d6e71;

    --bg:          #faf9f8;
    --bg-panel:    #ffffff;
    --bg-tint:     #f1efed;
    --text:        #1A1A1A;
    --text-2:      #6d6e71;
    --line:        #e3e0dd;
    --line-strong: #1A1A1A;

    --card-dark-bg:   #1A1A1A;
    --card-dark-text: #faf9f8;

    --btn-primary-bg:   var(--orange);
    --btn-primary-text: #1A1A1A;

    --radius: 4px;
    --pad: clamp(1.25rem, 4vw, 2.5rem);
    --shadow: 0 1px 2px rgba(19,12,14,.06), 0 8px 28px rgba(19,12,14,.07);

    --font-sans: "Instrument Sans", "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-serif: "Young Serif", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  }

  /* This concept is a deliberately light/white brand presentation —
     KWM's palette is calibrated for white backgrounds, so this site
     intentionally stays light regardless of system or viewer theme. */
  :root{ color-scheme: light; }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1,h2,h3{ text-wrap: balance; margin: 0; }
  h1,h2{ font-family: var(--font-serif); font-weight: 400; }
  p{ margin: 0; }
  a{ color: inherit; }
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--orange);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .wrap{
    max-width: 72rem;
    margin: 0 auto;
    padding-inline: var(--pad);
  }

  /* ---------- routing ---------- */


  /* ---------- shared bits ---------- */

  .eyebrow{
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .eyebrow::before{
    content: "";
    width: .55rem;
    height: .55rem;
    background: var(--orange);
    flex: none;
  }

  .section{
    padding-block: clamp(4rem, 9vw, 7rem);
  }
  .section + .section{ border-top: 1px solid var(--line); }

  .section-head{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 46rem;
    margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
  }
  .section-head h2{
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.12;
  }
  .section-head .lede{
    color: var(--text-2);
    font-size: 1.0625rem;
    max-width: 40rem;
  }

  .btn{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font: 700 .95rem/1 var(--font-sans);
    text-decoration: none;
    padding: .95rem 1.4rem;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    cursor: pointer;
  }
  .btn-primary{
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
  }
  .btn-primary:hover{ background: var(--orange-dark); }
  .btn-ghost{
    border-color: var(--line-strong);
    color: var(--text);
    background: transparent;
  }
  .btn-ghost:hover{ border-color: var(--orange); color: var(--text); }

  .tag{
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-2);
    border: 1px solid var(--line);
    padding: .3rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* ---------- header ---------- */

  .site-header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .site-header .wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.25rem;
    position: relative;
  }
  .logo{
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  .logo img{
    height: 5rem;
    width: auto;
    display: block;
  }
  .logo .dot{ color: var(--orange); }
  .logo small{
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: .65rem;
    letter-spacing: .12em;
    color: var(--text-2);
    margin-left: .6rem;
    text-transform: uppercase;
  }
  .nav{
    display: flex;
    align-items: center;
    gap: clamp(.6rem, 1.8vw, 1.5rem);
  }
  .nav a:not(.btn){
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-2);
    padding-block: .35rem;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
  }
  .nav a:not(.btn):hover{ color: var(--text); border-bottom-color: var(--orange); }
  .nav a.active{ color: var(--text); border-bottom-color: var(--orange); }
  .nav .btn{ padding: .6rem 1rem; font-size: .85rem; }

  .menu-btn{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .menu-btn-bar{
    display: block;
    width: 22px;
    height: 2px;
    background: var(--orange);
    border-radius: 1px;
    transition: transform .2s ease, opacity .15s ease;
  }
  .menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(2){ opacity: 0; }
  .menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  @media (max-width: 62rem){
    .menu-btn{ display: inline-flex; }
    .nav{
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--bg-panel);
      border-bottom: 1px solid var(--line);
      box-shadow: var(--shadow);
      padding: .5rem var(--pad) 1.25rem;
    }
    .nav.open{ display: flex; }
    .nav a:not(.btn){
      padding: .8rem 0;
      border-bottom: 1px solid var(--line);
      font-size: 1rem;
    }
    .nav a.active{ color: var(--text); border-bottom-color: var(--orange); }
    .nav .btn{ margin-top: 1rem; justify-content: center; }
  }

  /* ---------- hero (home) ---------- */

  .hero{ padding-block: clamp(3.5rem, 8vw, 6.5rem); }
  .hero .wrap{
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }
  @media (max-width: 56rem){
    .hero .wrap{ grid-template-columns: 1fr; }
  }

  .hero-copy{ display: flex; flex-direction: column; gap: 1.4rem; }
  .hero h1{
    font-size: clamp(2.4rem, 5.6vw, 4.1rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.03;
  }
  .hero h1 .accent{ color: var(--orange); }
  .hero .sub{
    color: var(--text-2);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    max-width: 34em;
  }
  .hero .sub strong{ color: var(--text); font-weight: 600; }
  .hero-ctas{ display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
  .hero-note{
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    color: var(--text-2);
    text-transform: uppercase;
  }

  /* the brand spec card — the hero's thesis object */
  .spec-card{
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 1.5rem 1.5rem 1.25rem;
    font-family: var(--font-mono);
    max-width: 24rem;
    justify-self: end;
    width: 100%;
    transform: rotate(1.2deg);
  }
  @media (max-width: 56rem){
    .spec-card{ justify-self: start; transform: rotate(0deg); }
  }
  .spec-card header{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
    padding-bottom: .8rem;
    margin-bottom: 1rem;
  }
  .spec-card header b{ color: var(--text); font-weight: 700; }
  .swatch-row{
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-block: .55rem;
  }
  .swatch-row + .swatch-row{ border-top: 1px dashed var(--line); }
  .swatch{
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 3px;
    flex: none;
    border: 1px solid var(--line);
  }
  .swatch-meta{ display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .swatch-meta .hex{ font-size: .82rem; font-weight: 700; letter-spacing: .05em; color: var(--text); }
  .swatch-meta .name{ font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
  .spec-card footer{
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-2);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  .spec-card footer b{ color: var(--orange-dark); font-weight: 700; }

  /* ---------- page hero (inner pages) ---------- */

  .page-hero{
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
    border-bottom: 1px solid var(--line);
  }
  .page-hero .wrap{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .page-hero h1{
    font-size: clamp(2rem, 4.6vw, 3.3rem);
    font-weight: 400;
    letter-spacing: -0.028em;
    line-height: 1.06;
    max-width: 22em;
  }
  .page-hero h1 .accent{ color: var(--orange); }
  .page-hero .sub{
    color: var(--text-2);
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    max-width: 44rem;
  }
  .page-hero .hero-ctas{ margin-top: .2rem; }
  .page-hero .wrap.hero-with-icon{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
  }
  .page-hero .hero-text{ display: flex; flex-direction: column; gap: 1.25rem; }
  .page-hero .hero-icon{ flex: none; width: 10.5rem; height: 10.5rem; }
  @media (max-width: 40rem){
    .page-hero .wrap.hero-with-icon{ flex-direction: column-reverse; align-items: flex-start; }
    .page-hero .hero-icon{ width: 6.5rem; height: 6.5rem; }
  }

  /* ---------- success / confirmation page ---------- */
  .success-hero{
    padding-block: clamp(4.5rem, 10vw, 7.5rem);
    text-align: center;
  }
  .success-hero .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  .success-check{
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--orange);
    color: #1A1A1A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: .5rem;
  }
  .success-hero h1{
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    font-weight: 400;
    letter-spacing: -0.028em;
    line-height: 1.08;
    max-width: 20em;
  }
  .success-hero .sub{
    color: var(--text-2);
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    max-width: 38rem;
  }
  .success-hero .btn{ margin-top: .75rem; }

  /* feature strip — short offer list under a page hero */
  .feature-strip{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem 2rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
  }
  @media (max-width: 44rem){ .feature-strip{ grid-template-columns: 1fr; } }
  .feature-strip .feat{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--orange);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  /* ---------- selected work ---------- */

  .work-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1.25rem;
  }
  @media (max-width: 56rem){ .work-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 36rem){ .work-grid{ grid-template-columns: 1fr; } }

  .work-card{
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .work-card:hover{
    transform: translateY(-3px);
    border-color: var(--orange);
    box-shadow: var(--shadow);
  }
  .work-visual{
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    user-select: none;
  }
  .work-visual .mark{ font-size: clamp(2.2rem, 4.5vw, 3rem); text-align: center; }
  .work-visual .work-logo{ max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain; }
  .wv-light{ background: var(--bg-tint); color: var(--text); }
  .wv-dark{ background: var(--card-dark-bg); color: var(--card-dark-text); }
  .wv-orange{ background: var(--orange); color: #1A1A1A; }
  .work-visual .o{ color: var(--orange); }
  .wv-orange .o{ color: #ffffff; }
  .work-visual .sub-mark{
    display: block;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: .62rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    margin-top: .7rem;
    opacity: .7;
  }
  .work-meta{
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--line);
  }
  .work-meta .row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }
  .work-meta h3{ font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
  .work-meta p{ color: var(--text-2); font-size: .9rem; line-height: 1.45; }

  .work-note{
    margin-top: 1.5rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--text-2);
  }

  /* featured case study (Our Work page) */
  .case-feature{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
  }
  @media (max-width: 52rem){ .case-feature{ grid-template-columns: 1fr; } }
  .case-feature .work-visual{ aspect-ratio: auto; min-height: 16rem; }
  .case-copy{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-left: 1px solid var(--line);
  }
  @media (max-width: 52rem){ .case-copy{ border-left: 0; border-top: 1px solid var(--line); } }
  .case-copy .row{ display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
  .case-copy h3{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -0.015em; }
  .case-copy p{ color: var(--text-2); }

  /* ---------- services ---------- */

  .services-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.5rem;
    align-items: start;
  }
  @media (max-width: 52rem){ .services-grid{ grid-template-columns: 1fr; } }

  .service-cluster{
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
  }
  .cluster-head{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: 1.25rem;
    margin-bottom: .5rem;
    border-bottom: 2px solid var(--orange);
  }
  .cluster-head h3{ font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; }
  .cluster-head p{ color: var(--text-2); font-size: .92rem; }

  .service-list{ list-style: none; margin: 0; padding: 0; }
  .service-list li{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .9rem;
    padding-block: 1rem;
  }
  .service-list li + li{ border-top: 1px solid var(--line); }
  .service-icon-slot{
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: .1rem;
  }
  .service-icon-slot .service-icon{ width: 2.5rem; height: 2.5rem; }
  .service-text{ display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
  .service-list h4{
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .service-list p{ color: var(--text-2); font-size: .92rem; line-height: 1.5; }

  .cluster-link{
    display: inline-block;
    margin-top: 1.1rem;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    color: var(--text);
    border-bottom: 2px solid var(--orange);
    padding-bottom: .1rem;
  }
  .cluster-link:hover{ border-bottom-color: var(--orange-dark); }

  /* 2×2 service cards (inner service pages) */
  .svc-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.25rem;
  }
  @media (max-width: 44rem){ .svc-grid{ grid-template-columns: 1fr; } }
  .svc-card{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--orange);
    border-radius: 6px;
    padding: clamp(1.4rem, 2.6vw, 1.9rem);
  }
  .svc-icon{ width: 2.5rem; height: 2.5rem; margin-bottom: .25rem; }
  .svc-card h3{ font-size: 1.15rem; font-weight: 800; letter-spacing: -0.012em; }
  .svc-card p{ color: var(--text-2); font-size: .95rem; }

  /* ---------- about ---------- */

  .about .wrap{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  @media (max-width: 52rem){ .about .wrap{ grid-template-columns: 1fr; } }

  .about-rail{ display: flex; flex-direction: column; gap: 1.25rem; }
  .about-rail h2{
    font-size: clamp(1.75rem, 3.4vw, 2.4rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.12;
  }
  .about-rail .standard{
    border-left: 3px solid var(--orange);
    padding: .8rem 0 .8rem 1.1rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text);
  }

  .about-body{ display: flex; flex-direction: column; gap: 1.1rem; max-width: 42rem; }
  .about-body p{ color: var(--text-2); }
  .about-body p strong{ color: var(--text); font-weight: 600; }
  .about-body .turn{
    color: var(--text);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
  }
  .about-body .hero-ctas{ margin-top: .4rem; }

  /* ---------- credibility strip ---------- */

  .cred{
    background: var(--bg-panel);
    color: var(--text);
    border-block: 1px solid var(--line);
  }
  .cred .wrap{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem;
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
  }
  @media (max-width: 44rem){ .cred .wrap{ grid-template-columns: 1fr; } }
  .stat{
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--orange);
  }
  .stat .num{
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .stat .num .o{ color: var(--orange); }
  .stat .label{
    font-size: .88rem;
    color: var(--text-2);
  }
  .cred-note{
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-2) 80%, transparent);
  }

  /* ---------- CTA band (inner pages) ---------- */

  .cta-band{
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--orange);
    border-radius: 6px;
    padding: clamp(1.75rem, 4.5vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2.5rem;
  }
  .cta-band .cta-copy{ display: flex; flex-direction: column; gap: .5rem; max-width: 38rem; }
  .cta-band h2{
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.15;
  }
  .cta-band p{ color: var(--text-2); }

  /* ---------- blog ---------- */
  .post-grid{ display: flex; flex-direction: column; gap: 1.25rem; }
  .post-card{
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--orange);
    border-radius: 6px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease;
  }
  .post-card:hover{ border-color: var(--orange); }
  .post-card .row{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .post-card h3{ font-size: 1.3rem; font-weight: 400; letter-spacing: -0.015em; }
  .post-meta{
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .post-card p{ color: var(--text-2); }
  .post-card .read-more{ font-weight: 700; font-size: .9rem; color: var(--orange); }

  .article-body{ display: flex; flex-direction: column; gap: 1.3rem; max-width: 42rem; }
  .article-body p{ color: var(--text); line-height: 1.75; }
  .article-byline{
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .article-back{ font-weight: 700; font-size: .9rem; }

  /* ---------- contact / booking ---------- */

  .contact-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.5rem;
    align-items: stretch;
  }
  @media (max-width: 52rem){ .contact-grid{ grid-template-columns: 1fr; } }

  .contact-panel{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: clamp(1.5rem, 3vw, 2rem);
  }
  .contact-panel h3{ font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; }
  .contact-panel > p{ color: var(--text-2); font-size: .95rem; }

  .hs-meetings-embed{ flex: 1; min-height: 15rem; }
  .hs-meetings-embed .meetings-iframe-container iframe{ border-radius: 6px; }

  .hs-form-embed{ flex: 1; min-height: 15rem; }
  .hs-form-embed .hs-form input[type="text"],
  .hs-form-embed .hs-form input[type="email"],
  .hs-form-embed .hs-form input[type="tel"],
  .hs-form-embed .hs-form textarea{
    font-family: var(--font-sans);
    font-size: .95rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    width: 100%;
    background: var(--bg-panel);
    color: var(--text);
  }
  .hs-form-embed .hs-form label{
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: .3rem;
    display: inline-block;
  }
  .hs-form-embed .hs-form .hs-button{
    font: 700 .95rem/1 var(--font-sans);
    background: var(--orange);
    color: #1A1A1A;
    border: none;
    border-radius: var(--radius);
    padding: .95rem 1.4rem;
    cursor: pointer;
  }
  .hs-form-embed .hs-form .hs-button:hover{ background: var(--orange-dark); }
  .hs-form-embed .hs-form fieldset{ max-width: none; }

  .embed-slot{
    flex: 1;
    min-height: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    text-align: center;
    border: 1.5px dashed var(--line);
    border-radius: 6px;
    background: var(--bg-tint);
    padding: 2rem 1.5rem;
  }
  .embed-slot svg{ width: 2.2rem; height: 2.2rem; stroke: var(--orange); }
  .embed-slot .slot-title{ font-weight: 700; font-size: .95rem; }
  .embed-slot .slot-caption{
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
  }

  .contact-direct{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: .95rem;
    color: var(--text-2);
  }
  .contact-direct a{ color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--orange); }
  .contact-direct a:hover{ border-bottom-color: var(--orange-dark); }

  /* ---------- footer ---------- */

  .site-footer{
    border-top: 1px solid var(--line);
    padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
    background: var(--bg-panel);
  }
  .foot-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 2rem 2.5rem;
    padding-bottom: 2rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 56rem){ .foot-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 36rem){ .foot-grid{ grid-template-columns: 1fr; } }
  .foot-brand{ display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
  .foot-brand p{ color: var(--text-2); font-size: .9rem; max-width: 22rem; }
  .foot-col h4{
    margin: 0 0 .9rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .foot-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
  .foot-col li{ font-size: .9rem; color: var(--text-2); }
  .foot-col a{ color: var(--text-2); text-decoration: none; }
  .foot-col a:hover{ color: var(--text); }
  .foot-col a.active{ color: var(--text); font-weight: 600; }
  .foot-bottom{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    align-items: baseline;
    justify-content: space-between;
    font-size: .85rem;
    color: var(--text-2);
  }
  .footer-swatches{ display: inline-flex; gap: .3rem; vertical-align: middle; }
  .footer-swatches i{ width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }

  /* ---------- motion ---------- */

  .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.in{ opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .reveal{ opacity: 1; transform: none; transition: none; }
    .work-card, .btn{ transition: none; }
  }