/* Start custom CSS *//* ===== hero: square + triangle + circle (static) =====
   A house built from two primitives in two shades of blue, enclosed by a lime
   ring - the same geometric vocabulary the statistics and risk sections use.
   Deliberately unanimated: a hero is already most of the way through its scroll
   range before the user scrolls at all, so any motion here resolved off-screen. */
#tdi-hero-section{overflow:clip;}
#tdi-geo{margin:0 auto;aspect-ratio:1/1;container-type:inline-size;}
#tdi-geo>*{padding:0}

#tdi-geo-square{left:33%;top:52%;}
#tdi-geo-roof{left:27%;top:30%;clip-path:polygon(50% 0,100% 100%,0 100%);}

#tdi-geo-ringpos{left:50%;top:58%;min-height:0;}
#tdi-geo-ring{left:0;top:0;margin:-37cqw 0 0 -37cqw;min-height:0;width:74cqw;height:74cqw;box-sizing:border-box;background:transparent;border:2px solid #6FCF43;box-shadow:0 0 26px rgba(111,207,67,.22),inset 0 0 40px rgba(111,207,67,.07);}

/* ===== H1 highlight =====
   The lime marker now sits on "Protect your properties". Because it opens the
   line, its 10px left padding would indent line 1 against lines 2-3, so pull it
   back by the same amount: the text aligns, the marker bleeds slightly left.
   The forced breaks are kept at every width so the highlighted phrase always
   occupies exactly one line; box-decoration-break keeps it tidy if it ever wraps. */
#tdi-h1 span{margin-left:-10px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ===== hero trust row =====
   The ratings live at the foot of the hero as a single horizontal strip rather
   than a section of their own, per DRD 5C ("compact horizontal trust bar"). */
#tdi-trust{display:flex;gap:10px 0;border-top:1px solid rgba(199,210,245,.14);}
#tdi-trust>p{margin:0;padding:0;display:inline-flex;align-items:center;gap:.45em;
  font-family:"Work Sans",sans-serif;font-size:15px;line-height:1.4;color:#9FB0DE;white-space:nowrap}
#tdi-trust>p strong{color:#6FCF43;font-weight:700;letter-spacing:.2px}
#tdi-trust>p:not(:last-child)::after{content:"";display:inline-block;width:4px;height:4px;
  border-radius:50%;background:#46538F;margin:0 22px}

/* One row only fits when the container reaches its 1180px cap (~1228px viewport).
   Below that it wrapped 3+1 and left an orphaned separator dot, so switch to a
   deliberate layout: the experience statement on its own line, the three
   ratings in a row beneath it. */
@media (max-width:1240px) and (min-width:768px){
  #tdi-trust{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
    column-gap:34px;row-gap:14px}
  #tdi-trust>p{font-size:14px}
  #tdi-trust>p:first-child{grid-column:1/-1}
  #tdi-trust>p::after{display:none!important}
}
/* on phones the row would wrap into ragged fragments - stack it instead */
@media (max-width:767px){
  #tdi-trust{gap:12px;}
  #tdi-trust>p{white-space:normal}
  #tdi-trust>p:not(:last-child)::after{display:none}
}

/* ===== risk situation cards =====
   IDs (specificity 1,0,0) are required here: Elementor's own
   `.elementor .e-div-block-base` rule is 0,2,0 and would otherwise win. */
#tdi-risk-1,#tdi-risk-2,#tdi-risk-3,#tdi-risk-4,#tdi-risk-5{flex:1 1 205px;border-left:3px solid #6FCF43;transition:transform .55s cubic-bezier(.2,.7,.3,1),background-color .55s ease,
             box-shadow .55s ease,border-left-color .55s ease;}
#tdi-risk-1 img,#tdi-risk-2 img,#tdi-risk-3 img,#tdi-risk-4 img,#tdi-risk-5 img{
  width:75px;height:auto;padding:0;display:block;
  transition:scale .55s cubic-bezier(.2,.7,.3,1)}
#tdi-risk-1 p,#tdi-risk-2 p,#tdi-risk-3 p,#tdi-risk-4 p,#tdi-risk-5 p{
  margin:0;padding:0;font-family:"Work Sans",sans-serif;font-size:22px;
  line-height:1.35;color:#fff}
#tdi-risk-1:hover,#tdi-risk-2:hover,#tdi-risk-3:hover,
#tdi-risk-4:hover,#tdi-risk-5:hover{
  transform:translateY(-5px);background:#193AAE;
  box-shadow:0 12px 26px rgba(0,0,0,.38);border-left-color:#8FE063}
#tdi-risk-1:hover img,#tdi-risk-2:hover img,#tdi-risk-3:hover img,
#tdi-risk-4:hover img,#tdi-risk-5:hover img{scale:1.09}

@media (prefers-reduced-motion:reduce){
  #tdi-risk-1,#tdi-risk-2,#tdi-risk-3,#tdi-risk-4,#tdi-risk-5{transition:none}
  #tdi-risk-1:hover,#tdi-risk-2:hover,#tdi-risk-3:hover,
  #tdi-risk-4:hover,#tdi-risk-5:hover{transform:none}
}

/* ===== statistics: diagonal composition, dual count-up =====
   Laid out as a grid so the two figures sit on opposing corners:
        heading / intro      green square (top right)
        blue circle          source note  (bottom right)
   Each figure drives its own view() timeline, so the circle - being lower on
   the page - naturally counts after the square without hand-tuned delays.
   No JS injection point exists here, so both count-ups are pure CSS: animated
   @property integers feed counters that ::after renders. The real figures stay
   in the DOM (transparent) for screen readers and to hold the layout box. */
@property --tdi-k{syntax:"<integer>";initial-value:0;inherits:false}
@property --tdi-u{syntax:"<integer>";initial-value:0;inherits:false}
@property --tdi-p{syntax:"<integer>";initial-value:0;inherits:false}
@property --tdi-d{syntax:"<integer>";initial-value:0;inherits:false}
@counter-style tdi-pad3{system:numeric;symbols:"0" "1" "2" "3" "4" "5" "6" "7" "8" "9";pad:3 "0"}
@counter-style tdi-pad2{system:numeric;symbols:"0" "1" "2" "3" "4" "5" "6" "7" "8" "9";pad:2 "0"}

/* The circle deliberately bleeds past the section's lower-left corner.
   This MUST be `clip`, not `hidden`: `overflow:hidden` makes the section a
   scroll container, and a view() timeline resolves against the nearest
   scrollport - which never scrolls - freezing every scroll-driven animation
   inside it. `clip` crops identically without establishing one. */
#tdi-stats-section{overflow:clip;}
#tdi-stats-inner{grid-template-columns:minmax(0,1fr) auto;column-gap:56px;row-gap:22px;}
#tdi-stats-heading{grid-column:1;grid-row:1;}
#tdi-stats-intro{grid-column:1;grid-row:2;}
/* spanning rows 1-2 forced BOTH to stretch to the square's height, which is what
   opened the gap under the H2 - start it at row 2 so the copy rows size naturally,
   and pull it up by the row gap so its top meets the H2's baseline edge */
