*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#c9c5b9;color:#193d31;font-family:Arial,sans-serif}.top{background:#193d31;color:#fff;padding:14px 5%;display:flex;gap:28px;justify-content:space-between}.top a{color:#fff}a{color:inherit}button{background:#193d31;color:white;border:0;padding:12px 20px;cursor:pointer}.page{position:relative;background:#ede9db;max-width:1200px;margin:24px auto;padding:40px 54px 75px;min-height:790px}.page header,.page footer{display:flex;justify-content:space-between;font:12px monospace;letter-spacing:1px;border-bottom:1px solid #aeb8a8;padding-bottom:14px}.page footer{position:absolute;bottom:26px;left:54px;right:54px;border-bottom:0;border-top:1px solid #aeb8a8;padding-top:13px;font-size:10px}h1{font-family:Georgia,serif;font-size:64px;line-height:1.02;font-weight:400;letter-spacing:-2px;margin:30px 0 18px}.intro{font-size:23px;line-height:1.4;max-width:900px;margin:0 0 26px}.note{font-size:13px;line-height:1.5;margin:22px 0 0}.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}.cards article{padding:22px 0;border-top:2px solid #193d31}h2{font-size:25px;font-weight:500;margin:0 0 12px}.cards p,.sources p{font-size:19px;line-height:1.5;margin:0}.art-pending{background:#dce1d2;min-height:280px;padding:70px 30px;text-align:center;border:1px dashed #6c7864;color:#53634e}.art-pending span{font:13px monospace}.art-pending p{font-size:18px;line-height:1.5}.ribbon{display:flex;justify-content:space-between;border-top:2px solid #193d31;padding-top:19px;margin-top:24px;gap:15px}.fee{font-size:100px;letter-spacing:-6px;line-height:1;margin:18px 0 30px}.research pre{white-space:pre-wrap;font:15px/1.45 monospace;columns:2;column-gap:30px;background:#e0e4d8;padding:24px}.research h1{font-size:50px}.research .intro{font-size:20px}.sources{margin-top:30px;border-top:1px solid #aeb8a8;padding-top:20px}.sources p{font-size:16px;margin:10px 0}.cover{background:#193d31;color:#ede9db}.cover .art-pending{background:#294d3f;color:#d1d8c9;border-color:#7e8f7b}.cover .ribbon{border-color:#b2beaa}.cover h1{font-size:80px}.visual .art-pending{min-height:320px}.products .art-pending{min-height:210px;padding:40px}.closing{background:#dce1d2}@media(max-width:700px){.page{margin:0 0 12px;padding:26px 22px 90px;min-height:0}.page header{font-size:10px;gap:15px}.page footer{left:22px;right:22px;bottom:20px;font-size:9px;gap:12px}h1,.cover h1{font-size:48px;letter-spacing:-1.5px}.intro{font-size:20px}.cards{grid-template-columns:1fr;gap:8px}.ribbon{flex-wrap:wrap}.fee{font-size:85px}.research pre{columns:1;font-size:14px;padding:15px}.top{font-size:12px}.sources p{overflow-wrap:anywhere}}@media print{@page{size:1200px 850px;margin:0}body{background:white}.top,button{display:none}.page{margin:0;max-width:none;height:850px;break-after:page}.page:last-child{break-after:auto}}
/* V3 image integration */
figure{margin:20px 0}figure img{display:block;width:100%;height:auto}.cover{min-height:850px;color:#193d31;background:#ede9db}.cover figure{position:absolute;inset:62px 0 118px;margin:0;z-index:0;overflow:hidden}.cover figure img{height:100%;object-fit:cover}.cover header,.cover h1,.cover .intro,.cover .ribbon,.cover .note,.cover footer{position:relative;z-index:1}.cover h1{max-width:570px;margin-top:70px}.cover .intro{max-width:400px;font-size:24px}.cover .ribbon{margin-top:270px;border-color:#193d31}.cover .note{font-size:12px}.cover footer{position:absolute}.visual figure{max-width:850px;margin:25px auto}.products figure{max-width:670px;margin:15px auto}.evidence figure{max-width:620px;margin:15px auto}.evidence .cards{grid-template-columns:repeat(4,1fr)}.evidence .cards p{font-size:16px}.scope .cards article{background:#dce1d2;padding:22px}.scope .cards h2{font-size:35px}.workflow .cards article{padding:28px;background:#193d31;color:#ede9db}.timeline .cards h2{color:#8b4c2d}.timeline .cards article{border-left:4px solid #9e6d4b;padding-left:25px}.research pre{font-family:Arial,sans-serif}
@media(max-width:700px){.cover{min-height:0}.cover figure{position:relative;inset:auto;margin:25px -22px}.cover figure img{height:auto;object-fit:contain}.cover h1{margin-top:30px}.cover .ribbon{margin-top:25px}.evidence .cards{grid-template-columns:1fr 1fr}.scope .cards h2{font-size:29px}}

/* Page 6: an ordered milestone line, not a progress/completion tracker. */
.timeline-visual .milestone-track {
  --milestone-gap: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--milestone-gap);
  position: relative;
  list-style: none;
  margin: 36px 0 32px;
  padding: 0;
}

