/* ==========================
   WORKFLOW - BASE
========================== */

.workflow-page{
    min-height:65vh;
    color:#28303a;
    background:#fffaf9;
}

.workflow-page .workflow-eyebrow{
    margin:0;
    color:#ef5a79;
    font-size:11px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

/* ==========================
   WORKFLOW - HERO
========================== */

.workflow-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:258px;
    background:
        radial-gradient(ellipse 270px 160px at 0% 100%,rgba(245,153,173,.24),transparent 80%),
        radial-gradient(ellipse 250px 155px at 100% 100%,rgba(245,153,173,.24),transparent 80%),
        linear-gradient(110deg,#fffaf9 0%,#fff 49%,#fff7f7 100%);
}

.workflow-hero-container{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin:0 auto;
    padding:15px 46px 43px;
}

.workflow-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    color:#56606d;
    font-size:10px;
}

.workflow-breadcrumb a{
    color:inherit;
    font-size:inherit;
    letter-spacing:0;
    text-decoration:none;
    padding:0;
}

.workflow-breadcrumb a:hover{
    color:#ef5a79;
}

.workflow-breadcrumb i{
    color:#89909c;
    font-size:8px;
}

.workflow-hero-content{
    max-width:720px;
    margin:12px auto 0;
    text-align:center;
}

.workflow-ornament{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin:7px 0 12px;
    color:#ec5a78;
    font-size:13px;
}

.workflow-ornament span{
    display:block;
    width:18px;
    height:1px;
    background:#f1a7b8;
}

.workflow-hero h1{
    margin:0;
    color:#252b32;
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(30px,4.3vw,51px);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-1px;
}

.workflow-hero-title-line{
    display:block;
}

.workflow-hero-title-line em{
    color:#e95778;
    font-style:normal;
}

.workflow-hero-title-line i{
    margin-left:4px;
    color:#e95778;
    font-size:.76em;
    font-weight:400;
}

.workflow-hero-description{
    max-width:580px;
    margin:13px auto 0;
    color:#444b57;
    font-size:13px;
    line-height:1.65;
}

.workflow-hero-ring{
    position:absolute;
    z-index:0;
    bottom:-185px;
    width:360px;
    height:360px;
    border:1px solid rgba(237,115,143,.28);
    border-radius:50%;
    pointer-events:none;
}

.workflow-hero-ring::before{
    content:"";
    position:absolute;
    inset:29px;
    border:1px solid rgba(237,115,143,.28);
    border-radius:50%;
}

.workflow-hero-ring-left{ left:-155px; }
.workflow-hero-ring-right{ right:-145px; }