#tdi-stat-1{grid-column:2;grid-row:2/span 2;justify-self:end;margin-top:93px;}
#tdi-stat-2{grid-column:1;grid-row:3;justify-self:start;margin:56px 0 -180px -160px;}
#tdi-stats-source{grid-column:2;grid-row:3;justify-self:end;text-align:right;max-width:340px;}

/* the shapes enclose the figure AND its caption */
#tdi-stat-1,#tdi-stat-2{isolation:isolate;box-sizing:border-box;text-align:center;}
#tdi-stat-1{width:430px;height:430px;padding:44px;}
/* oversized so it reads as a field rather than a badge; the asymmetric padding
   re-centres the figure inside the part of the circle that stays visible */
/* copy is centred horizontally; the extra bottom padding only offsets the
   ~90px the section crops off the base, so it reads centred in what's visible */
#tdi-stat-2{width:850px;height:850px;padding:90px 90px 170px 90px;}
#tdi-stat-1::before,#tdi-stat-2::before{content:"";position:absolute;inset:0;z-index:-1}
/* frame tilted on ::before so the type inside stays level */
#tdi-stat-1::before{background:#6FCF43;border-radius:7px;rotate:-4.5deg}
#tdi-stat-2::before{border-radius:50%;border:1.5px solid rgba(160,235,150,.45);
  background:rgba(10,18,51,.30)}

#tdi-stat1-value,#tdi-stat2-value{width:auto;height:auto;font-size:58px;}
#tdi-stat1-label,#tdi-stat2-label{font-family:"Work Sans",sans-serif;font-size:30px;}
#tdi-stat1-label{max-width:none;}
/* keep the caption from spanning the circle's full 670px content box */
#tdi-stat2-label{max-width:540px;}
/* navy on lime measures 9.3:1; white on lime is only 2.2:1 and fails AA */
#tdi-stat1-value,#tdi-stat1-label{color:#0A1233;}

#tdi-stat2-value{color:#6FCF43;}

@supports (animation-timeline: view()){
  #tdi-stat1-value{color:transparent;
    counter-reset:tdiK var(--tdi-k) tdiU var(--tdi-u);
    animation:tdiCountK linear both,tdiCountU linear both;
    animation-timeline:view();animation-range:cover 14% cover 42%}
  #tdi-stat1-value::after{content:counter(tdiK) "," counter(tdiU,tdi-pad3);
    position:absolute;inset:0;color:#0A1233;font:inherit;letter-spacing:inherit}
  @keyframes tdiCountK{from{--tdi-k:0}to{--tdi-k:27}}
  @keyframes tdiCountU{from{--tdi-u:0}to{--tdi-u:7}}

  /* the circle balloons outward from its own bottom-left corner */
  #tdi-stat-2{animation:tdiBalloon cubic-bezier(.35,.15,.30,1) both;
    transform-origin:78% 82%;
    animation-timeline:view();animation-range:cover 18% cover 56%}
  @keyframes tdiBalloon{from{opacity:0;scale:.18}to{opacity:1;scale:1}}
  #tdi-stat2-value{color:transparent;
    counter-reset:tdiP var(--tdi-p) tdiD var(--tdi-d);
    animation:tdiCountP linear both,tdiCountD linear both;
    animation-timeline:view();animation-range:cover 22% cover 52%}
  #tdi-stat2-value::after{content:counter(tdiP) "." counter(tdiD,tdi-pad2) "%";
    position:absolute;inset:0;color:#6FCF43;font:inherit;letter-spacing:inherit}
  @keyframes tdiCountP{from{--tdi-p:0}to{--tdi-p:54}}
  @keyframes tdiCountD{from{--tdi-d:0}to{--tdi-d:59}}
}

@media (max-width:1100px){
  #tdi-stat-1{width:370px;height:370px;padding:34px}
  #tdi-stat1-label,#tdi-stat2-label{font-size:25px}
  #tdi-stat-2{width:620px;height:620px;padding:70px 70px 130px 70px;margin:48px 0 -140px -120px}
  #tdi-stat1-value,#tdi-stat2-value{font-size:50px}
  #tdi-stats-inner{column-gap:36px}
}
@media (max-width:860px){
  /* stack: heading, intro, square, circle, source */
  #tdi-stats-inner{grid-template-columns:minmax(0,1fr);row-gap:28px}
  #tdi-stats-heading,#tdi-stats-intro,#tdi-stat-1,#tdi-stat-2,#tdi-stats-source{
    grid-column:1;grid-row:auto;justify-self:start;text-align:left}
  #tdi-stat-1{width:320px;height:320px;padding:28px;margin:0;text-align:center}
  #tdi-stat-2{width:400px;height:400px;padding:50px 46px 70px 46px;margin:0 0 28px -60px;text-align:center}
  #tdi-stat1-value,#tdi-stat2-value{font-size:46px}
  #tdi-stat1-label,#tdi-stat2-label{font-size:20px;max-width:none}
  #tdi-stats-source{max-width:none;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  #tdi-stat1-value{color:#0A1233;animation:none}
  #tdi-stat2-value{color:#6FCF43;animation:none}
  #tdi-stat1-value::after,#tdi-stat2-value::after{content:none}
  #tdi-stat-2{animation:none;opacity:1;scale:1}
}

/* ===== dropped-ball motif (risk section) =====
   A large lime circle falls in from above the section, bounces on the card row,
   rolls right, then drops away behind the next section.

   Two things make the "falls from the section above" read work:
   1. `overflow:clip` on the section hides the ball before it enters and after it
      leaves. It MUST be `clip`, not `hidden` - `hidden` makes the section a
      scroll container, which freezes every view() timeline inside it.
   2. The ball reads the SECTION's view progress via a named timeline, not its
      own. Driven by its own position it only started once the card row was
      halfway up the viewport, which is why it appeared so late.

   The ball sits behind the cards and clear of the copy column, so nothing is
   ever read against lime. */
#tdi-risk-section{overflow:clip;view-timeline-name:--tdi-risk;}

#tdi-ball{bottom:100%;left:var(--tdi-ball-x);--tdi-ball-x:82%;--tdi-ball-fall:1050px;width:100px;height:100px;pointer-events:none;box-shadow:0 10px 22px rgba(0,0,0,.34);transform-origin:50% 50%;}

