<style>
  :root {<br />
    /* IDD brand palette */<br />
    --black: #0a0a0a;<br />
    --black-2: #141414;<br />
    --black-3: #1c1c1c;<br />
    --ivory: #f6f1e8;     /* warm off-white */<br />
    --bone: #ebe4d4;      /* deeper cream */<br />
    --white: #ffffff;<br />
    --ink: #14110b;<br />
    --ink-soft: #4a4438;<br />
    --ink-mute: #8a8170;<br />
    --gold: #c9a961;      /* IDD signature champagne gold */<br />
    --gold-2: #b8993f;    /* deeper gold */<br />
    --gold-soft: #e0c989; /* light gold */<br />
    --gold-glow: rgba(201, 169, 97, 0.25);<br />
    --line-gold: rgba(201, 169, 97, 0.35);<br />
    --line-light: rgba(20, 17, 11, 0.10);<br />
    --line-dark: rgba(246, 241, 232, 0.10);</p>
<p>    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;<br />
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;<br />
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;<br />
  }</p>
<p>  @font-face { font-family: 'Fraunces'; font-display: swap; src: local('Fraunces'); }<br />
  @font-face { font-family: 'Inter'; font-display: swap; src: local('Inter'); }</p>
<p>  * { margin: 0; padding: 0; box-sizing: border-box; }<br />
  html { scroll-behavior: smooth; }<br />
  body {<br />
    background: var(--ivory);<br />
    color: var(--ink);<br />
    font-family: var(--sans);<br />
    font-weight: 300;<br />
    line-height: 1.7;<br />
    overflow-x: hidden;<br />
    -webkit-font-smoothing: antialiased;<br />
  }<br />
  img { display: block; max-width: 100%; }</p>
<p>  /* Image fallback so missing images never leave empty holes */<br />
  .img-wrap {<br />
    background: linear-gradient(135deg, var(--bone) 0%, var(--gold-soft) 100%);<br />
  }</p>
<p>  .section {<br />
    position: relative;<br />
    padding: clamp(80px, 12vw, 160px) clamp(24px, 6vw, 120px);<br />
  }</p>
<p>  .eyebrow {<br />
    font-family: var(--mono);<br />
    font-size: 11px;<br />
    font-weight: 500;<br />
    letter-spacing: 0.3em;<br />
    text-transform: uppercase;<br />
    color: var(--gold);<br />
    display: inline-flex;<br />
    align-items: center;<br />
    gap: 14px;<br />
    margin-bottom: 28px;<br />
  }<br />
  .eyebrow::before {<br />
    content: '';<br />
    width: 32px;<br />
    height: 1px;<br />
    background: var(--gold);<br />
  }</p>
<p>  h1, h2, h3, h4 {<br />
    font-family: var(--serif);<br />
    font-weight: 300;<br />
    letter-spacing: -0.02em;<br />
    line-height: 1.05;<br />
    color: var(--ink);<br />
  }</p>
<p>  .display { font-size: clamp(56px, 9vw, 140px); line-height: 0.92; }<br />
  .h2 { font-size: clamp(40px, 5.5vw, 76px); }<br />
  .h3 { font-size: clamp(28px, 3vw, 42px); }</p>
<p>  p.lede {<br />
    font-family: var(--serif);<br />
    font-size: clamp(20px, 2.2vw, 30px);<br />
    font-style: italic;<br />
    color: var(--ink-soft);<br />
    font-weight: 300;<br />
    line-height: 1.45;<br />
  }</p>
<p>  /* ====================================================<br />
     COVER — cinematic black with logo<br />
     ==================================================== */<br />
  .cover {<br />
    background: var(--black);<br />
    color: var(--ivory);<br />
    min-height: 100vh;<br />
    display: flex;<br />
    flex-direction: column;<br />
    justify-content: space-between;<br />
    padding: clamp(32px, 4vw, 56px) clamp(24px, 6vw, 80px);<br />
    position: relative;<br />
    overflow: hidden;<br />
  }<br />
  .cover::before {<br />
    content: '';<br />
    position: absolute;<br />
    top: -300px; right: -300px;<br />
    width: 800px; height: 800px;<br />
    background: radial-gradient(circle, var(--gold-glow), transparent 70%);<br />
    pointer-events: none;<br />
  }<br />
  .cover::after {<br />
    content: '';<br />
    position: absolute;<br />
    bottom: -200px; left: -200px;<br />
    width: 600px; height: 600px;<br />
    background: radial-gradient(circle, rgba(201, 169, 97, 0.08), transparent 70%);<br />
    pointer-events: none;<br />
  }</p>
<p>  .cover-top {<br />
    display: flex;<br />
    justify-content: space-between;<br />
    align-items: flex-start;<br />
    position: relative;<br />
    z-index: 2;<br />
  }<br />
  .cover h1, .cover h2, .cover h3, .cover h4 { color: var(--ivory); }</p>
<p>  /* IDD logo block — preserved intact */<br />
  .idd-logo {<br />
    display: flex;<br />
    align-items: center;<br />
    gap: 16px;<br />
  }<br />
  .idd-logo img {<br />
    height: 56px;<br />
    width: auto;<br />
  }<br />
  .idd-logo .fallback {<br />
    /* Shows if the real logo image fails — keeps the brand visible */<br />
    display: flex;<br />
    align-items: center;<br />
    gap: 14px;<br />
  }<br />
  .idd-badge {<br />
    width: 56px;<br />
    height: 56px;<br />
    border: 1.5px solid var(--gold);<br />
    border-radius: 50%;<br />
    display: flex;<br />
    align-items: center;<br />
    justify-content: center;<br />
    font-family: var(--serif);<br />
    font-size: 18px;<br />
    font-weight: 500;<br />
    letter-spacing: 0.05em;<br />
    color: var(--gold);<br />
  }<br />
  .idd-wordmark {<br />
    font-family: var(--serif);<br />
    font-size: 14px;<br />
    letter-spacing: 0.4em;<br />
    text-transform: uppercase;<br />
    color: var(--ivory);<br />
  }<br />
  .idd-wordmark .gold { color: var(--gold); }</p>
