/* Blue Star Pool and Spas Services · contact.css
   Only the contact page: prefix .ct- (plus .sent-* for the big confirmation and .m-* inside the map drawing).
   K1 three cards floating on the banner waterline · K2 form card over the navy band + lazy map · K3 what to tell us.
   Transform ownership: GSAP owns .ct-card, .ct-card-go svg, .ct-mask-in, the card eyebrow / note / link, .ct-pin-* and .ct-k2-caustic.
   Every other transform here lives on nodes GSAP never touches (floating labels, the tip waterline, notices). */

[data-page="contact"]{--ct-lap:64px;--ct-cardpad:clamp(1.4rem,2.7vw,2.7rem);--ct-field:var(--white)}
@supports (color:color-mix(in srgb,red,blue)){
  [data-page="contact"]{--ct-field:color-mix(in srgb,var(--aqua) 30%,var(--white))}
}

/* the cards overlap the banner, so its breadcrumb keeps 48 px of air above them at every width (noted in _src/PENDING-contact.md) */
[data-page="contact"] .banner{padding-bottom:max(calc(var(--wave-h) + clamp(2.4rem,4.2vw,4rem)),7rem)}

/* ================= K1 · three cards ================= */
.ct-k1{z-index:4;margin-top:calc(var(--ct-lap)*-1 - 18px);padding-block:18px calc(var(--wave-h) + clamp(1.6rem,2.4vw,2.4rem));background:none}
.ct-cards{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1.1fr) minmax(0,1fr);gap:clamp(14px,1.5vw,22px)}
.ct-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:clamp(212px,17.4vw,250px);padding:clamp(1.3rem,2vw,1.85rem);border-radius:var(--r);border:1px solid rgba(var(--navy-rgb),.1);background:rgba(var(--white-rgb),.985);box-shadow:var(--shadow);color:rgba(var(--navy-rgb),.82);overflow:hidden;transition:border-color .25s}
.ct-card:hover{border-color:rgba(var(--blue-rgb),.42)}
.ct-card:focus-visible{border-radius:var(--r);outline-offset:4px}
.ct-card--tel{border-color:rgba(var(--white-rgb),.6);background:linear-gradient(150deg,var(--cyan) 0%,var(--cyan) 44%,var(--aqua) 140%);box-shadow:0 22px 48px rgba(var(--cyan-rgb),.3),0 4px 12px rgba(var(--navy-rgb),.12);color:rgba(var(--navy-rgb),.92)}
.ct-card--tel:hover{border-color:var(--white)}

/* whisper motifs behind the content: the star of the logo, an at sign, the hours */
.ct-card-deco{position:absolute;right:-9%;bottom:-25%;z-index:-1;width:clamp(150px,46%,230px);height:auto;fill:none;stroke:rgba(var(--navy-rgb),.17);stroke-width:1.3;rotate:-8deg;pointer-events:none}
.ct-card-ghost{position:absolute;right:-.05em;bottom:-.3em;z-index:-1;font-family:var(--display);font-weight:800;font-size:clamp(5.6rem,8vw,7.4rem);line-height:.8;letter-spacing:-.03em;white-space:nowrap;color:var(--white);-webkit-text-stroke:3px rgba(var(--blue-rgb),.15);paint-order:stroke fill;pointer-events:none;user-select:none}
.ct-card--mail .ct-card-ghost{right:-.08em;bottom:-.26em;font-size:clamp(7.4rem,11vw,10rem)}

.ct-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:clamp(.9rem,1.5vw,1.4rem)}
.ct-ico{flex:none;width:clamp(46px,3.9vw,56px);height:clamp(46px,3.9vw,56px);fill:none;stroke:var(--blue);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ct-ico path{stroke-dasharray:1 2}
.ct-ico .ct-ico-live{stroke:var(--navy)}
.ct-card--tel .ct-ico{stroke:var(--navy)}
.ct-card-go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--aqua);color:var(--navy);transition:background-color .25s,color .25s}
.ct-card-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ct-card-go--out{rotate:-45deg}
.ct-card:hover .ct-card-go{background:var(--cyan)}
.ct-card--tel .ct-card-go{background:var(--navy);color:var(--white)}
.ct-card--tel:hover .ct-card-go{background:var(--white);color:var(--navy)}