#tdi-ball{animation:tdiBallDrop 5.2s linear both;animation-play-state:paused;}
#tdi-ball.tdi-drop{animation-play-state:running}
@keyframes tdiBallDrop{
  0%  {left:var(--tdi-ball-x);translate:0 -560px;rotate:0deg;animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  18% {left:var(--tdi-ball-x);translate:0 0;rotate:96deg;animation-timing-function:cubic-bezier(.33,.9,.5,1)}
  26% {left:var(--tdi-ball-x);translate:0 -58px;rotate:140deg;animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  34% {left:var(--tdi-ball-x);translate:0 0;rotate:184deg;animation-timing-function:cubic-bezier(.33,.9,.5,1)}
  40% {left:var(--tdi-ball-x);translate:0 -24px;rotate:210deg;animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  46% {left:var(--tdi-ball-x);translate:0 0;rotate:236deg;animation-timing-function:cubic-bezier(.33,.9,.5,1)}
  49% {left:var(--tdi-ball-x);translate:0 -8px;rotate:248deg;animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  52% {left:var(--tdi-ball-x);translate:0 0;rotate:258deg;animation-timing-function:ease}
  69% {left:var(--tdi-ball-x);translate:0 0;rotate:258deg;animation-timing-function:ease-in}
  89% {left:96.5%;translate:0 0;rotate:378deg;animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  100%{left:101%;translate:0 var(--tdi-ball-fall);rotate:466deg}
}

@media (max-width:1100px){
  #tdi-ball{width:84px;height:84px;--tdi-ball-x:80%}
}
@media (max-width:767px){
  #tdi-ball{width:62px;height:62px;--tdi-ball-x:74%;--tdi-ball-fall:1500px;}
}
@media (prefers-reduced-motion:reduce){
  #tdi-ball{display:none}
}

/* ===== hero fill: the solid disc that drops out on first scroll =====
   At rest the circle reads as one solid lime disc. The moment the user scrolls,
   the fill falls away and leaves the rim behind - and the same shape reappears
   falling into the risk section below, so the two read as one object.
   Triggered by a class (timed), not scrubbed: a hero is already most of the way
   through its own scroll range before the first pixel of scrolling happens. */
#tdi-geo-fill{left:0;top:0;margin:-37cqw 0 0 -37cqw;z-index:0;min-height:0;width:74cqw;height:74cqw;animation:tdiFillDrop 1.15s cubic-bezier(.5,.02,.78,.2) both;animation-play-state:paused;}
#tdi-geo-fill.tdi-fell{animation-play-state:running}
@keyframes tdiFillDrop{
  0%  {translate:0 0}
  100%{translate:0 760px}
}
@media (prefers-reduced-motion:reduce){
  #tdi-geo-fill{animation:none;translate:0 0}
}

/* ===== coverage-gap section: exposure shrinks, coverage arrives =====
   Built like the statistics circle: an oversized, translucent, thin-ruled field
   on its own view() timeline, cropped by the section edge. Here it runs the
   other way - the circle contracts while the "Standalone coverage offers" card
   travels in from the right on the SAME range, so the two move together and the
   card ends up in front of what is left of the circle. The circle stops at a
   readable size rather than disappearing, so the exposure is still visible
   around the coverage sitting over it.
   Deliberately not lime: lime means coverage everywhere else on this page, and
   this circle is the gap. */
/* The timeline lives on the SECTION, not the columns. The columns are sticky
   for phase 2, and a sticky element's position in the scrollport is frozen
   while it is pinned, so a view timeline on it stalls exactly when phase 2
   needs to be running. The section keeps scrolling, so it keeps time. */
#tdi-gap-section{overflow:clip;view-timeline-name:--tdi-gap;view-timeline-axis:block;}
/* The runway for the pinned phase. It has to come from the containing block's
   CONTENT box: padding-bottom sits outside it, and a bottom margin on the
   sticky item itself is no good either, because the sticky constraint rect is
   the containing block reduced by the sticky box's own margins - the margin
   cancels itself out exactly. min-height is what actually extends it. */
#tdi-gap-inner{min-height:calc(100vh + 560px);}
#tdi-gap-columns{position:relative;position:sticky;top:calc(50vh - 142px);}
/* 340px is the settled size; the animation starts it 1.45x larger, which bleeds
   past the section's lower edge the way the statistics circle does */
#tdi-gap-ball{left:75%;top:50%;translate:-50% -50%;box-sizing:border-box;width:340px;height:340px;border:1.5px solid rgba(111,207,67,.75);}
#tdi-gap-ball-label{font-family:"Work Sans",sans-serif;font-size:26px;}
/* the card is opaque navy, so this is what puts it in front of the circle */

@supports (animation-timeline: view()){
  /* Each property gets ONE animation across the whole section. Two animations
     on the same property both filling `both` do not take turns: the later one
     in the list wins at all times, so before its own range it pins the property
     to its `from` value and silently cancels the earlier phase. That is what
     broke the card's slide-in. Phases are keyframe stops on one timeline
     instead, with the easing set per interval.
     Stops map to: park -> arrived (phase 1) -> hold while pinned -> centred
     (phase 2) -> gone (phase 3). */

  /* --- the exposure circle: scale across all three phases --- */
  #tdi-gap-ball{animation:tdiGapShrink linear both,
                          tdiGapWarm linear both,
                          tdiGapBallCentre cubic-bezier(.4,0,.2,1) both;
    transform-origin:50% 0%;
    animation-timeline:--tdi-gap,--tdi-gap,--tdi-gap;
    animation-range:cover 22% cover 88%, cover 37.6% cover 43%, cover 46% cover 68%}
  /* 24.2% = cover 38 and 72.7% = cover 70 within the 22-88 range */
  @keyframes tdiGapShrink{
    0%    {scale:1.45;animation-timing-function:linear}
    23.6% {scale:1.45;animation-timing-function:cubic-bezier(.35,.15,.30,1)}
    31.8% {scale:1;animation-timing-function:linear}
    72.7% {scale:1;animation-timing-function:cubic-bezier(.5,0,.75,.2)}
    100%  {scale:0}
  }
  /* grey exposure becomes lime coverage as the standalone card closes over it */
  @keyframes tdiGapWarm{
    from{background-color:rgba(10,18,51,.07);border-color:rgba(60,68,99,.30)}
    to  {background-color:rgba(111,207,67,.22);border-color:rgba(111,207,67,.75)}
  }
  /* the circle rides along to the centre; animating `left` keeps it centred on
     the card without expressing the shift in the circle's own width */
  @keyframes tdiGapBallCentre{from{left:75%}to{left:50%}}

  /* --- the standalone card: one translate track, both phases --- */
  #tdi-gap-standalone{animation:tdiGapCard linear both;
    animation-timeline:--tdi-gap;animation-range:cover 22% cover 68%}
  /* 34.8% = cover 38 and 52.2% = cover 46 within the 22-68 range.
     150%, not 112%: at 112% the card's leading edge still fell inside the
     section and only opacity:0 was hiding it. With no opacity in play it has
     to park fully outside the clip. */
  @keyframes tdiGapCard{
    0%    {translate:150% 0;animation-timing-function:linear}
    28%   {translate:150% 0;animation-timing-function:cubic-bezier(.35,.15,.30,1)}
    54%   {translate:0 0;animation-timing-function:linear}
    60%   {translate:0 0;animation-timing-function:cubic-bezier(.4,0,.2,1)}
    100%  {translate:calc(-50% - 12px) 0}
  }

  /* clear the word before the card reaches it, so it is never half-covered */
  #tdi-gap-ball-label{animation:tdiGapLabelOut linear both;
    animation-timeline:--tdi-gap;animation-range:cover 35% cover 39.5%}
  @keyframes tdiGapLabelOut{0%{opacity:1}62%{opacity:1}100%{opacity:0}}

  /* --- phase 2: the existing-policies card is pushed out past the left --- */
  #tdi-gap-existing{animation:tdiGapPushOut cubic-bezier(.4,0,.2,1) both;
    animation-timeline:--tdi-gap;animation-range:cover 46% cover 68%}
  @keyframes tdiGapPushOut{from{translate:0 0}to{translate:-105vw 0}}
}

@media (max-width:1100px){
  #tdi-gap-ball{width:260px;height:260px}
  #tdi-gap-ball-label{font-size:21px}
}
/* stacked layout: there is no right-hand column to vacate, so show the card */
@media (max-width:767px){

  #tdi-gap-standalone{animation:none;translate:0 0;opacity:1;}
  /* stacked: nothing to pin and nowhere to push a card to */
  #tdi-gap-inner{min-height:0;}
  #tdi-gap-columns{position:relative;top:auto;}
  #tdi-gap-existing{animation:none;translate:0 0;}
}
@media (prefers-reduced-motion:reduce){
  #tdi-gap-inner{min-height:0}
  #tdi-gap-columns{position:relative;top:auto}
  #tdi-gap-existing{animation:none;translate:0 0}
  #tdi-gap-ball{animation:none;scale:1}
  #tdi-gap-ball-label{animation:none;opacity:1}
  #tdi-gap-standalone{animation:none;translate:0 0;opacity:1}
}

/* ===== cost section: the two claim examples as a focused deck =====
   The DRD discourages carousels; this one is an explicit exception, so it is
   built the careful way: user-driven only (no auto-advance), both cards stay in
   the DOM and in the accessibility tree, and with JS off card 1 simply sits in
   front of card 2. Cards are stacked in one grid cell rather than positioned
   absolutely, so the deck still sizes itself to the taller card. */
#tdi-cost-section{overflow:clip;}
#tdi-claims-deck{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto;isolation:isolate;}
/* Both cards stay fully opaque. Two semi-transparent layers overlapping while
   they rotate and scale ghost each other's text into a double image, which is a
   known trigger for motion discomfort - two reviewers flagged it. Depth now
   comes from scale, tilt, offset, shadow and a brightness filter, none of which
   let one card show through the other. */
#tdi-claims-deck>*{grid-area:1/1;width:100%;
  transition:translate .55s cubic-bezier(.22,.7,.3,1),
             rotate .55s cubic-bezier(.22,.7,.3,1),
             scale .55s cubic-bezier(.22,.7,.3,1),
             filter .45s linear}