<p>  .cover-meta {<br />
    text-align: right;<br />
    font-family: var(--mono);<br />
    font-size: 11px;<br />
    letter-spacing: 0.25em;<br />
    text-transform: uppercase;<br />
    color: var(--ink-mute);<br />
  }<br />
  .cover-meta div { margin-bottom: 10px; }<br />
  .cover-meta span {<br />
    display: block;<br />
    color: var(--ivory);<br />
    font-family: var(--serif);<br />
    font-style: italic;<br />
    font-size: 14px;<br />
    letter-spacing: 0.05em;<br />
    text-transform: none;<br />
    margin-top: 4px;<br />
  }</p>
<p>  .cover-center {<br />
    position: relative;<br />
    z-index: 2;<br />
    max-width: 1100px;<br />
  }<br />
  .cover-center .eyebrow { margin-bottom: 40px; }<br />
  .cover-center h1 {<br />
    font-family: var(--serif);<br />
    font-size: clamp(48px, 8vw, 130px);<br />
    font-weight: 300;<br />
    line-height: 0.95;<br />
  }<br />
  .cover-center h1 em {<br />
    font-style: italic;<br />
    color: var(--gold);<br />
  }<br />
  .cover-center .lede {<br />
    margin-top: 36px;<br />
    max-width: 620px;<br />
    color: rgba(246, 241, 232, 0.75);<br />
  }</p>
<p>  .cover-bottom {<br />
    display: flex;<br />
    justify-content: space-between;<br />
    align-items: flex-end;<br />
    flex-wrap: wrap;<br />
    gap: 32px;<br />
    position: relative;<br />
    z-index: 2;<br />
  }<br />
  .prepared-for {<br />
    border-left: 2px solid var(--gold);<br />
    padding-left: 24px;<br />
  }<br />
  .prepared-for .label {<br />
    font-family: var(--mono);<br />
    font-size: 10px;<br />
    letter-spacing: 0.3em;<br />
    text-transform: uppercase;<br />
    color: var(--gold);<br />
    margin-bottom: 12px;<br />
  }<br />
  .prepared-for .name {<br />
    font-family: var(--serif);<br />
    font-size: clamp(28px, 3vw, 42px);<br />
    font-style: italic;<br />
    font-weight: 300;<br />
    line-height: 1.1;<br />
    color: var(--ivory);<br />
  }<br />
  .prepared-for .sub {<br />
    margin-top: 8px;<br />
    font-family: var(--serif);<br />
    font-style: italic;<br />
    color: var(--ink-mute);<br />
  }<br />
  .scroll-cue {<br />
    font-family: var(--mono);<br />
    font-size: 10px;<br />
    letter-spacing: 0.3em;<br />
    text-transform: uppercase;<br />
    color: var(--ink-mute);<br />
    display: flex;<br />
    flex-direction: column;<br />
    align-items: center;<br />
    gap: 10px;<br />
  }<br />
  .scroll-cue::after {<br />
    content: '';<br />
    width: 1px;<br />
    height: 50px;<br />
    background: linear-gradient(180deg, var(--gold), transparent);<br />
    animation: pulse 2.4s ease-in-out infinite;<br />
  }<br />
  @keyframes pulse {<br />
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }<br />
    50% { opacity: 1; transform: scaleY(1); }<br />
  }</p>
<p>  /* ====================================================<br />
     LETTER<br />
     ==================================================== */<br />
  .letter {<br />
    background: var(--white);<br />
    padding: clamp(80px, 12vw, 160px) clamp(24px, 6vw, 120px);<br />
  }<br />
  .letter-grid {<br />
    display: grid;<br />
    grid-template-columns: 1fr 1.6fr;<br />
    gap: clamp(40px, 8vw, 100px);<br />
    align-items: start;<br />
    max-width: 1400px;<br />
    margin: 0 auto;<br />
  }<br />
  .letter-side .label {<br />
    font-family: var(--mono);<br />
    font-size: 10px;<br />
    letter-spacing: 0.3em;<br />
    text-transform: uppercase;<br />
    color: var(--gold);<br />
    margin-bottom: 16px;<br />
  }<br />
  .letter-side h3 {<br />
    font-style: italic;<br />
    font-size: clamp(32px, 3vw, 44px);<br />
    line-height: 1.1;<br />
  }<br />
  .letter-body p {<br />
    font-family: var(--serif);<br />
    font-size: clamp(18px, 1.6vw, 22px);<br />
    line-height: 1.65;<br />
    color: var(--ink-soft);<br />
    margin-bottom: 22px;<br />
    font-weight: 300;<br />
  }<br />
  .letter-body p:first-child::first-letter {<br />
    font-family: var(--serif);<br />
    font-size: 5em;<br />
    float: left;<br />
    line-height: 0.85;<br />
    padding: 8px 14px 0 0;<br />
    color: var(--gold);<br />
    font-style: italic;<br />
  }<br />
  .signature {<br />
    margin-top: 40px;<br />
    padding-top: 28px;<br />
    border-top: 1px solid var(--line-light);<br />
  }<br />
  .signature-name {<br />
    font-family: var(--serif);<br />
    font-style: italic;<br />
    font-size: 26px;<br />
    color: var(--ink);<br />
  }<br />
  .signature-title {<br />
    font-family: var(--mono);<br />
    font-size: 11px;<br />
    letter-spacing: 0.25em;<br />
    text-transform: uppercase;<br />
    color: var(--ink-mute);<br />
    margin-top: 6px;<br />
  }</p>
<p>  /* ====================================================<br />
     REACH — the big numbers (the audience the supplier is buying)<br />
     ==================================================== */<br />
  .reach {<br />
    background: var(--black);<br />
    color: var(--ivory);<br />
    padding: clamp(80px, 12vw, 160px) clamp(24px, 6vw, 120px);<br />
  }<br />
  .reach h2, .reach h3 { color: var(--ivory); }<br />
  .reach-head {<br />
    max-width: 800px;<br />
    margin-bottom: 80px;<br />
  }<br />
  .reach-head .lede { color: rgba(246, 241, 232, 0.7); margin-top: 24px; }</p>