.ct-card .ct-card-eyebrow{font-family:var(--body);font-weight:700;font-size:.76rem;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.ct-card--tel .ct-card-eyebrow{color:var(--navy)}
.ct-mask{display:block;margin-top:.5rem;padding-bottom:.12em;overflow:hidden}
.ct-mask-in{display:block}
.ct-card-data{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,2vw,1.8rem);line-height:1.08;letter-spacing:-.018em;color:var(--navy)}
.ct-card--tel .ct-card-data{font-weight:800;font-size:clamp(2.1rem,3.3vw,3.05rem);line-height:1;letter-spacing:-.025em;white-space:nowrap}
.ct-card--mail .ct-card-data{font-size:clamp(1.16rem,1.56vw,1.42rem);line-height:1.16;letter-spacing:-.012em}
.ct-card-note{margin-top:.5rem;font-size:.98rem;line-height:1.45;text-wrap:balance}
.ct-card--tel .ct-card-note{font-weight:600}
.ct-card-link{margin-top:.75rem;font-weight:700;color:var(--blue)}
.ct-card-link > span:first-child{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:background-size .3s var(--ease)}
.ct-card:hover .ct-card-link > span:first-child{background-size:0 2px;background-position:100% 100%}

/* entrance: GSAP reveals the cards. The 4.5 s animation is a net so the phone can never stay hidden */
html.js:not(.skip-loader):not(.ct-static) .ct-card{opacity:0;animation:ct-safe .01s linear 4.5s forwards}
@keyframes ct-safe{to{opacity:1}}

/* ================= K2 · form card over the navy band + map ================= */
.ct-k2{padding-block:clamp(1.6rem,2.4vw,2.4rem) calc(var(--wave-h) + clamp(2rem,3vw,3rem))}
.ct-k2-bg{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none}
.ct-k2-caustic{position:absolute;inset:-10% 0;background:url("/assets/img/scene/caustics.webp") center/cover;opacity:.42;will-change:transform}
/* the band opens in flat navy so the wave of the section above meets it without a seam */
.ct-k2-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(120px,16vw,220px);background:linear-gradient(180deg,var(--navy) 0%,rgba(var(--navy-rgb),0) 100%)}
.ct-reach{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,4rem);align-items:stretch}
.ct-h{font-size:clamp(1.8rem,2.9vw,2.7rem)}

.ct-formcol{display:flex;flex-direction:column;min-width:0}
.ct-formcard{position:relative;flex:1 1 auto;display:flex;flex-direction:column;padding:var(--ct-cardpad);border-radius:26px;border:1px solid rgba(var(--cyan-rgb),.55);background:var(--white);box-shadow:0 0 0 8px rgba(var(--cyan-rgb),.13),0 30px 60px rgba(var(--navy-rgb),.5);color:rgba(var(--navy-rgb),.82);container:ct-form/inline-size}
.ct-formcard h2{color:var(--navy)}
.ct-formcard .kicker,.ct-formcard .accent{color:var(--blue)}
.ct-formcard :focus-visible{outline-color:var(--blue)}
/* the form box reaches the top edge of the card, so links to #form land on the whole card and not on its first field */
.ct-form{margin-top:calc(var(--ct-cardpad)*-1);padding-top:var(--ct-cardpad)}
.ct-form-head h2{margin-top:.7rem}
.ct-form-head .body-sm{margin-top:.7rem;max-width:48ch;text-wrap:balance}