/* default (also the no-JS state): card 1 in front, card 2 tilted behind it */
#tdi-claim-1{translate:0 0;rotate:0deg;scale:1;opacity:1;}
#tdi-claim-2{translate:10% -2%;rotate:4.5deg;scale:.9;filter:brightness(.72);}
/* JS then drives these, which outrank the two rules above */
#tdi-claims-deck>.tdi-front{translate:0 0;rotate:0deg;scale:1;z-index:3;
  filter:none;cursor:default;box-shadow:0 26px 60px rgba(0,0,0,.34)}
#tdi-claims-deck>.tdi-back{translate:10% -2%;rotate:4.5deg;scale:.9;z-index:1;
  filter:brightness(.72);cursor:pointer;box-shadow:none}

/* The deck is capped at 760px and centred, so the label has to be capped the
   same way or it starts 200px to its left. The negative margin cancels the
   container's 38px flex gap so the label sits 20px above the cards, matching
   the equivalent label in the risk section. */
/* the risk section's equivalent label stays flush-left with its cards; this
   one is centred over the deck, so the two are pinned explicitly rather
   than both inheriting `start` from the document */

/* Both examples are the same two situations the risk section names, so they
   reuse those icons: the named risk, now with a price attached. */
#tdi-claim-1-icon,#tdi-claim-2-icon{height:auto;flex:none;}

#tdi-claims-controls{width:auto;}
#tdi-claim-nav-1,#tdi-claim-nav-2{min-height:0;flex:none;background:transparent;border:1.5px solid rgba(216,225,251,.45);font-family:"Work Sans",sans-serif;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s;}
#tdi-claim-nav-1:hover,#tdi-claim-nav-2:hover{border-color:rgba(216,225,251,.85)}
#tdi-claim-nav-1:focus-visible,#tdi-claim-nav-2:focus-visible{
  outline:2px solid #6FCF43;outline-offset:3px}
/* navy on lime measures 9.3:1 */
#tdi-claim-nav-1.tdi-nav-on,#tdi-claim-nav-2.tdi-nav-on{
  background:#6FCF43;border-color:#6FCF43;color:#0A1233}

@media (max-width:820px){
  #tdi-claims-deck{max-width:100%}
  #tdi-claim-2,#tdi-claims-deck>.tdi-back{translate:6% -1.5%;rotate:3.5deg;scale:.93}
}
@media (prefers-reduced-motion:reduce){
  #tdi-claims-deck>*{transition:none}
}

/* ===== sticky header CTA: absent until the hero's own CTA has gone =====
   There are two "Request a Quote" buttons above the fold otherwise. The header
   one stays out of the way until the hero's has scrolled off, then fades in.
   visibility (not just opacity) is what does the hiding, so the button is out
   of the tab order and the accessibility tree while it is invisible - an
   opacity-0 button is still focusable, which would put keyboard focus on
   something nobody can see. The delayed visibility transition lets the fade
   finish before it is pulled back out. */
#tdi-header-cta{opacity:0;visibility:hidden;transition:opacity .32s ease, visibility 0s linear .32s;}
#tdi-header-cta.tdi-cta-on{opacity:1;visibility:visible;
  transition:opacity .32s ease, visibility 0s linear 0s}
@media (prefers-reduced-motion:reduce){
  #tdi-header-cta{transition:none}
  #tdi-header-cta.tdi-cta-on{transition:none}
}

/* The 54.59% figure sits in the larger circle and carries more of the section,
   so it runs ~10% bigger than the square's figure (58/50/46 -> 64/55/51). */