<p>  .reach-grid {<br />
    display: grid;<br />
    grid-template-columns: repeat(4, 1fr);<br />
    gap: 1px;<br />
    background: var(--line-dark);<br />
    border-top: 1px solid var(--line-dark);<br />
    border-bottom: 1px solid var(--line-dark);<br />
  }<br />
  .reach-stat {<br />
    background: var(--black);<br />
    padding: 56px 32px;<br />
    transition: background 0.4s ease;<br />
  }<br />
  .reach-stat:hover { background: var(--black-2); }<br />
  .reach-stat .num {<br />
    font-family: var(--serif);<br />
    font-size: clamp(56px, 6vw, 92px);<br />
    color: var(--gold);<br />
    line-height: 1;<br />
    font-weight: 300;<br />
    letter-spacing: -0.02em;<br />
  }<br />
  .reach-stat .num em { font-style: italic; }<br />
  .reach-stat .num small {<br />
    font-size: 0.45em;<br />
    color: var(--gold-soft);<br />
    margin-left: 6px;<br />
    letter-spacing: 0;<br />
  }<br />
  .reach-stat .label {<br />
    margin-top: 20px;<br />
    font-family: var(--mono);<br />
    font-size: 11px;<br />
    letter-spacing: 0.2em;<br />
    text-transform: uppercase;<br />
    color: rgba(246, 241, 232, 0.65);<br />
  }<br />
  .reach-stat .desc {<br />
    margin-top: 8px;<br />
    font-family: var(--serif);<br />
    font-style: italic;<br />
    color: rgba(246, 241, 232, 0.5);<br />
    font-size: 14px;<br />
    line-height: 1.5;<br />
  }</p>
<p>  /* ====================================================<br />
     STRATEGY — the 4 pillars<br />
     ==================================================== */<br />
  .strategy { background: var(--ivory); }<br />
  .strategy-head {<br />
    max-width: 900px;<br />
    margin-bottom: 80px;<br />
  }<br />
  .pillars {<br />
    display: grid;<br />
    grid-template-columns: repeat(2, 1fr);<br />
    gap: 1px;<br />
    background: var(--line-light);<br />
    border: 1px solid var(--line-light);<br />
  }<br />
  .pillar {<br />
    background: var(--ivory);<br />
    padding: 56px 48px;<br />
    position: relative;<br />
    transition: background 0.4s ease;<br />
  }<br />
  .pillar:hover { background: var(--white); }<br />
  .pillar .num {<br />
    font-family: var(--serif);<br />
    font-style: italic;<br />
    font-size: 14px;<br />
    color: var(--gold);<br />
    margin-bottom: 16px;<br />
  }<br />
  .pillar h3 {<br />
    font-size: clamp(26px, 2.5vw, 34px);<br />
    margin-bottom: 16px;<br />
    font-weight: 400;<br />
  }<br />
  .pillar h3 em { color: var(--gold); font-style: italic; }<br />
  .pillar p {<br />
    color: var(--ink-soft);<br />
    font-size: 15px;<br />
    line-height: 1.7;<br />
    margin-bottom: 20px;<br />
  }<br />
  .pillar ul {<br />
    list-style: none;<br />
    padding: 0;<br />
    margin-top: 20px;<br />
    border-top: 1px solid var(--line-light);<br />
    padding-top: 20px;<br />
  }<br />
  .pillar li {<br />
    display: flex;<br />
    gap: 12px;<br />
    align-items: baseline;<br />
    padding: 8px 0;<br />
    font-family: var(--mono);<br />
    font-size: 12px;<br />
    letter-spacing: 0.05em;<br />
    color: var(--ink-soft);<br />
    text-transform: uppercase;<br />
  }<br />
  .pillar li::before {<br />
    content: '+';<br />
    color: var(--gold);<br />
    font-weight: 500;<br />
  }</p>
<p>  /* ====================================================<br />
     DELIVERABLES — what the supplier actually gets<br />
     ==================================================== */<br />
  .deliverables {<br />
    background: var(--white);<br />
  }<br />
  .deliverables-head {<br />
    max-width: 900px;<br />
    margin-bottom: 60px;<br />
  }<br />
  .deliverable-grid {<br />
    display: grid;<br />
    grid-template-columns: repeat(3, 1fr);<br />
    gap: 24px;<br />
  }<br />
  .deliverable-card {<br />
    background: var(--ivory);<br />
    padding: 40px 32px;<br />
    border: 1px solid var(--line-light);<br />
    position: relative;<br />
    transition: all 0.4s ease;<br />
  }<br />
  .deliverable-card:hover {<br />
    border-color: var(--gold);<br />
    transform: translateY(-4px);<br />
    box-shadow: 0 20px 40px -20px var(--gold-glow);<br />
  }<br />
  .deliverable-card .qty {<br />
    font-family: var(--serif);<br />
    font-size: 56px;<br />
    line-height: 1;<br />
    color: var(--gold);<br />
    font-weight: 300;<br />
    margin-bottom: 12px;<br />
  }<br />
  .deliverable-card .qty small {<br />
    font-size: 14px;<br />
    color: var(--ink-mute);<br />
    margin-left: 6px;<br />
    font-family: var(--mono);<br />
    letter-spacing: 0.1em;<br />
    text-transform: uppercase;<br />
  }<br />
  .deliverable-card h4 {<br />
    font-size: 22px;<br />
    margin-bottom: 10px;<br />
    font-weight: 400;<br />
  }<br />
  .deliverable-card p {<br />
    color: var(--ink-soft);<br />
    font-size: 14px;<br />
    line-height: 1.6;<br />
  }<br />
  .deliverable-card .tag {<br />
    position: absolute;<br />
    top: 24px; right: 24px;<br />
    font-family: var(--mono);<br />
    font-size: 9px;<br />
    letter-spacing: 0.2em;<br />
    text-transform: uppercase;<br />
    color: var(--gold);<br />
    padding: 4px 10px;<br />
    border: 1px solid var(--line-gold);<br />
    border-radius: 99px;<br />
  }</p>
<p>  /* ====================================================<br />
     ROADMAP — 90 day timeline<br />
     ==================================================== */<br />
  .roadmap {<br />
    background: var(--black-2);<br />
    color: var(--ivory);<br />
  }<br />
  .roadmap h2, .roadmap h3, .roadmap h4 { color: var(--ivory); }<br />
  .roadmap-head { max-width: 900px; margin-bottom: 80px; }<br />
  .roadmap-head .lede { color: rgba(246, 241, 232, 0.65); }</p>
