/* =====================================================================
   TOPEE - ABOUT / OUR STORY, layout corrections
   ---------------------------------------------------------------------
   Two things were wrong on this page, both structural rather than
   cosmetic:

   1. THE MILESTONE CARDS WERE MOSTLY EMPTY SPACE. Each card is built to
      hold a badge row, an icon, a title and a description - and the
      descriptions were never written, so a card 230px tall carried the
      words "Old Airport Road". The icon tile and the padding were sized
      for content that is not there.

   2. THE STORY HAD NO CONTAINMENT. Body copy ran edge to edge against a
      22px gutter with no card and no background, on a site where every
      other section sits in one. It read as an unstyled draft rather than
      a designed page.

   Its own file, loaded only on this page.
   ===================================================================== */

/* ---------------------------------------------------------------------
   THE STORY
   --------------------------------------------------------------------- */

/* A readable measure. 331px of 16.5px text is roughly 42 characters a
   line - too short, so the eye returns constantly. The gutter is trimmed
   on the narrowest screens to buy the text back some width. */
@media (max-width:420px){
  html body .tp-story{
    padding-left:2px!important;padding-right:2px!important;
  }
}

/* Hierarchy. The lede was 19px against 16.5px body - close enough that
   the opening paragraph did not read as an opening. */
html body .tp-story .tp-lede{
  font-size:clamp(19px,4.6vw,23px)!important;
  line-height:1.5!important;
  color:#14161A!important;
  margin-bottom:clamp(24px,4vw,30px)!important;
}

/* The pull quote carries the whole argument of the page, so it gets the
   weight to match: a tinted panel rather than a bare left rule. */
html body .tp-story .tp-pull{
  margin:clamp(28px,4vw,36px) 0!important;
  padding:clamp(20px,4vw,26px) clamp(18px,4vw,26px)!important;
  background:#FAFAF8!important;
  border:1px solid #E6E4DF!important;
  border-left:3px solid #A8871C!important;
  border-radius:12px!important;
  font-size:clamp(18px,4.4vw,21px)!important;
  line-height:1.45!important;
  color:#14161A!important;
}

/* One heading system, not two. "What Topee Does" was a 22px bold sans
   while the section above it used a 28px uppercase display face. */
html body .tp-story .tp-topee-profile .tp-timeline-h3,
html body .tp-story .tp-timeline-header .tp-timeline-h3{
  font-size:clamp(20px,4.8vw,26px)!important;
  font-weight:500!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
  margin:6px 0 14px!important;
}

/* Air between the three blocks, and a rule that actually separates. */
html body .tp-story .tp-topee-profile,
html body .tp-story .tp-timeline-section{
  margin-top:clamp(40px,7vw,64px)!important;
  padding-top:clamp(28px,5vw,40px)!important;
  border-top:1px solid #EFEDE8!important;
}

/* ---------------------------------------------------------------------
   THE MILESTONES
   Compressed to fit the content that exists.
   --------------------------------------------------------------------- */

html body .tp-story .tp-timeline-track{
  gap:clamp(14px,3vw,20px)!important;
}

html body .tp-story .tp-timeline-item{
  gap:clamp(12px,3vw,18px)!important;
}

/* The node column was taking roughly a quarter of a 375px screen to show
   a dot. */
html body .tp-story .tp-timeline-node-wrap{
  flex:0 0 auto!important;width:auto!important;min-width:0!important;
}
html body .tp-story .tp-timeline-node{
  width:28px!important;height:28px!important;
  flex:0 0 28px!important;
}
html body .tp-story .tp-timeline-dot{width:8px!important;height:8px!important}

html body .tp-story .tp-timeline-card{
  padding:clamp(14px,3.4vw,18px)!important;
  gap:10px!important;
}

/* Badge row: the tag was pushed to the far edge, leaving a long empty
   span between it and the date. They belong together as one label. */
html body .tp-story .tp-timeline-card-top{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:10px!important;
  margin-bottom:10px!important;
  flex-wrap:wrap!important;
}
html body .tp-story .tp-timeline-tag{
  margin-left:0!important;
  opacity:.75!important;
}

/* The icon was a 64px tile above a single line of text. At 40px it still
   reads and the card stops being mostly graphic. */
html body .tp-story .tp-timeline-graphic{
  margin:0 0 8px!important;
}
html body .tp-story .tp-timeline-icon{
  width:34px!important;height:34px!important;
}
html body .tp-story .tp-timeline-graphic > div,
html body .tp-story .tp-timeline-stat-wrap{
  padding:8px 12px!important;min-height:0!important;
}
html body .tp-story .tp-timeline-stat-num{
  font-size:clamp(22px,5vw,28px)!important;line-height:1!important;
}

html body .tp-story .tp-timeline-title{
  margin:0!important;
  font-size:clamp(16px,4vw,18px)!important;
  line-height:1.3!important;
}

/* An empty description block still occupies its margins. Collapse any
   that are blank so the card ends at its last real line. */
html body .tp-story .tp-timeline-content{margin:0!important}
html body .tp-story .tp-timeline-content:empty,
html body .tp-story .tp-timeline-content p:empty{display:none!important}
html body .tp-story .tp-timeline-desc,
html body .tp-story .tp-timeline-text{
  margin:6px 0 0!important;
  font-size:14px!important;line-height:1.55!important;color:#5A5F66!important;
}