#tdi-stat2-value{font-size:64px;}
@media (max-width:1100px){#tdi-stat2-value{font-size:55px}}
@media (max-width:767px){#tdi-stat2-value{font-size:51px}}

/* ===== coverage section: the green circle as a field behind the content =====
   Continues the circle motif, sized so the heading, paragraph and card grid all
   sit inside it: at 1440 the content block is 1180x584, which needs 1317px
   corner to corner, so 1300px encloses it to within a few px at the top and
   bottom edges. The section is only 760px tall, so the circle is cropped top
   and bottom the way the statistics circle is cropped by its section.
   isolation:isolate is what keeps the z-index:-1 pseudo-element above the
   section's own background instead of disappearing behind it.
   The fill is deliberately faint: the cards are opaque #132B8C, so the circle
   reads in the gutters and behind the heading, and white body text over the
   tinted navy still measures ~14:1. */
#tdi-coverage-section{overflow:clip;view-timeline-name:--tdi-cov;view-timeline-axis:block;min-height:calc(100vh + 900px);}
/* the panel that pins and then slides out to the left */
/* align-self matters: these sections are flex-direction:row, so the inner
   stretches on the cross (vertical) axis and would grow to fill the runway,
   leaving the sticky element exactly as tall as its containing block and
   therefore nothing to stick through. flex:0 0 auto does not help - that is
   the main axis. */
/* z-index matters: the eligibility section is pulled up over this one and comes
   later in the DOM, so without it that section's navy fill paints straight over
   the coverage content while it is still pinned and on screen. */
/* Each pinned panel is a full-height stage sitting under the 100px sticky
   header, with its content centred in it - that is what gives equal space above
   and below. min-height rather than height so a short viewport lets the stage
   grow with the content instead of overflowing it. */
#tdi-cov-inner{position:sticky;top:100px;min-height:calc(100vh - 100px);justify-content:center;align-self:flex-start;isolation:isolate;}
/* the eligibility section is a SIBLING, so the timeline name declared on the
   coverage section is not in its lookup chain; timeline-scope raises the name
   to a common ancestor so both panels can share one clock */
body{timeline-scope:--tdi-cov}
/* inset:auto and height:auto both matter here. Elementor's own .e-con::before
   rule pins bottom/right AND declares height:max(100%+...,100%); with width and
   height both definite, aspect-ratio is ignored and the circle renders as an
   oval the height of the section. height:auto hands sizing back to the ratio. */
#tdi-cov-inner::before{content:"";position:absolute;z-index:-1;
  inset:auto;left:50%;top:50%;translate:-50% -50%;
  width:min(1300px,98vw);height:auto;aspect-ratio:1;border-radius:50%;
  background:#6FCF43;border:0}
/* Solid lime means white type over it measures 2.2:1 and fails AA, so the
   heading and intro are navy instead, which measures 9.3:1. This is also the
   no-animation fallback: there the circle is already full size. */

@supports (animation-timeline: view()){
  /* grows from a dot to full size, finishing as the card grid comes fully into
     view (cover 40% at a 900px viewport) */
  #tdi-cov-inner::before{
    animation:tdiCovGrow cubic-bezier(.35,.15,.30,1) both;
    animation-timeline:--tdi-cov;animation-range:cover 6% cover 28%}
  @keyframes tdiCovGrow{from{scale:.16;opacity:0}to{scale:1;opacity:1}}

  /* The type is navy throughout and simply fades up. The fade cannot finish
     before the lime is underneath it, or navy would land on navy, so it runs
     from just before the circle reaches the heading to just after it settles. */
  /* Measured: the circle fully covers the heading at cover ~23% and the intro
     at ~33%, so each fade starts once its own line has lime behind it. The
     heading leads the intro by a step rather than both moving together. */
  #tdi-cov-h2{animation:tdiCovFade linear both;
    animation-timeline:--tdi-cov;animation-range:cover 17% cover 23%}
  #tdi-cov-intro{animation:tdiCovFade linear both;
    animation-timeline:--tdi-cov;animation-range:cover 22% cover 28%}
  @keyframes tdiCovFade{from{opacity:0}to{opacity:1}}
}

/* Stacked layout: the content column becomes 335x1450, which would need a
   1488px circle to enclose - on a 375px screen that is a vertical band with no
   visible curvature, not a circle. A circle that reads as one is instead far
   too small for the section. Neither is worth having, so it is dropped. */
@media (max-width:767px){
  #tdi-cov-inner::before{display:none}
  /* no lime circle here, so the type must stay light - otherwise the navy it
     flips to for the circle would sit on the navy section and vanish */
  #tdi-cov-h2{animation:none;}
  #tdi-cov-intro{animation:none;}
}
@media (prefers-reduced-motion:reduce){
  #tdi-cov-inner::before{animation:none;scale:1;opacity:1}
  #tdi-cov-h2,#tdi-cov-intro{animation:none}
}

/* ===== coverage cards: same treatment as the risk situation cards =====
   Identical fill, radius, lime left bar, timing and hover behaviour. IDs again,
   because Elementor's own .e-div-block-base rule is 0,2,0 and would win. */
/* The bar has the lime circle on one side and the card's own #132B8C on the
   other, so no single colour is strong against both. White was the most
   lopsided plausible option - 11.99:1 on the card, 1.97:1 on the lime - which
   is why it read as a stray line rather than an edge. This darkened green is
   the balanced one (2.61 / 2.34) and sits in the circle's own hue, so it reads
   as a shadowed edge. Hover lifts it to full lime, 6:1 against the card. */
#tdi-cov-1,#tdi-cov-2,#tdi-cov-3,#tdi-cov-4,#tdi-cov-5{border-left:3px solid #2E7D32;transition:transform .55s cubic-bezier(.2,.7,.3,1),background-color .55s ease,
             box-shadow .55s ease,border-left-color .55s ease;}
#tdi-cov-1:hover,#tdi-cov-2:hover,#tdi-cov-3:hover,
#tdi-cov-4:hover,#tdi-cov-5:hover{
  transform:translateY(-5px);background:#0B35C8;
  box-shadow:0 12px 26px rgba(0,0,0,.38);border-left-color:#6FCF43}

@media (prefers-reduced-motion:reduce){
  #tdi-cov-1,#tdi-cov-2,#tdi-cov-3,#tdi-cov-4,#tdi-cov-5{transition:none}
  #tdi-cov-1:hover,#tdi-cov-2:hover,#tdi-cov-3:hover,
  #tdi-cov-4:hover,#tdi-cov-5:hover{transform:none}
}

/* ===== coverage -> eligibility: a horizontal hand-off on one dark stage =====
   The eligibility section is pulled up over the coverage section's runway so the
   two coexist on screen, and both panels are pinned at the SAME top offset, so
   whenever both are in their pinned range they occupy the same place and can be
   slid past one another. The dark blue is continuous across the hand-off, so
   the eligibility section carries it permanently rather than its old light fill,
   and its type is re-set for that ground. */
#tdi-elig-section{overflow:clip;margin-top:-1350px;min-height:calc(100vh + 700px);}
#tdi-elig-inner{position:sticky;top:100px;min-height:calc(100vh - 100px);justify-content:center;align-self:flex-start;}
/* white 18:1 and #C7D2F5 13:1 on #0A1233; the two columns already carry their
   own fills (#0027AA and white) and read fine on navy unchanged */

