/* Keys in hand section. Cream fades use rgba(250,246,239,*), never the transparent keyword. */

.kdrive{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--cream);
  /* The photo carries drop-shadow(0 14px 26px), which reaches 40px below its own
     box, and the script quote hangs 14px past it. With zero bottom padding the
     section ended exactly on its content and overflow:hidden sliced both off in a
     straight line. 28px clears them; the rule below takes the same 28px off the
     next section's top margin so the spacing is unchanged. */
  padding:var(--gap) 0 28px;
}
.kdrive + .island-showcase{margin-top:calc(var(--gap) - 28px);}
/* Section canvas, lifted from the keys-in-hand-v2 preview. background-art.md
   contract: full bleed, no boxed plate, the filter lives on the plate layer and
   the cream veil is a sibling, never a child of the filtered element. The art is
   wash-coast, already feathered to alpha, oversized at 165%/155% so its own edges
   sit off canvas. Both neighbours are cream, so the smootherstep ramps at 0 to 14%
   and 86 to 100% seal the seams without printing a line. */
.kdrive__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.kdrive__bg::before{
  content:"";position:absolute;inset:0;
  background:url('/assets/img/art/wash-coast.webp') center center / 165% 155% no-repeat;
  opacity:.9;
  filter:saturate(.62) contrast(.94) brightness(1.02) sepia(.3) hue-rotate(-8deg);
}
.kdrive__bg::after{
  content:"";position:absolute;inset:0;
  /* The ramps hold alpha 1 through the first and last 3% rather than only
     reaching it at 0% and 100%. Before, the veil was still a shade short of
     opaque on the section's final row, so 0.65 levels of plate survived to the
     very edge and then vanished at the boundary: a one pixel step, which is
     exactly what reads as a hard line. Quintic smootherstep per fade-effect.md;
     the clear stop is rgba(250,246,239,0), never the transparent keyword. */
  background:
    linear-gradient(to bottom,
      rgba(250,246,239,1) 0%, rgba(250,246,239,1) 3.0%, rgba(250,246,239,0.99) 4.4%, rgba(250,246,239,0.94) 5.8%, rgba(250,246,239,0.84) 7.2%, rgba(250,246,239,0.68) 8.6%, rgba(250,246,239,0.5) 10.0%, rgba(250,246,239,0.32) 11.4%, rgba(250,246,239,0.16) 12.8%, rgba(250,246,239,0.06) 14.2%, rgba(250,246,239,0.01) 15.6%, rgba(250,246,239,0) 17.0%,
      rgba(250,246,239,0) 83%, rgba(250,246,239,0) 83.0%, rgba(250,246,239,0.01) 84.4%, rgba(250,246,239,0.06) 85.8%, rgba(250,246,239,0.16) 87.2%, rgba(250,246,239,0.32) 88.6%, rgba(250,246,239,0.5) 90.0%, rgba(250,246,239,0.68) 91.4%, rgba(250,246,239,0.84) 92.8%, rgba(250,246,239,0.94) 94.2%, rgba(250,246,239,0.99) 95.6%, rgba(250,246,239,1) 97.0%,
      rgba(250,246,239,1) 100%),
    rgba(250,246,239,.14);
}
.kdrive__palm{
  position:absolute;z-index:1;left:0;right:auto;top:clamp(36px,5.5vw,64px);bottom:0;pointer-events:none;
  width:clamp(160px,20vw,330px);opacity:.2;transform:none;
}
.kdrive__palm img{
  display:block;width:100%;height:100%;object-fit:contain;object-position:left top;
}
.kdrive__palm--r{
  left:auto;right:0;top:0;
  overflow:hidden;
  opacity:1;
  transform:scaleX(-1);
}
.kdrive__palm--r img{
  object-position:left bottom;
  opacity:.2;
  transform:translateY(clamp(110px,16vw,230px));
}
.kdrive__palm--r::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:clamp(110px,26%,190px);pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(250,246,239,0) 0%,
    rgba(250,246,239,.01) 10%,
    rgba(250,246,239,.06) 20%,
    rgba(250,246,239,.16) 30%,
    rgba(250,246,239,.32) 40%,
    rgba(250,246,239,.5) 50%,
    rgba(250,246,239,.68) 60%,
    rgba(250,246,239,.84) 70%,
    rgba(250,246,239,.94) 80%,
    rgba(250,246,239,.99) 90%,
    rgba(250,246,239,1) 100%);
}
.bay + .kdrive{padding-top:var(--gap);}
.kdrive__brand{
  position:absolute;z-index:3;left:clamp(22px,4vw,70px);bottom:18px;margin:0;
  font-family:var(--text);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#bd9652;line-height:1.45;
}
.kdrive__ahead{
  position:absolute;z-index:3;right:clamp(22px,4vw,64px);bottom:22px;margin:0;
  font-family:var(--script);font-size:clamp(18px,1.6vw,26px);line-height:.92;
  color:#4F8A7E;text-align:right;transform:rotate(-8deg);
}
.kdrive__link{
  position:absolute;z-index:3;left:48%;top:42%;width:min(12vw,110px);height:38%;
  pointer-events:none;
}
.kdrive__note{
  position:absolute;z-index:5;right:5.5%;top:5%;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  color:#bd9652;pointer-events:none;
}
.kdrive__note svg{width:28px;height:28px;}
.kdrive__note p{
  margin:0;font-family:var(--script);font-size:clamp(18px,1.6vw,24px);
  line-height:.92;text-align:right;transform:rotate(-8deg);
}