.workflow-hero-dots{
    position:absolute;
    width:105px;
    height:112px;
    opacity:.55;
    background-image:radial-gradient(#efbec8 1.7px,transparent 1.8px);
    background-size:18px 18px;
    pointer-events:none;
}

.workflow-hero-dots-left{ left:16%; top:29px; }
.workflow-hero-dots-right{ right:20%; top:34px; }

/* ==========================
   WORKFLOW - STORY
========================== */

.workflow-story{
    background:#fff;
    padding:24px 0 35px;
}

.workflow-story-container{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:38px;
    max-width:1160px;
    width:calc(100% - 92px);
    margin:0 auto;
}

.workflow-story-media{
    overflow:hidden;
    border-radius:11px;
    aspect-ratio:425/292;
    background:#faeded;
}

.workflow-story-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.workflow-story-content{
    position:relative;
    min-width:0;
    padding:7px 0;
}

.workflow-story-content h2{
    max-width:430px;
    margin:8px 0 14px;
    color:#232a30;
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(28px,3.1vw,40px);
    line-height:1.17;
    letter-spacing:-.5px;
    text-align:left;
}

.workflow-story-content > p:not(.workflow-eyebrow):not(.workflow-story-note){
    max-width:470px;
    margin:0 0 14px;
    color:#505966;
    font-size:12px;
    line-height:1.8;
}

.workflow-story-note{
    position:absolute;
    top:0;
    right:0;
    max-width:160px;
    margin:0;
    transform:rotate(-10deg);
    color:#ed5e79;
    font-family:"Segoe Script","Bradley Hand",cursive;
    font-size:18px;
    line-height:1.5;
    text-align:center;
    pointer-events:none;
}

.workflow-story-note i{
    margin-left:5px;
    font-size:15px;
}

.workflow-button{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:13px;
    min-height:38px;
    margin-top:5px;
    padding:11px 24px;
    border-radius:25px;
    background:#e96480;
    color:#fff;
    font-size:10px;
    font-weight:600;
    text-decoration:none;
    transition:background .2s ease,transform .2s ease;
}

.workflow-button:hover{
    background:#d84f70;
    color:#fff;
    transform:translateY(-2px);
}

.workflow-button:focus-visible{
    outline:3px solid #263146;
    outline-offset:3px;
}

/* ==========================
   WORKFLOW - RESPONSIVE
========================== */

@media(max-width:950px){
    .workflow-story-note{ display:none; }
}

@media(max-width:700px){
    .workflow-hero-container{
        padding:14px 19px 45px;
    }

    .workflow-hero-content{
        margin-top:30px;
    }

    .workflow-hero h1{
        font-size:clamp(28px,8vw,39px);
        letter-spacing:-.4px;
    }

    .workflow-hero-description{
        font-size:12px;
    }

    .workflow-hero-dots{
        opacity:.25;
    }

    .workflow-story{
        padding:25px 0 45px;
    }

    .workflow-story-container{
        grid-template-columns:1fr;
        width:calc(100% - 36px);
        gap:28px;
    }

    .workflow-story-content h2{
        font-size:31px;
    }
}


/* ==========================
   WORKFLOW - PROCESS
========================== */

.workflow-process{
    padding:52px 24px 55px;
    background:
        linear-gradient(180deg,#fff 0%,#fffaf9 100%);
}

.workflow-process-container{
    max-width:1160px;
    margin:0 auto;
    text-align:center;
}

.workflow-process h2{
    margin:9px 0 34px;
    color:#242b32;
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(27px,3.1vw,39px);
    font-weight:700;
    line-height:1.3;
    text-align:center;
}

.workflow-process-steps{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:44px;

    margin:0;
    padding:0;
    list-style:none;
}

.workflow-process-step{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;

    min-width:0;
    text-align:center;
}

.workflow-process-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:70px;
    height:70px;
    margin-bottom:8px;

    border-radius:50%;
    background:
        radial-gradient(circle at center,#fff 0%,#fbe9ed 100%);

    color:#eb5c79;
    font-size:27px;
}

.workflow-process-number{
    display:block;
    margin-bottom:4px;
    color:#ec5f79;
    font-size:14px;
    font-weight:700;
}

.workflow-process-step h3{
    margin:0 0 6px;
    color:#232a32;
    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;
}

.workflow-process-step p{
    max-width:205px;
    margin:0;
    color:#535d6c;
    font-size:11px;
    line-height:1.6;
}

/* Arrows between steps */

.workflow-process-step:not(:last-child)::after{
    content:"→";

    position:absolute;
    top:26px;
    right:-38px;

    color:#ee8da2;
    font-family:Arial,sans-serif;
    font-size:33px;
    font-weight:300;
    line-height:1;
}

/* ==========================
   WORKFLOW - PROCESS MOBILE
========================== */

@media(max-width:700px){

    .workflow-process{
        padding:40px 18px 50px;
    }

    .workflow-process h2{
        margin-bottom:28px;
        font-size:29px;
    }

    .workflow-process-steps{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:30px 15px;
    }

    .workflow-process-step::after{
        display:none;
    }

    .workflow-process-icon{
        width:62px;
        height:62px;
        font-size:23px;
    }

    .workflow-process-step h3{
        font-size:12px;
    }

    .workflow-process-step p{
        font-size:11px;
    }
}

@media(prefers-reduced-motion:reduce){
    .workflow-process *{
        scroll-behavior:auto;
    }
}


/* ==========================
   WORKFLOW - VALUES
========================== */

.workflow-values{
    padding:5px 24px 70px;
    background:#fffaf9;
}

.workflow-values-card{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:30px 36px 38px;

    background:#fff;
    border:1px solid #f4eaed;
    border-radius:15px;

    box-shadow:0 9px 35px rgba(36,25,35,.06);
}

/* Header */

.workflow-values-heading{
    margin-bottom:30px;
    text-align:center;
}

.workflow-values-heading h2{
    margin:8px 0 0;
    color:#242a31;

    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(27px,3vw,37px);
    font-weight:700;
    line-height:1.3;
    text-align:center;
}

/* Values grid */

.workflow-values-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
}

.workflow-value{
    min-width:0;
    padding:4px 28px 7px 36px;
    text-align:left;
}

.workflow-value:first-child{
    padding-left:0;
}

.workflow-value:not(:first-child){
    border-left:1px solid #f0eaec;
}

.workflow-value-icon{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    height:39px;
    margin-bottom:9px;

    color:#ed5d7a;
    font-size:28px;
}

.workflow-value h3{
    margin:0 0 8px;

    color:#242a32;
    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;
    line-height:1.4;
}

.workflow-value p{
    margin:0;

    color:#5d6572;
    font-size:11px;
    line-height:1.75;
}

/* ==========================
   VALUES - TABLET
========================== */

@media(max-width:900px){

    .workflow-values-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        row-gap:24px;
    }

    .workflow-value{
        padding:12px 22px;
    }

    .workflow-value:first-child{
        padding-left:22px;
    }

    .workflow-value:not(:first-child){
        border-left:0;
    }

    .workflow-value:nth-child(even){
        border-left:1px solid #f0eaec;
    }

    .workflow-value:nth-child(n+3){
        border-top:1px solid #f0eaec;
        padding-top:25px;
    }
}