/* Once the section went navy this note's own light chip was the only pale
   block left in it. The chip is now a faint lift off the section instead, with
   light type to match everything around it. */
#tdi-elig-note{border:1px solid rgba(255,255,255,.13);}

@supports (animation-timeline: view()){
  #tdi-cov-inner{animation:tdiCovOut cubic-bezier(.4,0,.2,1) both;
    animation-timeline:--tdi-cov;animation-range:cover 44% cover 60%}
  @keyframes tdiCovOut{from{translate:0 0}to{translate:-105vw 0}}

  #tdi-elig-inner{animation:tdiEligIn cubic-bezier(.4,0,.2,1) both;
    animation-timeline:--tdi-cov;animation-range:cover 44% cover 60%}
  @keyframes tdiEligIn{from{translate:105vw 0}to{translate:0 0}}
}

/* stacked: no room to pin or slide, so both sections behave normally */
@media (max-width:767px){
  #tdi-coverage-section{min-height:0;}
  #tdi-cov-inner{position:relative;top:auto;min-height:0;justify-content:normal;align-self:auto;animation:none;translate:0 0;}
  #tdi-elig-section{margin-top:0;min-height:0;}
  #tdi-elig-inner{position:relative;top:auto;min-height:0;justify-content:normal;align-self:auto;animation:none;translate:0 0;}
}
@media (prefers-reduced-motion:reduce){
  #tdi-coverage-section{min-height:0}
  #tdi-cov-inner{position:relative;top:auto;min-height:0;justify-content:normal;align-self:auto;animation:none;translate:0 0}
  #tdi-elig-section{margin-top:0;min-height:0}
  #tdi-elig-inner{position:relative;top:auto;min-height:0;justify-content:normal;align-self:auto;animation:none;translate:0 0}
}

/* ===== eligibility: lime bullets on the "generally eligible" list ===== */
#tdi-elig-yes p{position:relative;padding-left:24px}
#tdi-elig-yes p::before{content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border-radius:50%;background:#6FCF43}

/* ===== process: moved off navy =====
   It was navy cards on a navy section, sitting directly below the (now also
   navy) eligibility section - an invisible seam and a muddy palette. Light
   ground restores the alternation and lets the lime work as an accent rather
   than as body colour. The step numbers become lime discs with navy figures
   (9.3:1) instead of lime text, which on white would have been ~1.9:1. */

#tdi-process-intro{color:#3C4463}
#tdi-step-1,#tdi-step-2,#tdi-step-3{border:1px solid #DDE4F5;box-shadow:0 2px 10px rgba(10,18,51,.05);}
#tdi-step-1>h3:first-child,#tdi-step-2>h3:first-child,#tdi-step-3>h3:first-child{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:#6FCF43;color:#0A1233;font-size:17px;letter-spacing:0}
#tdi-step-1>h3:nth-child(2),#tdi-step-2>h3:nth-child(2),#tdi-step-3>h3:nth-child(2){color:#0A1233}
#tdi-step-1>p,#tdi-step-2>p,#tdi-step-3>p{color:#4A5270}

/* ===== FAQ: white ground, divider list, accordion =====
   White rather than the old lavender: the cards were white on #F4F6FD, which
   left them barely distinguishable from the ground. Collapsed rows read better
   as a ruled list than as floating cards. */

