/* ============================================================
   SHAPE: smooth corners
   js/smooth-corners.js clips each rounded element to Figma's squircle at 60%
   smoothing (the "iOS" preset) and draws stroked elements' borders as an SVG
   on the same curve. This file carries the parts CSS still owns:
   the border colours the SVG stroke reads, and the fallbacks.

   Without JS the elements keep their circular border-radius and real borders.
   ============================================================ */

/* stroked elements hand their border to the SVG: the CSS border stays for
   layout but goes transparent, and the stroke colour comes from --sc-stroke */
.is-smooth-stroked{border-color:transparent !important;box-shadow:none !important;}
.sc-stroke{position:absolute;pointer-events:none;overflow:visible;}
.sc-stroke path{stroke:var(--sc-stroke,var(--rule));transition:stroke var(--hover-t) ease;}

.practice{--sc-stroke:var(--rule);}
a.practice:focus-visible{--sc-stroke:var(--accent);}
@media (hover:hover){a.practice:hover{--sc-stroke:var(--accent);}}
.hero .cta .alt{--sc-stroke:var(--rule);}
@media (hover:hover){.hero .cta .alt:hover{--sc-stroke:var(--accent);}}
.email-copy,.social-link{--sc-stroke:var(--rule);}
@media (hover:hover){.email-copy:hover,.social-link:hover{--sc-stroke:var(--accent);}}

/* HOVER STROKES ARE 2PX, everywhere on the site, without moving anything.
   Here the path sits half a pixel in from the edge and the element clips at
   its edge, so a 3px stroke shows exactly 2px inside the shape. */
a.practice:focus-visible .sc-stroke path{stroke-width:3px;}
@media (hover:hover){a.practice:hover .sc-stroke path,.hero .cta .alt:hover .sc-stroke path,.email-copy:hover .sc-stroke path,.social-link:hover .sc-stroke path{stroke-width:3px;}}

/* keyboard focus: lift the clip so the focus ring outside the box is whole */
.is-smooth:focus-visible{clip-path:none !important;}