<p>  .roadmap-track {<br />
    display: grid;<br />
    grid-template-columns: repeat(4, 1fr);<br />
    gap: 0;<br />
    position: relative;<br />
  }<br />
  .roadmap-track::before {<br />
    content: '';<br />
    position: absolute;<br />
    top: 24px;<br />
    left: 0; right: 0;<br />
    height: 1px;<br />
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 50%, transparent 100%);<br />
  }<br />
  .phase {<br />
    padding: 0 24px;<br />
    position: relative;<br />
  }<br />
  .phase::before {<br />
    content: '';<br />
    width: 16px;<br />
    height: 16px;<br />
    background: var(--gold);<br />
    border-radius: 50%;<br />
    position: absolute;<br />
    top: 16px; left: 24px;<br />
    box-shadow: 0 0 0 4px var(--black-2);<br />
  }<br />
  .phase .when {<br />
    margin-top: 56px;<br />
    font-family: var(--mono);<br />
    font-size: 10px;<br />
    letter-spacing: 0.3em;<br />
    text-transform: uppercase;<br />
    color: var(--gold);<br />
    margin-bottom: 8px;<br />
  }<br />
  .phase h4 {<br />
    font-size: 22px;<br />
    margin-bottom: 14px;<br />
    font-weight: 400;<br />
    line-height: 1.2;<br />
  }<br />
  .phase p {<br />
    font-size: 14px;<br />
    color: rgba(246, 241, 232, 0.7);<br />
    line-height: 1.6;<br />
  }</p>
<p>  /* ====================================================<br />
     INVESTMENT<br />
     ==================================================== */<br />
  .investment { background: var(--white); }<br />
  .invest-wrap { max-width: 1100px; margin: 0 auto; }<br />
  .invest-head { margin-bottom: 60px; }</p>
<p>  .invest-headline {<br />
    background: var(--black);<br />
    color: var(--ivory);<br />
    padding: 56px 48px;<br />
    margin-bottom: 48px;<br />
    position: relative;<br />
    overflow: hidden;<br />
  }<br />
  .invest-headline::before {<br />
    content: '';<br />
    position: absolute;<br />
    top: 0; right: 0;<br />
    width: 240px; height: 240px;<br />
    background: radial-gradient(circle, var(--gold-glow), transparent 70%);<br />
  }<br />
  .invest-headline > * { position: relative; z-index: 2; }<br />
  .invest-headline .package-name {<br />
    font-family: var(--mono);<br />
    font-size: 11px;<br />
    letter-spacing: 0.3em;<br />
    text-transform: uppercase;<br />
    color: var(--gold);<br />
    margin-bottom: 16px;<br />
  }<br />
  .invest-headline .package-title {<br />
    font-family: var(--serif);<br />
    font-size: clamp(36px, 4vw, 56px);<br />
    font-weight: 300;<br />
    color: var(--ivory);<br />
    line-height: 1.05;<br />
  }<br />
  .invest-headline .package-title em { color: var(--gold); font-style: italic; }<br />
  .invest-headline .price-row {<br />
    margin-top: 32px;<br />
    display: flex;<br />
    align-items: baseline;<br />
    gap: 20px;<br />
    flex-wrap: wrap;<br />
  }<br />
  .invest-headline .price {<br />
    font-family: var(--serif);<br />
    font-size: clamp(60px, 7vw, 100px);<br />
    color: var(--gold);<br />
    font-weight: 300;<br />
    line-height: 1;<br />
  }<br />
  .invest-headline .price-sub {<br />
    font-family: var(--serif);<br />
    font-style: italic;<br />
    font-size: 18px;<br />
    color: rgba(246, 241, 232, 0.7);<br />
  }</p>
<p>  .invest-table {<br />
    border-top: 1px solid var(--line-light);<br />
  }<br />
  .invest-row {<br />
    display: grid;<br />
    grid-template-columns: 1fr auto auto;<br />
    gap: 32px;<br />
    padding: 24px 0;<br />
    border-bottom: 1px solid var(--line-light);<br />
    align-items: baseline;<br />
  }<br />
  .invest-row .item-name { font-family: var(--serif); font-size: 19px; }<br />
  .invest-row .item-desc {<br />
    font-family: var(--serif);<br />
    font-style: italic;<br />
    color: var(--ink-mute);<br />
    font-size: 14px;<br />
    margin-top: 4px;<br />
    grid-column: 1;<br />
  }<br />
  .invest-row .qty {<br />
    font-family: var(--mono);<br />
    font-size: 12px;<br />
    color: var(--ink-mute);<br />
    letter-spacing: 0.1em;<br />
    text-align: right;<br />
  }<br />
  .invest-row .total {<br />
    font-family: var(--serif);<br />
    color: var(--ink);<br />
    font-size: 18px;<br />
    text-align: right;<br />
    font-variant-numeric: tabular-nums;<br />
    min-width: 100px;<br />
  }<br />
  .invest-row.included .total {<br />
    color: var(--gold);<br />
    font-style: italic;<br />
    font-size: 14px;<br />
  }<br />
  .invest-totals {<br />
    margin-top: 32px;<br />
    display: flex;<br />
    flex-direction: column;<br />
    align-items: flex-end;<br />
    gap: 12px;<br />
  }<br />
  .invest-totals .row {<br />
    display: flex; gap: 60px;<br />
    align-items: baseline;<br />
  }<br />
  .invest-totals .label {<br />
    font-family: var(--mono);<br />
    color: var(--ink-mute);<br />
    font-size: 11px;<br />
    letter-spacing: 0.2em;<br />
    text-transform: uppercase;<br />
  }<br />
  .invest-totals .val {<br />
    font-family: var(--serif);<br />
    font-size: 22px;<br />
    min-width: 140px;<br />
    text-align: right;<br />
    font-variant-numeric: tabular-nums;<br />
  }<br />
  .invest-totals .grand .label { color: var(--gold); }<br />
  .invest-totals .grand .val {<br />
    font-size: 44px;<br />
    color: var(--gold);<br />
    font-weight: 300;<br />
  }<br />
  .invest-totals .grand {<br />
    padding-top: 20px;<br />
    margin-top: 8px;<br />
    border-top: 1px solid var(--line-gold);<br />
    width: 100%;<br />
    justify-content: flex-end;<br />
  }</p>