#tdi-faq-1,#tdi-faq-2,#tdi-faq-3,#tdi-faq-4,#tdi-faq-5{background:transparent;border-bottom:1px solid #E2E8F6;box-shadow:none;}
.tdi-faq-q{position:relative;cursor:pointer;margin:0;padding:22px 44px 22px 0;
  color:#0A1233;transition:color .2s ease}
.tdi-faq-q:hover{color:#1D37A8}
.tdi-faq-q:focus-visible{outline:2px solid #6FCF43;outline-offset:3px}
/* chevron */
.tdi-faq-q::after{content:"";position:absolute;right:8px;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2.5px solid #6FCF43;border-bottom:2.5px solid #6FCF43;
  rotate:45deg;transition:rotate .3s ease,margin-top .3s ease}
.tdi-faq-open .tdi-faq-q::after{rotate:225deg;margin-top:-2px}
.tdi-faq-a{overflow:hidden;max-height:0;opacity:0;margin:0;color:#4A5270;
  transition:max-height .38s ease,opacity .28s ease,padding .38s ease;padding:0}
.tdi-faq-open .tdi-faq-a{max-height:420px;opacity:1;padding:0 44px 24px 0}

@media (prefers-reduced-motion:reduce){
  .tdi-faq-q::after,.tdi-faq-a{transition:none}
}

/* ===== hero lockup replaces the eyebrow; header holds back until past the fold
   The eyebrow read "Tenant Discrimination Insurance" directly beneath a logo
   saying the same thing. The lockup now does that job in the hero, and the
   header stays empty until the hero has scrolled away.
   Targeted by [data-id] rather than by an id: these elements' _cssid edits are
   sitting in an unpublished revision, and data-id is already on the live DOM.
   The text stays in the document and is only visually replaced, so the product
   name is still announced by screen readers and still indexable. */
/* single-line lockup, recomposed from the original artwork so the letterforms
   are unchanged - "Insurance" now sits on the same line as "Tenant
   Discrimination" with the sub-line right-aligned beneath. 1929x173 (ratio
   11.15) against the stacked version's 6.04, so it is set wider to keep a
   comparable cap height. */
#tdi-hero-section [data-id="3564abb6"]{
  display:block;width:min(420px,78vw);aspect-ratio:1929/173;height:auto;
  background:url("https://tdguard.com/wp-content/uploads/2026/09/tdi_lockup_oneline.png")
    no-repeat left center/contain;
  font-size:0;line-height:0;color:transparent;letter-spacing:0;
  margin:0 0 14px;padding:0}

/* The 100px header band is empty above the fold, so 96px of hero padding on top
   of it left 196px of dead navy before the lockup. */
#tdi-hero-section{padding-top:clamp(28px,3.4vw,40px);}

/* the header's own fill matches the hero exactly, so an emptied header is
   invisible above the fold - no layout shift, nothing moves up */
.elementor .elementor-element-2b288e0b.e-con{
  border-bottom-color:transparent;transition:border-bottom-color .32s ease}
.elementor .elementor-element-2b288e0b.e-con.tdi-cta-on{border-bottom-color:#1E2A5A}
[data-id="4bbcd0da"]{opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s linear .32s;}
[data-id="4bbcd0da"].tdi-cta-on{opacity:1;visibility:visible;
  transition:opacity .32s ease,visibility 0s linear 0s}

@media (prefers-reduced-motion:reduce){
  .elementor-element-2b288e0b,[data-id="4bbcd0da"]{transition:none}
}

/* ===== coverage-gap section moved onto the statistics blue =====
   The near-white ground read as a hard break against the dark sections either
   side of it. #0027AA is the same blue the statistics section uses, so the
   section now sits inside the page's existing palette.
   Everything that was dark-on-light has to move with it: the heading measured
   1.5:1 and the intro 1.2:1 against this blue. Scoped through the section id so
   these beat Elementor's own (0,2,0) class rules. */

#tdi-gap-section [data-id="5f95c94a"]{color:#FFFFFF}          /* heading  11.2:1 */
#tdi-gap-section [data-id="639b64f4"]{color:#C7D2F5}          /* intro     7.5:1 */

/* The circle was a faint navy tint built for a near-white ground and all but
   vanishes on blue; it now starts as a pale ring and still resolves to lime. */
#tdi-gap-ball{border:1.5px solid rgba(111,207,67,.9);}

@supports (animation-timeline: view()){
  @keyframes tdiGapWarm{
    from{background-color:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42)}
    to  {background-color:rgba(111,207,67,.28);border-color:rgba(111,207,67,.9)}
  }
}

/* The navy card only separates from this blue at 1.6:1, where against the old
   near-white ground it was the section's strongest shape. An inset ring plus a
   cast shadow give it an edge again; both are paint-only, so the slide and pin
   geometry measured elsewhere is untouched. */
#tdi-gap-standalone{box-shadow:0 18px 40px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.16);}

/* The ring sits low inside its own 430px box (the house is anchored toward the
   base), so its centre landed 39px below the copy block's centre at 1440.
   Shifting the whole composition keeps the house and ring in register; -9% of
   the geo's own height is that 39px and scales with it. translate is
   paint-only, so the hero's height and the trust row are unaffected. */
#tdi-geo{translate:0 -9%;}

/* ===== process + FAQ brought back onto the dark palette =====
   These two were the only light sections left and read as a different template.
   Process takes the risk section's exact combination (#0F1E63 ground, #132B8C
   cards, lime left bar) - that pairing is only 1.26:1 on its own, which is why
   the risk cards carry the bar; it does the separating. FAQ takes the deepest
   navy so it still steps away from the process section above it. */

#tdi-process-intro{color:#C7D2F5}
#tdi-step-1,#tdi-step-2,#tdi-step-3{border:0;border-left:3px solid #6FCF43;box-shadow:0 10px 26px rgba(0,0,0,.26);}
#tdi-step-1>h3:nth-child(2),#tdi-step-2>h3:nth-child(2),#tdi-step-3>h3:nth-child(2){color:#FFFFFF}
#tdi-step-1>p,#tdi-step-2>p,#tdi-step-3>p{color:#C7D2F5}

#tdi-faq-1,#tdi-faq-2,#tdi-faq-3,#tdi-faq-4,#tdi-faq-5{border-bottom:1px solid rgba(255,255,255,.13);}
#tdi-faq-section .tdi-faq-q{color:#FFFFFF}
#tdi-faq-section .tdi-faq-q:hover{color:#8FE063}
#tdi-faq-section .tdi-faq-a{color:#C7D2F5}

/* ===== new quote-form fields =====
   Property address and unit count. They render with a class that carries no
   style record, so they are matched to the existing fields by id instead -
   which is stable regardless of which class Elementor assigns them. */


label[for="tdi-address"],label[for="tdi-units"],label[for="tdi-sqft"]{
  display:block;font-family:"Work Sans",sans-serif;font-size:15px;font-weight:600;
  color:#FFFFFF;letter-spacing:normal;text-transform:none}
/* number spinners add visual noise next to a plain text field */



/* ===== "Currently ineligible" card =====
   It was pure white on the navy section - the brightest element in the section,
   which read louder than "Generally eligible" beside it and inverted the
   emphasis. It now sits back: a faint lift off the section rather than a panel,
   keeping its 4px accent bar so the pair still reads as a matched set. */
#tdi-elig-section [data-id="47f4275a"]{
  background:rgba(255,255,255,.055);
  border-top-color:rgba(255,255,255,.26)}
#tdi-elig-section [data-id="14e317bb"]{color:#FFFFFF}
#tdi-elig-section [data-id="47f4275a"] p{color:#9FB0DE}

/* The consequence paragraph now sits below the card row, which is exactly where
   the ball falls away. Lifting it above the ball (z-index 3) keeps the text
   legible as the ball drops behind it rather than across it. */
#tdi-risk-section [data-id="7ea6bdfe"]{
  position:relative;z-index:4;margin-top:34px}

/* ===== quote section backdrop =====
   The form is a 720px column centred in a much wider blue field, so the margins
   read as empty. A large circle anchored off the right edge fills that without
   competing: it sits behind everything at z-index -1, and the fill is kept very
   low so the white inputs still read as the brightest thing in the section.
   inset:auto and height:auto are required - Elementor's own .e-con::before rule
   pins bottom/right and declares a height, which would make this an oval. */
.elementor .elementor-element-1dc2694b{position:relative;isolation:isolate;overflow:clip}
.elementor .elementor-element-1dc2694b::before{
  content:"";position:absolute;z-index:-1;
  inset:auto;left:calc(50% + 380px);top:50%;translate:0 -50%;
  width:min(1050px,118vw);height:auto;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(111,207,67,.22)}

/* ===== quote section: form left, reassurance right =====
   Two columns from 1100px up. The aside is pinned to the form's row so the
   ratings sit beside the fields rather than below the fold of the section. */

#tdi-form-next-label{font-family:"Work Sans",sans-serif;}
#tdi-form-next{font-family:"Work Sans",sans-serif;}
#tdi-form-trust-1,#tdi-form-trust-2,#tdi-form-trust-3,#tdi-form-trust-4{font-family:"Work Sans",sans-serif;}
#tdi-form-trust-1{border-top:1px solid rgba(255,255,255,.20);}
#tdi-form-aside strong{color:#6FCF43;font-weight:700}

@media (min-width:1100px){
  #tdi-form-inner{display:grid;max-width:1140px;
    grid-template-columns:700px minmax(0,1fr);column-gap:64px;align-items:start}
  #tdi-form-inner>[data-id="26a013ff"]{grid-column:1;grid-row:1}
  #tdi-form-inner>[data-id="75c63a08"]{grid-column:1;grid-row:2}
  #tdi-form-inner>[data-id="4bc09665"]{grid-column:1;grid-row:3}
  #tdi-form-inner>[data-id="3c70ead4"]{grid-column:1;grid-row:4}
  /* aligned with the form itself, not the heading */
  #tdi-form-aside{grid-column:2;grid-row:3/span 2;align-self:start;margin-top:6px}
}
/* stacked: the aside follows the form */
@media (max-width:1099px){
  #tdi-form-aside{margin-top:36px}
}

/* required-field asterisks. The inputs already carry the `required` attribute,
   so assistive tech announces the state programmatically; the asterisk is the
   visual affordance the intro line refers to. */