.kdrive__in{position:relative;z-index:2;}
.kdrive__head{max-width:46rem;margin:0 0 clamp(8px,1.4vw,18px);}
.kdrive__head h2{
  margin:0;font-size:clamp(40px,4.4vw,62px);line-height:.94;
  letter-spacing:-.026em;color:var(--navy);
}
.kdrive__head .script{
  display:inline-block;margin-left:.08em;font-size:1.08em;line-height:.86;
  transform:translateY(.08em);position:relative;
}
.kdrive__head .script:after{
  content:"";position:absolute;left:4%;right:8%;bottom:-.06em;height:2px;
  background:#bd9652;border-radius:50%;transform:rotate(-8deg);
}
.kdrive__lead{
  max-width:38ch;margin:0 0 8px;
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.62;color:var(--ink-soft);
}

.kdrive__row{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,56px);align-items:end;
  padding-bottom:28px;
}
/* The art was 575x343 against a 352 tall step stack, so the left column read
   lighter than the words beside it. Giving the art more of the row and tightening
   the gutter takes it to 639x381, and evens the three step cards, where the first
   used to be a line shorter. Only above 1240px: the step column needs ~475px or
   the Book Now row breaks in two, which it already did on its own below 1100. */
@media (min-width:1240px){
  .kdrive__row{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:32px;}
}
.kdrive__left{min-width:0;}
.kdrive__art{position:relative;container-type:inline-size;container-name:kdrive-art;max-width:720px;margin-top:-8px;overflow:visible;}
.kdrive__frame{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 14px 26px rgba(14,36,69,.16));
}
/* Same seal family as .handover__badge: ground #264E4B, cream rim,
   dashed then solid gold rings, lockup type. Copy stays 3 / STOPS / THEN GO. */
.kdrive__badge{
  position:absolute;z-index:5;left:8%;bottom:16%;width:18%;aspect-ratio:1;
  overflow:hidden;border:2.5px solid var(--cream);border-radius:50%;
  background:
    radial-gradient(circle at 34% 20%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 58%),
    #264E4B;
  color:#fff;text-align:center;
  container-type:inline-size;
  box-shadow:0 0 0 1px rgba(38,78,75,.22),0 14px 26px -14px rgba(14,36,69,.5);
}
.kdrive__badge::before{
  content:"";position:absolute;inset:3.5%;border:1px dashed rgba(225,211,159,.5);
  border-radius:50%;pointer-events:none;
}
.kdrive__badge::after{
  content:"";position:absolute;inset:6.4%;border:1px solid rgba(225,211,159,.8);
  border-radius:50%;pointer-events:none;
}
/* Same proportional system as the handover seal, so the two read as one family.
   The gap under the numeral was 1.5cqi against the handover's 4.14, and the type
   ran relatively larger, which is what made this one feel packed. */
.kdrive__badge-in{
  position:absolute;z-index:1;inset:10%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:0;text-align:center;
}
.kdrive__badge-palm{flex:none;width:17.37cqi;height:auto;aspect-ratio:1;margin:0 auto 5.30cqi;display:block;}
/* Optical spacing, measured off the render rather than the box model: the palm
   artwork leaves 4.4px empty at the bottom of its own box and the display
   numeral sits ~5.5px low in its line box, so the box gaps read even while the
   ink showed a 15.9px hole under the palm against 4.5px below the numeral. The
   negative top margin takes that dead space out, the wider day margin gives the
   unit line back the room it lost. */