<p>  /* ====================================================<br />
     COMPARE — soft upsell<br />
     ==================================================== */<br />
  .compare {<br />
    background: var(--ivory);<br />
  }<br />
  .compare-head { max-width: 900px; margin-bottom: 60px; }<br />
  .compare-grid {<br />
    display: grid;<br />
    grid-template-columns: repeat(4, 1fr);<br />
    gap: 16px;<br />
  }<br />
  .tier {<br />
    background: var(--white);<br />
    padding: 36px 28px;<br />
    border: 1px solid var(--line-light);<br />
    position: relative;<br />
    transition: all 0.3s ease;<br />
  }<br />
  .tier:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(0,0,0,0.1); }<br />
  .tier.featured {<br />
    background: var(--black);<br />
    color: var(--ivory);<br />
    border-color: var(--gold);<br />
  }<br />
  .tier.featured h4 { color: var(--ivory); }<br />
  .tier.featured .price { color: var(--gold); }<br />
  .tier.featured ul li { color: rgba(246, 241, 232, 0.8); }<br />
  .tier.featured .featured-tag {<br />
    position: absolute;<br />
    top: -12px; left: 50%;<br />
    transform: translateX(-50%);<br />
    background: var(--gold);<br />
    color: var(--black);<br />
    font-family: var(--mono);<br />
    font-size: 9px;<br />
    letter-spacing: 0.25em;<br />
    text-transform: uppercase;<br />
    padding: 5px 12px;<br />
    border-radius: 99px;<br />
    font-weight: 600;<br />
  }<br />
  .tier .tier-name {<br />
    font-family: var(--mono);<br />
    font-size: 11px;<br />
    letter-spacing: 0.3em;<br />
    text-transform: uppercase;<br />
    color: var(--gold);<br />
    margin-bottom: 12px;<br />
  }<br />
  .tier h4 {<br />
    font-family: var(--serif);<br />
    font-size: 24px;<br />
    margin-bottom: 16px;<br />
    font-weight: 400;<br />
  }<br />
  .tier .price {<br />
    font-family: var(--serif);<br />
    font-size: 40px;<br />
    color: var(--ink);<br />
    margin-bottom: 20px;<br />
    font-weight: 300;<br />
    line-height: 1;<br />
  }<br />
  .tier .price small {<br />
    font-size: 14px;<br />
    color: var(--ink-mute);<br />
    font-family: var(--sans);<br />
    margin-left: 4px;<br />
  }<br />
  .tier ul {<br />
    list-style: none;<br />
    margin-top: 20px;<br />
    border-top: 1px solid var(--line-light);<br />
    padding-top: 20px;<br />
  }<br />
  .tier.featured ul { border-top-color: var(--line-dark); }<br />
  .tier li {<br />
    padding: 6px 0;<br />
    font-size: 13px;<br />
    color: var(--ink-soft);<br />
    display: flex;<br />
    gap: 10px;<br />
  }<br />
  .tier li::before {<br />
    content: '✓';<br />
    color: var(--gold);<br />
    font-weight: 600;<br />
  }</p>
<p>  /* ====================================================<br />
     ACCEPTANCE<br />
     ==================================================== */<br />
  .acceptance {<br />
    background:<br />
      radial-gradient(ellipse at 50% 0%, var(--gold-glow), transparent 60%),<br />
      var(--black);<br />
    color: var(--ivory);<br />
    text-align: center;<br />
  }<br />
  .acceptance h2, .acceptance h3 { color: var(--ivory); }<br />
  .acceptance .lede {<br />
    color: rgba(246, 241, 232, 0.7);<br />
    max-width: 640px;<br />
    margin: 0 auto 56px;<br />
  }<br />
  .accept-card {<br />
    max-width: 720px;<br />
    margin: 0 auto;<br />
    background: var(--black-2);<br />
    padding: clamp(40px, 6vw, 64px);<br />
    border: 1px solid var(--line-gold);<br />
    text-align: left;<br />
  }<br />
  .accept-row {<br />
    display: grid;<br />
    grid-template-columns: 1fr 1fr;<br />
    gap: 40px;<br />
    margin-bottom: 32px;<br />
  }<br />
  .accept-field .label {<br />
    font-family: var(--mono);<br />
    font-size: 10px;<br />
    letter-spacing: 0.3em;<br />
    text-transform: uppercase;<br />
    color: var(--gold);<br />
    margin-bottom: 16px;<br />
  }<br />
  .accept-field .line {<br />
    height: 36px;<br />
    border-bottom: 1px solid var(--line-gold);<br />
    font-family: var(--serif);<br />
    font-style: italic;<br />
    font-size: 22px;<br />
    color: rgba(246, 241, 232, 0.5);<br />
    display: flex;<br />
    align-items: flex-end;<br />
    padding-bottom: 6px;<br />
  }<br />
  .btn {<br />
    display: inline-flex;<br />
    align-items: center;<br />
    gap: 14px;<br />
    background: var(--gold);<br />
    color: var(--black);<br />
    padding: 18px 40px;<br />
    border: none;<br />
    font-family: var(--sans);<br />
    font-size: 12px;<br />
    font-weight: 600;<br />
    letter-spacing: 0.3em;<br />
    text-transform: uppercase;<br />
    cursor: pointer;<br />
    margin-top: 24px;<br />
    transition: all 0.3s ease;<br />
    text-decoration: none;<br />
  }<br />
  .btn:hover {<br />
    background: var(--gold-soft);<br />
    transform: translateY(-2px);<br />
    box-shadow: 0 12px 40px var(--gold-glow);<br />
  }<br />
  .btn .arrow { transition: transform 0.3s ease; }<br />
  .btn:hover .arrow { transform: translateX(4px); }</p>