#tdi-form-inner label span{color:#6FCF43;font-weight:700;margin-left:1px}
/* footnote markers on the ratings — raised, and kept out of the line box */
#tdi-trust sup,
#tdi-form-trust-2 sup,#tdi-form-trust-3 sup,#tdi-form-trust-4 sup{
  font-size:.72em;line-height:0;vertical-align:super;margin-left:1px;opacity:.85}

/* ===================== header anchor nav ===================== */
/* anchor targets clear the 100px sticky header */

/* the links group with the CTA on the right rather than floating centre:
   the logo lockup is wide, so a centred nav makes three competing zones */
#tdi-nav{margin-left:auto;margin-right:16px;width:auto;}
#tdi-nav a{
  font-family:"Work Sans",sans-serif;font-size:15px;font-weight:500;line-height:1.3;
  color:#C7D2F5;background:none;border:0;border-radius:0;padding:6px 2px;
  text-decoration:none;white-space:nowrap;position:relative;
  transition:color .2s ease}
#tdi-nav a:hover,#tdi-nav a:focus-visible{color:#FFFFFF;background:none}
#tdi-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:#6FCF43;scale:0 1;transform-origin:left center;transition:scale .22s ease}
#tdi-nav a:hover::after,#tdi-nav a.tdi-nav-active::after{scale:1 1}
#tdi-nav a.tdi-nav-active{color:#FFFFFF}

/* the nav reveals with the rest of the header, once the hero CTA is gone */
#tdi-nav{opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s linear .32s;}
#tdi-nav.tdi-cta-on{opacity:1;visibility:visible;
  transition:opacity .32s ease,visibility 0s linear 0s}

#tdi-nav-toggle{background:none;border:1px solid #1E2A5A;color:#FFFFFF;font-family:"Work Sans",sans-serif;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s linear .32s;}
#tdi-nav-toggle.tdi-cta-on{opacity:1;visibility:visible;
  transition:opacity .32s ease,visibility 0s linear 0s}
#tdi-nav-toggle:hover{border-color:#6FCF43}

/* below 1024px the links collapse into a panel under the bar */
@media (max-width:1024px){
  /* the toggle becomes a hamburger. The word "Menu" stays in the DOM and in
     the accessibility tree, sized away the same way the hero lockup is: three
     bars are the middle background stripe plus the two pseudo-elements, which
     cross into an X while the panel is open. */
  #tdi-nav-toggle{flex:0 0 40px;color:transparent;background-image:linear-gradient(#FFFFFF,#FFFFFF);background-size:18px 2px;background-position:center;background-repeat:no-repeat;}
  #tdi-nav-toggle::before,#tdi-nav-toggle::after{
    content:"";position:absolute;left:50%;top:50%;
    width:18px;height:2px;border-radius:1px;background:#FFFFFF;
    transition:translate .24s ease,rotate .24s ease}
  #tdi-nav-toggle::before{translate:-50% calc(-50% - 6px)}
  #tdi-nav-toggle::after{translate:-50% calc(-50% + 6px)}
  #tdi-nav-toggle[aria-expanded="true"]{background-size:0 2px}
  #tdi-nav-toggle[aria-expanded="true"]::before{translate:-50% -50%;rotate:45deg}
  #tdi-nav-toggle[aria-expanded="true"]::after{translate:-50% -50%;rotate:-45deg}
  @media (prefers-reduced-motion:reduce){
    #tdi-nav-toggle::before,#tdi-nav-toggle::after{transition:none}
  }
  /* -24px reaches past the header's own inline padding so the panel
     spans the full bar rather than sitting inset inside it */
  #tdi-nav{top:100%;left:-24px;right:-24px;width:auto;margin:0;border-bottom:1px solid #1E2A5A;max-height:0;overflow:hidden;transition:max-height .3s ease,opacity .2s ease,visibility 0s linear .3s;}
  #tdi-nav.tdi-cta-on{opacity:1;visibility:hidden;transition:max-height .3s ease,visibility 0s linear .3s}
  #tdi-nav.tdi-cta-on.tdi-nav-open{max-height:320px;visibility:visible;
    transition:max-height .3s ease,visibility 0s linear 0s}
  #tdi-nav a{padding:13px 0;font-size:16px;
    border-bottom:1px solid rgba(255,255,255,.08)}
  #tdi-nav a:last-child{border-bottom:0}
  #tdi-nav a::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  #tdi-nav,#tdi-nav.tdi-cta-on,#tdi-nav-toggle,#tdi-nav a,#tdi-nav a::after{transition:none}
}

/* The bar runs out of room at phone widths: logo 168 + toggle 40 + CTA 138 +
   gaps needs 370px against 327px available, so the CTA was overhanging the
   right padding and the (contentless) toggle was silently absorbing the rest.
   Trim the bar's own padding, the gaps and the lockup so the CTA keeps its
   full label. */
@media (max-width:767px){
  .elementor .elementor-element-2b288e0b.e-con{padding-left:16px;padding-right:16px}
  .elementor [data-id="311a7ebc"]{gap:8px}  /* inner padding is set natively */
  /* logo width on mobile is a native Elementor setting, not overridden here */
  /* the dropdown panel is keyed to the bar's padding, so it follows it down */
  #tdi-nav{left:-16px;right:-16px;}
}

/* Form inputs: scoped to the form rather than listed by id, so fields added
   later inherit the styling instead of falling back to browser defaults. */
#tdi-form-inner input{font-family:"Work Sans",sans-serif;
  border:1px solid #A9B8E8;outline-color:#141A33}
#tdi-form-inner input::placeholder{color:#9DA5AE}
#tdi-form-inner input[type=number]{-moz-appearance:textfield;appearance:textfield}
#tdi-form-inner input[type=number]::-webkit-outer-spin-button,
#tdi-form-inner input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Quote form layout. A four-column grid so short fields pair up and the form
   reads as six rows rather than ten. Grid rather than native settings because
   column spans have no equivalent in the form widget's own properties.
   The specific rules repeat #tdi-form-inner so they out-rank the span-4
   default, which would otherwise win on specificity. */
@media (min-width:768px){
  #tdi-form-inner form{display:grid;grid-template-columns:repeat(4,1fr);
    column-gap:16px;row-gap:20px;align-items:start}
  #tdi-form-inner form > *{grid-column:span 4}
  #tdi-form-inner #tdi-fg-name,#tdi-form-inner #tdi-fg-business,
  #tdi-form-inner #tdi-fg-email,#tdi-form-inner #tdi-fg-phone,
  #tdi-form-inner #tdi-fg-city,
  #tdi-form-inner #tdi-fg-units,#tdi-form-inner #tdi-fg-sqft{grid-column:span 2}
  #tdi-form-inner #tdi-fg-state,#tdi-form-inner #tdi-fg-zip{grid-column:span 1}
}/* End custom CSS */