/* postage stamp with the star: sits astride the top edge of the card */
.ct-stamp{position:absolute;top:-27px;right:clamp(18px,2.4vw,34px);z-index:2;display:grid;place-items:center;align-content:center;gap:3px;width:60px;height:72px;background:var(--cyan);color:var(--navy);rotate:7deg;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) center/calc(100% - 8px) calc(100% - 8px) no-repeat,radial-gradient(circle 3.4px at 50% 50%,transparent 96%,#000) -6px -6px/12px 12px;
  mask:linear-gradient(#000 0 0) center/calc(100% - 8px) calc(100% - 8px) no-repeat,radial-gradient(circle 3.4px at 50% 50%,transparent 96%,#000) -6px -6px/12px 12px}
.ct-stamp svg{width:28px;height:27px;fill:var(--navy)}
.ct-stamp b{font-family:var(--display);font-weight:800;font-size:.68rem;line-height:1;letter-spacing:.03em}

/* fields: real labels that float, CSS only */
.ct-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem;margin-top:clamp(1.2rem,1.8vw,1.6rem)}
.ct-field{position:relative;min-width:0}
.ct-field--full{grid-column:1/-1}
.ct-field input,.ct-field select,.ct-field textarea{display:block;width:100%;min-height:3.75rem;margin:0;padding:1.5rem 1rem .45rem;border:1.5px solid rgba(var(--navy-rgb),.24);border-radius:var(--r-sm);background-color:var(--ct-field);color:var(--navy);font-size:1rem;font-weight:500;line-height:1.35;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.ct-field textarea{min-height:8.6rem;padding-top:1.8rem;resize:vertical}
.ct-field select{padding-right:2.8rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022B7C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:18px 18px}
.ct-field select.is-empty{color:rgba(var(--navy-rgb),.7)}
.ct-field select option{color:var(--navy);background:var(--white)}
.ct-field label{position:absolute;left:1.08rem;top:1.2rem;z-index:1;max-width:calc(100% - 2.2rem);overflow:hidden;font-size:1rem;font-weight:600;line-height:1.35;white-space:nowrap;text-overflow:ellipsis;color:rgba(var(--navy-rgb),.7);pointer-events:none;transform-origin:0 0;transition:transform .22s var(--ease),color .2s}
.ct-field input:focus + label,.ct-field input:not(:placeholder-shown) + label,.ct-field textarea:focus + label,.ct-field textarea:not(:placeholder-shown) + label,.ct-field select + label{transform:translate3d(0,-.74rem,0) scale(.76);color:var(--blue)}
.ct-field input:-webkit-autofill + label{transform:translate3d(0,-.74rem,0) scale(.76);color:var(--blue)}
.ct-field input:-webkit-autofill{-webkit-text-fill-color:var(--navy);box-shadow:inset 0 0 0 100px var(--ct-field)}
/* strip that keeps scrolled text of the message from sliding under its label */
.ct-field--area::before{content:"";position:absolute;left:2px;right:1.1rem;top:2px;z-index:1;height:1.55rem;border-radius:12px 0 0 0;background:var(--ct-field);pointer-events:none}
.ct-field input:hover,.ct-field select:hover,.ct-field textarea:hover{border-color:rgba(var(--blue-rgb),.6)}
.ct-field input:focus-visible,.ct-field select:focus-visible,.ct-field textarea:focus-visible{border-color:var(--blue);border-radius:var(--r-sm);outline:3px solid var(--cyan);outline-offset:2px}
.ct-field.is-bad input,.ct-field.is-bad textarea{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.ct-err{display:block;font-size:.82rem;font-weight:600;line-height:1.3;color:var(--white)}
.ct-err:not(:empty){display:inline-flex;align-items:center;gap:.45rem;margin-top:.45rem;padding:.32rem .7rem .32rem .42rem;border-radius:9px;background:var(--navy);animation:ct-note .35s var(--ease) both}
.ct-err:not(:empty)::before{content:"!";flex:none;display:grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--cyan);color:var(--navy);font-weight:800;font-size:.74rem;line-height:1}
@container ct-form (max-width:31rem){.ct-fields{grid-template-columns:minmax(0,1fr)}}

.ct-form-foot{margin-top:1.25rem}
.ct-submit{min-width:min(100%,15.5rem)}
.ct-submit[disabled]{cursor:progress;opacity:.74}

/* notice under the form: one reserved slot, so nothing jumps when it speaks */
.ct-status{display:flex;align-items:center;min-height:3.4rem;margin-top:.8rem;font-size:.92rem;line-height:1.4}
.ct-status-in{display:flex;align-items:flex-start;gap:.6rem}
.ct-status .ico{flex:none;width:20px;height:20px;margin-top:.02rem;color:var(--blue)}
.ct-status.is-ok .ct-status-in,.ct-status.is-fail .ct-status-in{width:100%;padding:.7rem .9rem;border-radius:14px;font-weight:600;animation:ct-note .45s var(--ease) both}
.ct-status.is-ok .ct-status-in{background:var(--cyan);color:var(--navy)}
.ct-status.is-ok .ico{color:var(--navy)}
.ct-status.is-fail .ct-status-in{background:var(--navy);color:var(--white)}
.ct-status.is-fail .ico{color:var(--cyan)}
.ct-status.is-fail a{color:var(--white);font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:3px}
@keyframes ct-note{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* big confirmation, prepended inside the form when the page comes back with the sent flag */
.sent-card{display:flex;align-items:center;gap:1rem;margin:.5rem 0 1.6rem;padding:1.1rem 1.2rem;border-radius:18px;background:var(--cyan);color:var(--navy);animation:ct-note .5s var(--ease) both}
.sent-card:focus,.sent-card:focus-visible{outline:0;border-radius:18px}
.sent-disc{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--navy);color:var(--white)}
.sent-disc svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sent-t{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.1;letter-spacing:-.015em;color:var(--navy)}
.sent-s{margin-top:.3rem;font-size:.95rem;line-height:1.45;color:rgba(var(--navy-rgb),.92)}
.sent-s a{font-weight:700;white-space:nowrap;color:var(--navy);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* map column */
.ct-find{display:flex;flex-direction:column;min-width:0;padding-top:var(--ct-cardpad)}
.ct-find-head h2{margin-top:.7rem}
.ct-mapwrap{flex:1 1 auto;display:flex;min-height:clamp(250px,22vw,300px);margin-top:clamp(1.2rem,1.9vw,1.7rem)}
.ct-map{position:relative;isolation:isolate;flex:1 1 auto;min-width:0;border-radius:var(--r);border:1.5px solid rgba(var(--white-rgb),.38);background:var(--aqua);box-shadow:0 20px 44px rgba(var(--navy-rgb),.45);overflow:hidden}
.ct-map-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;padding:0 12px clamp(12px,1.5vw,18px);border-radius:inherit;cursor:pointer;transition:opacity .45s ease}
.ct-map-cover:focus-visible{border-radius:calc(var(--r) - 6px);outline:3px solid var(--navy);outline-offset:-8px}
.ct-map-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.ct-map-cta{display:inline-flex;align-items:center;gap:.65rem;min-height:52px;padding:.4rem 1.3rem .4rem .42rem;border-radius:999px;background:var(--navy);color:var(--white);font-weight:700;font-size:.98rem;line-height:1.15;text-align:left;box-shadow:0 10px 26px rgba(var(--navy-rgb),.36);transition:background-color .25s}
.ct-map-cta-disc{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--cyan);color:var(--navy)}
.ct-map-cta-disc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-map-cover:hover .ct-map-cta{background:var(--blue)}
.ct-map.is-loading .ct-map-cover{cursor:progress}
.ct-map.is-live .ct-map-cover{opacity:0;pointer-events:none}
.ct-map-frame{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0}

/* the drawing: lake, streets and the boulevard in the five colours */
.m-land{fill:var(--aqua)}
.m-contour{fill:none;stroke:rgba(var(--blue-rgb),.17);stroke-width:1.6}
.m-lake{fill:var(--cyan)}
.m-shore{fill:none;stroke:var(--white);stroke-width:4;stroke-linecap:round}
.m-ripple{fill:none;stroke:rgba(var(--white-rgb),.72);stroke-width:2.4;stroke-linecap:round}
.m-street{fill:none;stroke:rgba(var(--blue-rgb),.27);stroke-width:5;stroke-linecap:round}
.m-pine{fill:rgba(var(--blue-rgb),.3)}
.m-blvd-case{fill:none;stroke:rgba(var(--blue-rgb),.45);stroke-width:17}
.m-blvd{fill:none;stroke:var(--white);stroke-width:12.5}
.m-blvd-dash{fill:none;stroke:rgba(var(--blue-rgb),.55);stroke-width:1.6;stroke-dasharray:9 9}
.m-label{font-family:var(--display);font-weight:700}
.m-label--lake{font-size:21px;letter-spacing:.14em;fill:rgba(var(--navy-rgb),.74)}
.m-label--road{font-size:14.5px;letter-spacing:.06em;fill:var(--blue)}
.m-compass circle{fill:rgba(var(--white-rgb),.78);stroke:rgba(var(--navy-rgb),.3);stroke-width:1.5}
.m-compass path{fill:var(--navy)}
.ct-pin-shadow{fill:rgba(var(--navy-rgb),.3)}
.ct-pin-ring{fill:none;stroke:var(--blue);stroke-width:3;opacity:0}
.ct-pin-drop{fill:var(--navy);stroke:var(--white);stroke-width:3;stroke-linejoin:round}
.ct-pin-star{fill:var(--cyan)}
html.js:not(.skip-loader):not(.ct-static) .ct-pin-body,html.js:not(.skip-loader):not(.ct-static) .ct-pin-shadow{opacity:0}

.ct-addr{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .7rem;margin-top:1rem;font-weight:600;line-height:1.4;color:var(--white)}
.ct-addr .ico{flex:none;color:var(--cyan)}
.ct-addr-text{flex:1 1 12rem;min-width:0;text-wrap:balance}
.ct-addr-link{flex:none;display:inline-flex;align-items:center;min-height:44px}
.ct-zones{margin-top:.9rem;padding-top:1.15rem;border-top:1px solid rgba(var(--white-rgb),.2)}
.ct-find .ct-zones-h{font-family:var(--body);font-weight:700;font-size:.76rem;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.ct-zones-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.ct-zones-list .chip{padding:.45rem .85rem;font-size:.88rem}
.ct-zones-list .ct-zone--home{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}

/* ================= K3 · what to tell us ================= */
.ct-k3{padding-top:clamp(1.8rem,2.6vw,2.6rem)}
.ct-k3-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.2rem,4vw,4rem);align-items:end}
.ct-k3-title h2{margin-top:.9rem}
.ct-k3-head .lead{justify-self:end;max-width:34ch;padding-bottom:.3rem}
.ct-tips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.4vw,20px);margin-top:clamp(1.8rem,3vw,2.8rem)}
.ct-tip{position:relative;isolation:isolate;padding:clamp(1.25rem,1.7vw,1.6rem);border-radius:var(--r);border:1px solid rgba(var(--blue-rgb),.18);background:var(--white);box-shadow:var(--shadow-sm);overflow:hidden}
.ct-tip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--cyan);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.ct-tip:hover::after{transform:scaleX(1)}
.ct-tip-n{position:absolute;right:.9rem;top:.6rem;z-index:-1;font-family:var(--display);font-weight:800;font-size:clamp(3rem,4.4vw,4rem);line-height:1;letter-spacing:-.03em;color:var(--white);-webkit-text-stroke:3px rgba(var(--blue-rgb),.24);paint-order:stroke fill;user-select:none}
.ct-tip-badge{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--cyan);color:var(--navy);transition:background-color .3s,color .3s}
.ct-tip-badge svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ct-tip-badge path{stroke-dasharray:1 2;stroke-dashoffset:0}
.ct-tip:hover .ct-tip-badge{background:var(--navy);color:var(--cyan)}
.ct-tip .ct-tip-t{margin-top:1.1rem;font-family:var(--display);font-weight:700;font-size:clamp(1.22rem,1.5vw,1.42rem);line-height:1.12;letter-spacing:-.012em;color:var(--navy)}
.ct-tip-d{margin-top:.5rem;font-size:.97rem;line-height:1.5;text-wrap:pretty}
/* the icons draw themselves when their card arrives, and again on hover */
html.js:not(.skip-loader):not(.ct-static) .ct-tip-badge path{stroke-dashoffset:1.03;transition:stroke-dashoffset 1s var(--ease) calc(var(--i,0)*90ms + .3s)}
html.js:not(.skip-loader):not(.ct-static) .ct-tip.is-in .ct-tip-badge path{stroke-dashoffset:0}
html.acc-measure .ct-tip-badge path{stroke-dashoffset:0!important;transition:none!important}
@media (hover:hover){
  html.js:not(.skip-loader):not(.ct-static) .ct-tip.is-in:hover .ct-tip-badge path{animation:ct-draw .8s var(--ease)}
}
@keyframes ct-draw{from{stroke-dashoffset:1.03}to{stroke-dashoffset:0}}
.ct-k3-close{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:clamp(1.6rem,2.6vw,2.3rem);font-weight:600;color:var(--navy)}
.ct-k3-close .strip{flex:none;rotate:-5deg}