<p>  /* ====================================================<br />
     FOOTER<br />
     ==================================================== */<br />
  footer {<br />
    padding: 60px clamp(24px, 6vw, 120px) 40px;<br />
    background: var(--black);<br />
    color: var(--ink-mute);<br />
    border-top: 1px solid var(--line-dark);<br />
    display: flex;<br />
    justify-content: space-between;<br />
    align-items: center;<br />
    flex-wrap: wrap;<br />
    gap: 24px;<br />
    font-size: 12px;<br />
    letter-spacing: 0.05em;<br />
  }<br />
  footer a { color: rgba(246, 241, 232, 0.7); text-decoration: none; transition: color 0.3s; }<br />
  footer a:hover { color: var(--gold); }<br />
  footer .links { display: flex; gap: 28px; flex-wrap: wrap; }</p>
<p>  /* ====================================================<br />
     SCROLL REVEAL — bulletproof<br />
     ==================================================== */<br />
  .reveal {<br />
    opacity: 0;<br />
    transform: translateY(40px);<br />
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);<br />
  }<br />
  .reveal.in { opacity: 1; transform: none; }<br />
  .no-js .reveal { opacity: 1 !important; transform: none !important; }<br />
  @media (prefers-reduced-motion: reduce) {<br />
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }<br />
  }<br />
  .force-visible .reveal { opacity: 1 !important; transform: none !important; }</p>
<p>  /* ====================================================<br />
     RESPONSIVE<br />
     ==================================================== */<br />
  @media (max-width: 900px) {<br />
    .letter-grid { grid-template-columns: 1fr; }<br />
    .reach-grid { grid-template-columns: repeat(2, 1fr); }<br />
    .pillars { grid-template-columns: 1fr; }<br />
    .deliverable-grid { grid-template-columns: 1fr; }<br />
    .roadmap-track { grid-template-columns: 1fr; gap: 24px; }<br />
    .roadmap-track::before { display: none; }<br />
    .phase { padding: 0; padding-left: 32px; }<br />
    .phase::before { left: 0; top: 8px; }<br />
    .phase .when { margin-top: 0; }<br />
    .compare-grid { grid-template-columns: 1fr; }<br />
    .accept-row { grid-template-columns: 1fr; gap: 24px; }<br />
    .invest-row { grid-template-columns: 1fr auto; gap: 16px; }<br />
    .invest-row .qty { display: none; }<br />
    .cover-meta { text-align: left; }<br />
    .cover-bottom { gap: 24px; }<br />
  }<br />
</style>

&nbsp;

<!-- ============== COVER ============== -->

<section class="cover">
<div class="cover-top">
<div class="idd-logo"><!-- IDD logo, intact. Will load on real domains; fallback shows our brand mark if blocked. -->
<img src="https://www.indetaildirectory.com/wp-content/uploads/2023/03/PNG-01-web.png" alt="In Detail Directory" />
<div class="fallback" style="display: none;">
<div class="idd-badge">IDD</div>
<div class="idd-wordmark"><span class="gold">In Detail</span> Directory</div>
</div>
</div>
<div class="cover-meta">
<div>Proposal No IDD / 2026 / 0218</div>
<div>Issued 1 May 2026</div>
<div>Valid Through 31 May 2026</div>
</div>
</div>
<div class="cover-center">
<div class="eyebrow">Bespoke Digital Marketing Proposal</div>
<h1>The network
that makes you
<em>impossible</em> to miss.</h1>
<p class="lede">A bespoke digital marketing partnership designed to put your business in front of the people who are already looking for you — across the most engaged Asian wedding &amp; events network in the UK.</p>

</div>
<div class="cover-bottom">
<div class="prepared-for">
<div class="label">Prepared For</div>
<div class="name">[Supplier Name]</div>
<div class="sub">Your business · Your industry</div>
</div>
<div class="scroll-cue">Scroll</div>
</div>
</section><!-- ============== LETTER ============== -->

<section class="letter">
<div class="letter-grid">
<div class="letter-side reveal">
<div class="label">A Note From IDD</div>
<h3>"You don't
need more
marketing.
You need the
<em style="color: var(--gold);">right</em> network."</h3>
</div>
<div class="letter-body reveal">

The truth about digital marketing in 2026 is that visibility alone is no longer enough. There is no shortage of agencies who will run your ads, post your reels, and send you a monthly report. What there <em>is</em> a shortage of — is targeted access to the audience that actually books.

That's what In Detail Directory has spent over a decade building. A vetted, curated network of customers and suppliers across weddings, events, corporate, and more — and a digital footprint that reaches them where they're already looking. When you partner with IDD, you're not buying impressions. You're buying introductions.

This proposal lays out exactly what that partnership looks like for your business — the channels, the deliverables, the strategy, and the investment. If anything needs adjusting, we adjust it. Nothing here is fixed until you say so.
<div class="signature">
<div class="signature-name">Amandeep Bhamra</div>
<div class="signature-title">Founder · In Detail Directory</div>
</div>
</div>
</div>
</section><!-- ============== REACH ============== -->

<section class="section reach">
<div class="reach-head reveal">
<div class="eyebrow">The Audience You're Joining</div>
<h2 class="h2">Real people.
Real intent. Real reach.</h2>
<p class="lede">Every metric below is verified IDD network data. This is what your partnership puts you in front of from day one.</p>

</div>
<div class="reach-grid reveal">
<div class="reach-stat">
<div class="num">82<small>K</small></div>
<div class="label">Instagram Reach</div>
<div class="desc">@indetaildirectory across reels, stories, and feed</div>
</div>
<div class="reach-stat">
<div class="num">1,200<small>+</small></div>
<div class="label">Vetted Suppliers</div>
<div class="desc">Curated cross-category network across the UK</div>
</div>
<div class="reach-stat">
<div class="num">3<small>×</small></div>
<div class="label">Live Wedding Shows / Year</div>
<div class="desc">National Asian Wedding Show — Oct, Nov, Jan</div>
</div>
<div class="reach-stat">
<div class="num">12<small>YRS</small></div>
<div class="label">Of Network Trust</div>
<div class="desc">Building since 2014 with 80%+ repeat customers</div>
</div>
</div>
</section><!-- ============== STRATEGY ============== -->

<section class="section strategy">
<div class="strategy-head reveal">
<div class="eyebrow">The Strategy</div>
<h2 class="h2">Four pillars,
one outcome.</h2>
<p class="lede" style="margin-top: 24px;">A complete digital footprint inside the IDD ecosystem — not a list of tactics, a coordinated plan.</p>