.timeline-visual .milestone-track::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 69px;
  left: calc(12.5% - 10.5px);
  right: calc(12.5% - 10.5px);
  height: 3px;
  background: #193d31;
}

.timeline-visual .milestone {
  display: grid;
  grid-template-rows: 52px 42px auto;
  align-content: start;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.timeline-visual .milestone-date {
  margin: 0;
  text-align: center;
  color: #8b4c2d;
  font: 28px/1.1 Georgia, serif;
}

.timeline-visual .milestone-marker {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 36px;
  height: 36px;
  border: 3px solid #ede9db;
  border-radius: 50%;
  outline: 2px solid #193d31;
  background: #193d31;
  color: #ede9db;
  font: 16px/1 Arial, sans-serif;
}

.timeline-visual .milestone-copy h2 {
  min-height: 66px;
  margin: 10px 0 12px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
}

.timeline-visual .milestone-copy p {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
}

.timeline-visual > .note {
  max-width: 920px;
}

@media screen and (max-width: 850px) {
  .timeline-visual .milestone-track {
    display: block;
    margin: 32px 0 24px;
  }

  .timeline-visual .milestone-track::before {
    display: none;
  }

  .timeline-visual .milestone {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: 36px auto;
    grid-template-areas: "marker date" "marker copy";
    column-gap: 22px;
    padding: 0 0 36px;
  }

  .timeline-visual .milestone:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 17px;
    top: 18px;
    bottom: -18px;
    width: 3px;
    background: #193d31;
  }

  .timeline-visual .milestone:last-child {
    padding-bottom: 0;
  }

  .timeline-visual .milestone-date {
    grid-area: date;
    align-self: center;
    text-align: left;
    font-size: 26px;
  }

  .timeline-visual .milestone-marker {
    grid-area: marker;
  }

  .timeline-visual .milestone-copy {
    grid-area: copy;
  }

  .timeline-visual .milestone-copy h2 {
    min-height: 0;
    margin-top: 12px;
  }
}