.kdrive__badge strong{display:block;font-family:var(--disp);font-size:30.22cqi;margin-top:-7.04cqi;font-weight:400;line-height:.9;letter-spacing:.005em;color:#fff;}
.kdrive__badge-day{display:block;margin-top:7.94cqi;font-family:var(--text);font-size:7.71cqi;font-weight:400;line-height:1;letter-spacing:.24em;text-indent:.24em;color:#fff;}
.kdrive__badge-rule{display:block;width:42%;height:1px;margin:6.04cqi 0 5.30cqi;background:rgba(225,211,159,.72);}
.kdrive__badge small{display:block;font-family:var(--text);font-size:6.66cqi;font-weight:400;line-height:1;letter-spacing:.12em;text-indent:.12em;color:#E1D39F;white-space:nowrap;}

/* The badge stays at 18% of the photo, so on narrow layouts it draws at 63px and
   a five element stack stops being readable: THEN GO computes to 3.9px there. The
   wording drops in two stages and what remains scales up to fill the smaller disc,
   so the spacing reads the same at every size. The aria-label carries the full
   phrase regardless. Queried against the badge, which is its own container. */
@container (max-width:95px){
  .kdrive__badge-rule,
  .kdrive__badge small{display:none;}
  .kdrive__badge-palm{width:21.19cqi;margin-bottom:6.47cqi;}
  .kdrive__badge strong{font-size:36.87cqi;margin-top:-8.59cqi;}
  .kdrive__badge-day{margin-top:9.69cqi;font-size:9.41cqi;}
}
@container (max-width:72px){
  .kdrive__badge-day{display:none;}
  /* with only the palm and the numeral left the ink measured 1.62px below the
     disc centre; padding lifts it without tightening the gap between them */
  .kdrive__badge-in{padding-bottom:5.6cqi;}
  .kdrive__badge-palm{width:26.06cqi;margin-bottom:7.95cqi;}
  .kdrive__badge strong{font-size:45.33cqi;margin-top:-10.56cqi;}
}
.kdrive__quote{
  position:absolute;z-index:6;right:4%;bottom:-6%;
  margin:0;max-width:18ch;padding:10px 14px 12px;
  font-family:var(--script);font-size:clamp(18px,1.7vw,26px);line-height:1.08;
  letter-spacing:.06em;
  color:#bd9652;transform:rotate(-12deg);text-align:left;
  isolation:isolate;
}
.kdrive__quote::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  /* the glow does its readability work above the line, over the photograph, so
     its box reaches up but is trimmed below. At -110% both ways it ran 73 to
     113px past the section's bottom edge and, being brighter than the canvas,
     printed an edge where overflow:hidden cut it. */
  inset:-110% -120% -20%;
  background:
    radial-gradient(ellipse 34% 30% at 50% 50%,
      rgba(255,252,247,1) 0%,
      rgba(250,246,239,.97) 32%,
      rgba(250,246,239,.78) 52%,
      rgba(250,246,239,.38) 72%,
      rgba(250,246,239,.1) 88%,
      rgba(250,246,239,0) 100%);
  filter:blur(8px);
}

.kdrive__col{min-width:0;}
.kdrive__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.kdrive__steps li{
  display:grid;grid-template-columns:56px 52px minmax(0,1fr);
  gap:14px;align-items:center;
  min-height:108px;padding:16px 22px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255,252,247,.97) 0%, rgba(250,246,239,.9) 100%);
  border:1px solid rgba(181,137,74,.5);border-radius:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,252,247,.9),
    inset 0 -1px 0 rgba(181,137,74,.14),
    0 1px 2px rgba(40,53,67,.07),
    0 12px 24px -10px rgba(40,53,67,.22);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.kdrive__steps span{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border:1.4px solid rgba(181,137,74,.72);border-radius:50%;
  font-family:var(--disp);font-size:22px;line-height:1;color:#bd9652;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,252,247,1) 0%, rgba(250,246,239,.96) 58%, rgba(236,222,198,.92) 100%);
  padding:0 0 .32em;
  box-shadow:
    inset 0 1.5px 1px rgba(255,252,247,.85),
    inset 0 -2px 3px rgba(181,137,74,.2),
    0 2px 3px rgba(40,53,67,.12);
}
.kdrive__steps i{
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  box-shadow:
    0 1px 1px rgba(255,252,247,.6),
    0 3px 6px rgba(40,53,67,.16);
}
.kdrive__steps i img{width:46px;height:46px;display:block;border-radius:50%;}
.kdrive__steps h3{margin:0 0 4px;font-size:clamp(20px,1.7vw,24px);line-height:1.1;color:var(--navy);}
.kdrive__steps p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
/* The quote's cream fog lives inside .kdrive__art, which is position:relative, so
   it paints in the positioned layer while this row was static and painted below
   it. The fog's box covers the whole button at 1440 and shifted 22% of its pixels
   by up to 78 levels. Positioning the row lifts it clear. */
.kdrive__foot{
  position:relative;z-index:7;
  display:flex;align-items:center;gap:clamp(16px,2vw,28px);flex-wrap:wrap;
  margin-top:22px;
}
.kdrive__foot .pill--solid{border-color:rgba(181,137,74,.78);}
.kdrive__foot .pill--solid:hover{border-color:#b58a4a;}

@media (max-width:980px){
  .kdrive__note,.kdrive__link,.kdrive__ahead,.kdrive__brand{display:none;}
  .kdrive__row{grid-template-columns:minmax(0,1fr);gap:28px;}
  .kdrive__art{margin:0 auto;width:min(100%,560px);}
  .kdrive__quote{right:2%;bottom:-12%;}
  .kdrive__palm{width:min(34vw,210px);}
}
@media (max-width:640px){
  .kdrive__head h2{font-size:clamp(36px,10vw,48px);}
  .kdrive__head .script{display:block;width:max-content;max-width:100%;margin-left:0;}
  .kdrive__lead{margin-bottom:16px;}
  .kdrive__steps li{grid-template-columns:46px minmax(0,1fr);gap:12px;min-height:92px;padding:14px 16px;}
  .kdrive__steps i{display:none;}
  .kdrive__steps span{width:44px;height:44px;font-size:18px;}
  .kdrive__quote{font-size:18px;}
  .kdrive__palm{width:min(44vw,170px);}
}