</div>
<div class="pillars reveal">
<div class="pillar">
<div class="num">Pillar 01</div>
<h3>Premium <em>Visibility</em></h3>
Front-and-centre placement across the IDD platform — homepage spotlight, category pages, and search results — engineered to put you exactly where customers are already looking.
<ul>
 	<li>Homepage banner spotlight rotations</li>
 	<li>Featured supplier badge</li>
 	<li>Priority placement in category search</li>
 	<li>"Supplier of the Month" eligibility</li>
</ul>
</div>
<div class="pillar">
<div class="num">Pillar 02</div>
<h3>Social <em>Amplification</em></h3>
Your business, woven into IDD's content calendar across Instagram, TikTok, and YouTube — produced by our in-house team and presenter network, not just reposted from your feed.
<ul>
 	<li>Dedicated Instagram reel features</li>
 	<li>Story takeovers &amp; tagged posts</li>
 	<li>Wedding show on-floor coverage</li>
 	<li>Cross-promotion with IDD presenters</li>
</ul>
</div>
<div class="pillar">
<div class="num">Pillar 03</div>
<h3>Editorial <em>Authority</em></h3>
Long-form content positioning you as a category expert — published on the IDD blog, distributed to subscribers, and indexed by search engines for organic compounding reach.
<ul>
 	<li>Quarterly featured blog articles</li>
 	<li>Inclusion in seasonal trend pieces</li>
 	<li>Newsletter spotlight slots</li>
 	<li>SEO-optimised backlinks to your site</li>
</ul>
</div>
<div class="pillar">
<div class="num">Pillar 04</div>
<h3>Live <em>Connection</em></h3>
The thing no algorithm can replicate — being in the room. Reserved exhibitor presence at the National Asian Wedding Show plus access to networking events that the IDD calendar runs throughout the year.
<ul>
 	<li>Exhibitor stand at NAWS (3 shows/year)</li>
 	<li>VIP networking event invitations</li>
 	<li>Quick Quote inbound lead routing</li>
 	<li>Direct introductions via the IDD team</li>
</ul>
</div>
</div>
</section><!-- ============== DELIVERABLES ============== -->

<section class="section deliverables">
<div class="deliverables-head reveal">
<div class="eyebrow">What's Included · Annual</div>
<h2 class="h2">Concrete deliverables.
No vague promises.</h2>
</div>
<div class="deliverable-grid reveal">
<div class="deliverable-card"><span class="tag">Visibility</span>
<div class="qty">12<small>spotlights</small></div>
<h4>Homepage Banner Rotations</h4>
One full month of homepage banner spotlight per quarter, across desktop and mobile.

</div>
<div class="deliverable-card"><span class="tag">Social</span>
<div class="qty">24<small>reels</small></div>
<h4>Dedicated Instagram Reels</h4>
Two original IDD-produced reels per month featuring your business, distributed across our 82K+ network.

</div>
<div class="deliverable-card"><span class="tag">Social</span>
<div class="qty">52<small>stories</small></div>
<h4>Instagram Story Features</h4>
Weekly story features including offers, behind-the-scenes, and seasonal moments.

</div>
<div class="deliverable-card"><span class="tag">Editorial</span>
<div class="qty">4<small>articles</small></div>
<h4>Featured Blog Articles</h4>
Quarterly long-form features on the IDD blog with SEO-optimised backlinks to your site.

</div>
<div class="deliverable-card"><span class="tag">Events</span>
<div class="qty">3<small>shows</small></div>
<h4>NAWS Exhibitor Presence</h4>
Reserved stand &amp; on-floor coverage at every National Asian Wedding Show throughout the year.

</div>
<div class="deliverable-card"><span class="tag">Email</span>
<div class="qty">12<small>features</small></div>
<h4>Newsletter Spotlights</h4>
Monthly featured slot in the IDD subscriber newsletter — direct to inbox, not algorithm-dependent.

</div>
</div>
</section><!-- ============== ROADMAP ============== -->

<section class="section roadmap">
<div class="roadmap-head reveal">
<div class="eyebrow">The First 90 Days</div>
<h2 class="h2">From sign-up to sustained reach,
in four phases.</h2>
<p class="lede" style="margin-top: 24px;">A clear, measurable rollout — so you know exactly what's happening and when.</p>

</div>
<div class="roadmap-track reveal">
<div class="phase">
<div class="when">Week 01 — 02</div>
<h4>Onboarding &amp; Setup</h4>
Profile activation, asset collection, brand guideline alignment, and content calendar build with your team.

</div>
<div class="phase">
<div class="when">Week 03 — 04</div>
<h4>Launch &amp; Spotlight</h4>
Homepage banner goes live. First Instagram reel published. Profile featured in category search.

</div>
<div class="phase">
<div class="when">Week 05 — 08</div>
<h4>Momentum</h4>
Content rhythm settles into weekly cadence. First blog feature drops. First newsletter spotlight runs.

</div>
<div class="phase">
<div class="when">Week 09 — 12</div>
<h4>Review &amp; Optimise</h4>
90-day performance review with reach data, lead attribution, and roadmap for the next quarter.

</div>
</div>
</section><!-- ============== INVESTMENT ============== -->

<section class="section investment">
<div class="invest-wrap">
<div class="invest-head reveal">
<div class="eyebrow">Your Investment</div>
<h2 class="h2">Transparent, itemised, all-inclusive.</h2>
<p class="lede" style="margin-top: 24px;">Annual partnership pricing. Everything below is included; nothing is added later.</p>