/* ---------------------------------------------------------------------
   THE MILESTONE CARDS, NOW THAT THEY CARRY COPY

   Three cards with one word in each read as placeholders; with a line of
   description under the title they read as a record. The card is aligned
   to the top so the three titles sit on one baseline whatever the copy
   does, the date leads the badge row, and the icon steps back to being a
   marker rather than the subject.
   --------------------------------------------------------------------- */
html body .tp-story .tp-timeline-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
  height:100%!important;
  background:#FFFFFF!important;
  border:1px solid #E9E6DF!important;
  border-radius:14px!important;
  transition:border-color .2s ease,box-shadow .2s ease!important;
}
html body .tp-story .tp-timeline-card:hover{
  border-color:#D9CFB4!important;
  box-shadow:0 10px 26px -18px rgba(20,22,26,.35)!important;
}
html body .tp-story .tp-timeline-badge-pill{
  font-variant-numeric:lining-nums tabular-nums!important;
  letter-spacing:.08em!important;
}
html body .tp-story .tp-timeline-graphic{
  align-self:flex-start!important;
}
/* The 1,000 stat is the one number on the page worth reading as a number,
   so it keeps its panel while the two icon tiles stay quiet. */
html body .tp-story .tp-timeline-stat-num{
  color:#8E7037!important;
  font-variant-numeric:lining-nums tabular-nums!important;
}
html body .tp-story .tp-timeline-content{
  width:100%!important;
  margin-top:auto!important;
}

/* ---------------------------------------------------------------------
   THE NODES AND THE LINE THAT JOINS THEM

   The nodes were drawing as ovals: the width was set but the height came
   from the flex row, so a padding change stretched them sideways. Each is
   now a fixed square with a 1:1 ratio and border-box sizing, so nothing
   can pull it out of round.

   The connecting line was a single absolute bar inset by 16.66% - the
   column centres only land there when the gap is zero, so it sat off to
   one side and missed the dots. It is drawn from the nodes themselves
   instead: every node carries a rule through its own centre, trimmed at
   the first and last so the line starts and ends on a dot.
   --------------------------------------------------------------------- */
html body .tp-story .tp-timeline-spine{
  display:none!important;
}
html body .tp-story .tp-timeline-node-wrap{
  position:relative!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-bottom:18px!important;
}
html body .tp-story .tp-timeline-node-wrap::before{
  content:''!important;
  position:absolute!important;
  top:50%!important;
  left:-60%!important;
  right:-60%!important;
  height:2px!important;
  margin-top:-1px!important;
  background:linear-gradient(90deg,#8E7037 0%,#D4AF37 50%,#8E7037 100%)!important;
  z-index:0!important;
}
/* The spine div is still the track's first child, so :first-child never
   matched the first card and its rule ran off the left edge. The line only
   reaches left on an item that has another item before it. */
html body .tp-story .tp-timeline-node-wrap::before{
  left:50%!important;
}
html body .tp-story .tp-timeline-item + .tp-timeline-item .tp-timeline-node-wrap::before{
  left:-60%!important;
}
html body .tp-story .tp-timeline-item:last-child .tp-timeline-node-wrap::before{
  right:50%!important;
}
html body .tp-story .tp-timeline-node{
  position:relative!important;
  z-index:1!important;
  box-sizing:border-box!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  flex:0 0 30px!important;
  aspect-ratio:1/1!important;
  padding:0!important;
  border-radius:50%!important;
  border:2px solid #8E7037!important;
  background:#FFFFFF!important;
  box-shadow:0 0 0 4px rgba(142,112,55,.10)!important;
  display:grid!important;
  place-items:center!important;
}
html body .tp-story .tp-timeline-dot{
  width:8px!important;height:8px!important;
  border-radius:50%!important;background:#8E7037!important;
}

/* The icons sat in a bordered white tile that read as an empty box on a
   white card. The mark stands on its own. */
html body .tp-story .tp-timeline-graphic,
html body .tp-story .tp-timeline-graphic:has(.tp-timeline-stat-wrap),
html body .tp-story .tp-timeline-stat-wrap{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0 0 10px!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}
html body .tp-story .tp-timeline-icon,
html body .tp-story .tp-timeline-graphic svg{
  width:30px!important;height:30px!important;
  max-width:30px!important;max-height:30px!important;
  margin:0!important;
}
html body .tp-story .tp-timeline-stat-num{
  font-size:clamp(26px,5vw,32px)!important;
}

/* Phone and tablet: the same rule, turned on its side. It runs from one
   node centre to the next rather than from an arbitrary offset. */
@media (max-width:768px){
  html body .tp-story .tp-timeline-track{
    padding-left:34px!important;
  }
  html body .tp-story .tp-timeline-node-wrap{
    width:auto!important;
    margin:0 16px 0 -34px!important;
    padding-top:16px!important;
  }
  html body .tp-story .tp-timeline-node-wrap::before{
    display:none!important;
  }
  html body .tp-story .tp-timeline-item:not(:last-child)::after{
    content:''!important;
    position:absolute!important;
    top:46px!important;
    bottom:-20px!important;
    left:-19px!important;
    width:2px!important;
    margin-left:-1px!important;
    background:linear-gradient(180deg,#8E7037 0%,#D4AF37 50%,#8E7037 100%)!important;
    z-index:0!important;
  }
}