/* ==========================
   VALUES - MOBILE
========================== */

@media(max-width:580px){

    .workflow-values{
        padding:0 16px 45px;
    }

    .workflow-values-card{
        padding:26px 20px;
    }

    .workflow-values-heading{
        margin-bottom:20px;
    }

    .workflow-values-heading h2{
        font-size:28px;
    }

    .workflow-values-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .workflow-value,
    .workflow-value:first-child{
        padding:17px 0;
    }

    .workflow-value:not(:first-child),
    .workflow-value:nth-child(even){
        border-left:0;
        border-top:1px solid #f0eaec;
    }

    .workflow-value:nth-child(n+3){
        padding-top:17px;
    }

    .workflow-value-icon{
        font-size:26px;
    }

    .workflow-value h3{
        font-size:13px;
    }

    .workflow-value p{
        font-size:12px;
    }
}


/* ==========================
   WORKFLOW - CUSTOM ORDERS
========================== */

.workflow-custom{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    padding:52px 24px 58px;

    background:
        radial-gradient(ellipse at left bottom,
            rgba(245,153,173,.20),transparent 44%),
        radial-gradient(ellipse at right bottom,
            rgba(245,153,173,.20),transparent 44%),
        #fff8f8;

    text-align:center;
}

.workflow-custom-content{
    position:relative;
    z-index:2;

    max-width:780px;
    margin:0 auto;
}

.workflow-custom h2{
    margin:12px auto 16px;
    color:#242b32;

    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(28px,3.4vw,42px);
    font-weight:700;
    line-height:1.3;
    text-align:center;
}

.workflow-custom h2 i{
    margin-left:7px;
    color:#eb5d7a;
    font-size:.85em;
    font-weight:400;
}

.workflow-custom-description{
    max-width:560px;
    margin:0 auto 23px;

    color:#505966;
    font-size:13px;
    line-height:1.85;
}

.workflow-custom-button{
    margin-top:0;
    padding:13px 25px;
    font-size:11px;
}

/* Decorative circles */

.workflow-custom-ring{
    position:absolute;
    z-index:0;
    bottom:-240px;

    width:420px;
    height:420px;

    border:1px solid rgba(236,112,140,.27);
    border-radius:50%;
    pointer-events:none;
}

.workflow-custom-ring::before{
    content:"";
    position:absolute;
    inset:38px;

    border:1px solid rgba(236,112,140,.22);
    border-radius:50%;
}

.workflow-custom-ring-left{
    left:-180px;
}

.workflow-custom-ring-right{
    right:-180px;
}

/* Decorative dots */

.workflow-custom-dots{
    position:absolute;
    z-index:0;

    width:125px;
    height:110px;

    background-image:
        radial-gradient(#f1beca 1.5px,transparent 1.7px);
    background-size:18px 18px;

    opacity:.55;
    pointer-events:none;
}

.workflow-custom-dots-left{
    left:14%;
    top:23px;
}

.workflow-custom-dots-right{
    right:13%;
    bottom:15px;
}

/* Mobile */

@media(max-width:700px){

    .workflow-custom{
        padding:43px 20px 50px;
    }

    .workflow-custom h2{
        font-size:30px;
    }

    .workflow-custom-description{
        font-size:12px;
    }

    .workflow-custom-ring{
        width:280px;
        height:280px;
        bottom:-205px;
    }

    .workflow-custom-ring-left{
        left:-165px;
    }

    .workflow-custom-ring-right{
        right:-165px;
    }

    .workflow-custom-dots{
        opacity:.25;
    }
}