</div>
<div class="invest-headline reveal">
<div class="package-name">Recommended Tier</div>
<div class="package-title">The <em>Platinum</em> Partnership</div>
<div class="price-row">
<div class="price">£2,599</div>
<div class="price-sub">+ VAT · annual partnership</div>
</div>
</div>
<div class="invest-table reveal">
<div class="invest-row included">
<div>
<div class="item-name">Premium Directory Listing</div>
<div class="item-desc">Featured across category &amp; search</div>
</div>
<div class="qty">12 mo</div>
<div class="total">Included</div>
</div>
<div class="invest-row included">
<div>
<div class="item-name">Homepage Banner Spotlights</div>
<div class="item-desc">12 monthly rotations across the year</div>
</div>
<div class="qty">12×</div>
<div class="total">Included</div>
</div>
<div class="invest-row included">
<div>
<div class="item-name">IDD-Produced Instagram Reels</div>
<div class="item-desc">Original content, full production</div>
</div>
<div class="qty">24×</div>
<div class="total">Included</div>
</div>
<div class="invest-row included">
<div>
<div class="item-name">Instagram Story Features</div>
<div class="item-desc">Weekly cadence, 52 across the year</div>
</div>
<div class="qty">52×</div>
<div class="total">Included</div>
</div>
<div class="invest-row included">
<div>
<div class="item-name">Featured Blog Articles</div>
<div class="item-desc">Quarterly long-form with backlinks</div>
</div>
<div class="qty">4×</div>
<div class="total">Included</div>
</div>
<div class="invest-row included">
<div>
<div class="item-name">NAWS Exhibitor Presence</div>
<div class="item-desc">Reserved stand at all 3 annual shows</div>
</div>
<div class="qty">3×</div>
<div class="total">Included</div>
</div>
<div class="invest-row included">
<div>
<div class="item-name">Newsletter Spotlights</div>
<div class="item-desc">Direct-to-inbox feature, monthly</div>
</div>
<div class="qty">12×</div>
<div class="total">Included</div>
</div>
<div class="invest-row included">
<div>
<div class="item-name">Quarterly Performance Reviews</div>
<div class="item-desc">Reach data, attribution, next-phase planning</div>
</div>
<div class="qty">4×</div>
<div class="total">Included</div>
</div>
</div>
<div class="invest-totals reveal">
<div class="row">
<div class="label">Annual Partnership</div>
<div class="val">£2,599.00</div>
</div>
<div class="row">
<div class="label">VAT (20%)</div>
<div class="val">£519.80</div>
</div>
<div class="row grand">
<div class="label">Total Investment</div>
<div class="val">£3,118.80</div>
</div>
</div>
</div>
</section><!-- ============== COMPARE ============== -->

<section class="section compare">
<div class="compare-head reveal">
<div class="eyebrow">Tier Comparison</div>
<h2 class="h2">Where Platinum sits.</h2>
<p class="lede" style="margin-top: 24px;">For full transparency — here's how your recommended tier compares against the rest of our partnership packages.</p>

</div>
<div class="compare-grid reveal">
<div class="tier">
<div class="tier-name">Bronze</div>
<h4>Entry Listing</h4>
<div class="price">£45<small>/yr</small></div>
<ul>
 	<li>Standard directory listing</li>
 	<li>Category placement</li>
 	<li>Quick Quote eligibility</li>
</ul>
</div>
<div class="tier">
<div class="tier-name">Silver</div>
<h4>Active Listing</h4>
<div class="price">£449<small>/yr</small></div>
<ul>
 	<li>Enhanced profile</li>
 	<li>4× Instagram features</li>
 	<li>1× blog mention</li>
 	<li>Newsletter inclusion</li>
</ul>
</div>
<div class="tier">
<div class="tier-name">Gold</div>
<h4>Premium Partnership</h4>
<div class="price">£1,899<small>/yr</small></div>
<ul>
 	<li>All Silver features</li>
 	<li>12× Instagram features</li>
 	<li>2× blog articles</li>
 	<li>1× wedding show stand</li>
 	<li>Bi-annual review</li>
</ul>
</div>
<div class="tier featured">
<div class="featured-tag">Recommended</div>
<div class="tier-name">Platinum</div>
<h4>Full Network Partnership</h4>
<div class="price">£2,599<small>/yr</small></div>
<ul>
 	<li>All Gold features</li>
 	<li>24× IDD-produced reels</li>
 	<li>52× story features</li>
 	<li>4× blog articles</li>
 	<li>3× wedding show stands</li>
 	<li>Quarterly reviews</li>
</ul>
</div>
</div>
</section><!-- ============== ACCEPTANCE ============== -->

<section class="section acceptance">
<div class="reveal">
<div class="eyebrow" style="justify-content: center;">Ready When You Are</div>
<h2 class="h2">Shall we get started?</h2>
<p class="lede">Sign below to confirm — or simply reply to this email and we'll walk through it together. This proposal is valid until <strong style="color: var(--gold);">31 May 2026</strong>.</p>

</div>
<div class="accept-card reveal">
<div class="accept-row">
<div class="accept-field">
<div class="label">Signature</div>
<div class="line">_______________________</div>
</div>
<div class="accept-field">
<div class="label">Date</div>
<div class="line">_______________________</div>
</div>
</div>
<div class="accept-row">
<div class="accept-field">
<div class="label">Printed Name</div>
<div class="line">_______________________</div>
</div>
<div class="accept-field">
<div class="label">Business Name</div>
<div class="line">_______________________</div>
</div>
</div>
<a class="btn" href="#">
Accept &amp; Sign Digitally

</a>

</div>
</section><!-- ============== FOOTER ============== -->

<footer>
<div class="idd-logo"><img style="height: 32px;" src="https://www.indetaildirectory.com/wp-content/uploads/2023/03/PNG-01-web.png" alt="In Detail Directory" />
<div class="fallback" style="display: none; align-items: center; gap: 10px;">
<div class="idd-badge" style="width: 32px; height: 32px; font-size: 11px;">IDD</div>
<div class="idd-wordmark" style="font-size: 11px;"><span class="gold">In Detail</span> Directory</div>
</div>
</div>
<div class="links"><a href="https://www.indetaildirectory.com">indetaildirectory.com</a>
<a href="https://www.instagram.com/indetaildirectory/">@indetaildirectory</a>
<a href="https://www.indetaildirectory.com/contact-us/">Contact</a></div>
<div>© 2014 — 2026 · In Detail Directory Ltd</div>
</footer><script>
  document.documentElement.classList.remove('no-js');
  const failsafe = setTimeout(() => {
    document.documentElement.classList.add('force-visible');
  }, 3000);
  if (!('IntersectionObserver' in window)) {
    document.documentElement.classList.add('force-visible');
    clearTimeout(failsafe);
  } else {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
  }
</script>

&nbsp;