/* Draft only: a detail for the three "01 02 03" cards on About */
.dw-card{position:relative;overflow:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s}
.dw-card:hover{transform:translateY(-6px)}
.dw-card>*:not(.dw-deco){position:relative;z-index:1}
.dw-deco{display:none;position:absolute!important;z-index:0;pointer-events:none}

/* 1: stationery frame + hand-drawn line under the title */
html.c1 .dw-deco{display:block!important;content:"";position:absolute;inset:12px;border:1px solid rgba(155,155,131,.35);border-radius:14px;pointer-events:none;transition:inset .7s cubic-bezier(.2,.7,.2,1),border-color .7s}
html.c1 .dw-card:hover .dw-deco{inset:8px;border-color:rgba(124,124,97,.55)}
html.c1 .dw-ttl .elementor-heading-title{display:inline}
html.c1 .dw-ttl{position:relative;padding-bottom:16px}
html.c1 .dw-ttl::after{content:"";position:absolute;left:0;bottom:2px;width:150px;height:12px;
  background:no-repeat left center/150px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 12' fill='none' stroke='%239B9B83' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2 8C30 3 60 2 90 5s45 4 56-1'/%3E%3C/svg%3E");
  clip-path:inset(0 100% 0 0);transition:clip-path 1.4s .3s cubic-bezier(.6,.1,.2,1)}
html.c1 .dw-card.in .dw-ttl::after{clip-path:inset(0 0 0 0)}
html.c1 .dw-num .elementor-heading-title{color:#B9B7A2!important}

/* 2: an arch window holding the number */
html.c2 .dw-num .elementor-heading-title{display:flex;align-items:flex-end;justify-content:center;width:62px;height:84px;padding-bottom:14px;
  border:1px solid rgba(124,124,97,.45);border-radius:999px 999px 6px 6px;color:#7C7C61!important;font-size:24px!important;transition:background .6s,color .6s}
html.c2 .dw-card:hover .dw-num .elementor-heading-title{background:#7C7C61;color:#FFFCF8!important}
html.c2 .dw-deco{display:block!important;inset:auto!important;border-color:transparent;content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:200px;border:1px solid rgba(155,155,131,.22);border-radius:999px 999px 0 0;transform:rotate(-12deg);pointer-events:none}

/* 3: oversized number as a watermark, line that grows under the title */
html.c3 .dw-num .elementor-heading-title{position:absolute!important;right:-8px;bottom:-34px;font-size:190px!important;line-height:1!important;color:rgba(155,155,131,.13)!important;pointer-events:none;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
html.c3 .dw-num{position:static!important;height:0;margin:0!important}
html.c3 .dw-card:hover .dw-num .elementor-heading-title{transform:translateY(-10px)}
html.c3 .dw-card{border-top:2px solid #7C7C61}
html.c3 .dw-ttl{position:relative;padding-bottom:18px}
html.c3 .dw-ttl::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:40px;background:#7C7C61;transition:width .9s cubic-bezier(.2,.7,.2,1)}
html.c3 .dw-card:hover .dw-ttl::after{width:110px}
@media (prefers-reduced-motion:reduce){.dw-card,.dw-card::before,.dw-ttl::after{transition:none}}

html.c2 .dw-deco{border:1px solid rgba(155,155,131,.22)!important}
@media (max-width:767px){
  html.c1 .dw-ttl::after,html.c3 .dw-ttl::after{left:50%;transform:translateX(-50%)}
  html.c2 .dw-num .elementor-heading-title{margin:0 auto}
}
html.c2 .dw-deco{right:-40px!important;bottom:-40px!important;left:auto!important;top:auto!important}
@media (max-width:767px){html.c2 .dw-num{align-self:center!important;--align-self:center}}

/* chosen: option 1, more delicate and closer to square */
html.c1 .dw-card{min-height:0!important;--min-height:0px;aspect-ratio:1/1.12;justify-content:flex-start!important;--padding-top:52px;--padding-bottom:44px;--padding-left:46px;--padding-right:46px;padding:52px 46px 44px!important}
html.c1 .dw-deco{inset:10px;border:.75px solid rgba(155,155,131,.24);border-radius:12px}
html.c1 .dw-card:hover .dw-deco{inset:7px;border-color:rgba(124,124,97,.4)}
html.c1 .dw-ttl::after{width:96px;height:9px;opacity:.75;background-size:96px 9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 9' fill='none' stroke='%239B9B83' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M1.5 6C20 2.5 40 1.6 60 3.8s28 2.6 34-.6'/%3E%3C/svg%3E")}
html.c1 .dw-ttl{padding-bottom:12px}
html.c1 .dw-num .elementor-heading-title{color:#C9C7B4!important;font-size:24px!important}
@media (max-width:767px){html.c1 .dw-card{aspect-ratio:auto;padding:44px 30px 40px!important}}
@media (max-width:767px){html.c1 .dw-num,html.c1 .dw-num .elementor-heading-title{text-align:center!important;align-self:center!important}}