/* ================= widths ================= */
@media (max-width:1180px){
  .ct-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-card--tel{grid-column:1/-1;min-height:0}
  .ct-card-deco{right:3%;bottom:-46%;width:clamp(180px,26vw,250px)}
  .ct-tips{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ct-reach{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .ct-find{padding-top:0}
  .ct-mapwrap{flex:none;min-height:0;aspect-ratio:16/10}
  .ct-k3-head{grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
  .ct-k3-head .lead{justify-self:start;max-width:52ch;padding-bottom:0}
}
@media (max-width:760px){
  /* one column, phone first. Compact rows so the three ways fit in the first screen */
  .ct-cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .ct-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.95rem;align-content:center;min-height:0;padding:1.05rem 1.1rem 1.1rem}
  .ct-card--tel{padding-block:1.25rem 1.3rem}
  .ct-card-top{display:contents}
  .ct-ico{grid-column:1;grid-row:1/span 4;align-self:start;width:44px;height:44px}
  .ct-card-go{display:none}
  .ct-card .ct-card-eyebrow,.ct-mask,.ct-card-note,.ct-card-link{grid-column:2}
  .ct-mask{margin-top:.3rem}
  .ct-card-note{margin-top:.3rem;font-size:.95rem}
  .ct-card-link{margin-top:.5rem}
  .ct-card--tel .ct-card-data{font-size:clamp(1.45rem,calc((100vw - 150px)/6.6),2.3rem)}
  .ct-card-deco{right:-12%;bottom:-70%;width:170px}
  .ct-card-ghost{font-size:5.6rem}
  .ct-card--mail .ct-card-ghost{font-size:7.4rem}

  .ct-formcard{border-radius:22px;box-shadow:0 0 0 6px rgba(var(--cyan-rgb),.13),0 24px 48px rgba(var(--navy-rgb),.5)}
  .ct-stamp{top:-30px;right:14px;scale:.84}
  .sent-card{margin-top:1.5rem;padding:1rem 1.05rem;gap:.85rem}
  .sent-disc{width:46px;height:46px}
  .ct-submit{width:100%}
  .ct-mapwrap{aspect-ratio:4/3}
  .ct-addr{align-items:flex-start;margin-top:1.1rem}
  .ct-addr .ico{margin-top:.08rem}
  .ct-addr-link{flex:1 0 100%;padding-left:calc(24px + .7rem)}

  .ct-tips{grid-template-columns:minmax(0,1fr);gap:12px}
  .ct-tip{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;padding:1.1rem 1.15rem 1.2rem}
  .ct-tip-badge{grid-row:1/span 2;width:48px;height:48px;border-radius:14px}
  .ct-tip .ct-tip-t{margin-top:.15rem}
  .ct-tip-d{margin-top:.35rem}
  .ct-tip-n{right:.8rem;top:.5rem;font-size:2.5rem}
}
@media (max-width:520px){
  .ct-fields{grid-template-columns:minmax(0,1fr)}
}