@media print {
  .timeline-visual .milestone-track {
    /* Keep a single horizontal timeline on the 1200 x 850 export page. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 30px;
    margin-bottom: 26px;
    break-inside: avoid;
  }

  .timeline-visual .milestone-copy p {
    font-size: 18px;
    line-height: 1.4;
  }

  .timeline-visual .milestone-copy h2 {
    font-size: 27px;
    min-height: 63px;
  }
}

/* V4: one website, separate deliverables and a shared plan. */
.skip-link{position:absolute;left:-10000px;top:10px;z-index:10;background:#fff;padding:12px;color:#193d31}
.skip-link:focus{left:10px}
.top{align-items:center;flex-wrap:wrap;gap:16px;padding:16px 5%}
.top .brand{font-weight:700;text-decoration:none;white-space:nowrap}
.top small{font:11px monospace;margin-left:8px;color:#d6decf}
.top>div{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.top a{font-size:14px}
.top a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #d6a46d;outline-offset:5px}
.page{display:flex;flex-direction:column;min-height:800px;padding-bottom:32px}
.page header{gap:24px;text-transform:none;font-size:12px;line-height:1.45}
.page header span:last-child{text-align:right}
.page footer,.cover footer{position:static;inset:auto;margin-top:36px;gap:20px;line-height:1.4}
.page footer span:last-child{white-space:nowrap}
.page h1{max-width:1000px}
.intro{max-width:940px;font-size:23px;line-height:1.4}
.cover{min-height:1020px}
.cover h1{font-size:68px;line-height:1.02;max-width:470px;margin-top:62px}
.cover .intro{max-width:420px;font-size:22px;line-height:1.4}
.cover figure{top:64px;bottom:150px}
.cover .ribbon{margin-top:180px;flex-wrap:wrap;gap:14px}
.cover .note{max-width:900px;margin-top:20px;font-size:13px}
.cover footer{margin-top:24px}
.estimate{display:flex;flex-direction:column;gap:7px;background:#dce1d2;border-left:4px solid #8b4c2d;padding:17px 22px;margin:0 0 26px;font-size:19px;line-height:1.4}
.estimate b{font-size:23px;font-weight:500}
.estimate span{font-size:16px}
.deliverable-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:30px;align-items:center}
.deliverable .cards{gap:20px}
.deliverable .cards article{padding:15px 0}
.deliverable .cards h2{font-size:23px;line-height:1.2;margin-bottom:9px}
.deliverable .cards p{font-size:17px;line-height:1.45}
.deliverable-layout figure{max-width:none;margin:12px 0}
.product-links{margin-top:16px;border-top:1px solid #aeb8a8;padding-top:14px;font-size:16px;line-height:1.5}
summary{cursor:pointer;font-weight:600}
.product-links ul{padding-left:22px}
.scope-choice,.approval-note{background:#193d31;color:#ede9db;padding:28px 30px;margin:8px 0 26px}
.scope-choice h2{font:36px/1.1 Georgia,serif;max-width:870px}
.scope-choice p,.approval-note p{font-size:20px;line-height:1.5;max-width:940px}
.scope-choice .eyebrow{font:12px/1.4 monospace;margin:0 0 15px;letter-spacing:1px}
.customer-page .cards p{font-size:18px}
.customer-page .cards h2{font-size:24px}
.review-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0;list-style:none;margin:5px 0 20px;counter-reset:review}
.review-steps li{border-top:2px solid #193d31;padding-top:14px;counter-increment:review}
.review-steps li::before{content:"0" counter(review);display:block;font:28px Georgia,serif;color:#8b4c2d;margin-bottom:12px}
.review-steps b,.review-steps span{display:block}
.review-steps b{font-size:23px;font-weight:500;margin-bottom:10px}
.review-steps span{font-size:17px;line-height:1.45}
.review-section figure{max-width:660px;margin:20px auto}
.inputs .cards article,.checks .cards article{padding:24px;background:#dce1d2;border:0}
.inputs .cards h2,.checks .cards h2{font-size:27px}
.timing-note{border-top:2px solid #193d31;margin-top:20px;padding-top:20px;max-width:950px}
.timing-note b{font-size:23px;font-weight:500}
.timing-note p{font-size:18px;line-height:1.5}
.timeline-visual .milestone-copy h2{font-size:27px}
.investment .ribbon{margin:0 0 20px}
.investment .note{font-size:15px;line-height:1.5}
.why-number{min-height:760px}
.price-story{max-width:960px}
.price-story p{font-size:21px;line-height:1.5;margin:0 0 20px}
.research{min-height:0}
.research pre{columns:1;font:14px/1.5 monospace;max-height:420px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:24px}
.research button{align-self:flex-start;font-size:16px}
.finish-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}
.finish-actions button{font-size:16px}
.finish-actions span{font-size:15px}
@media(max-width:900px){
 .deliverable-layout{grid-template-columns:1fr;gap:10px}
 .deliverable-layout figure{max-width:700px;width:100%;margin:12px auto}
 .review-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
 .page{min-height:0;padding:28px 22px 28px}
 .page header{font-size:10px;gap:12px}
 .page h1,.cover h1{font-size:44px;line-height:1.04;letter-spacing:-1.3px;margin-top:30px}
 .intro,.cover .intro{font-size:20px;max-width:none}
 .cover{min-height:0}
 .cover figure{position:relative;inset:auto;margin:20px -22px}
 .cover .ribbon{margin-top:18px;font-size:16px}
 .cover .note{font-size:13px}
 .page footer,.cover footer{font-size:9px;margin-top:30px}
 .top{padding:16px 22px;gap:14px}
 .top>div{gap:13px 18px}
 .top a{font-size:13px}
 .cards{gap:14px}
 .deliverable .cards{grid-template-columns:1fr}
 .deliverable .cards p,.cards p{font-size:18px}
 .estimate{padding:16px 18px}
 .estimate b{font-size:21px}
 .scope-choice,.approval-note{padding:24px 22px}
 .scope-choice h2{font-size:30px}
 .scope-choice p,.approval-note p{font-size:18px}
 .review-steps{grid-template-columns:1fr;gap:18px}
 .review-steps span{font-size:18px}
 .inputs .cards article,.checks .cards article{padding:22px}
 .price-story p{font-size:19px}
 .research pre{font-size:13px;padding:16px;max-height:440px}
 .fee{font-size:78px;letter-spacing:-4px}
 .timeline-visual .milestone-copy p{font-size:18px}
}