/* ============================================================
   Self-hosted Poppins (latin) — no render-blocking external request
   ============================================================ */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/poppins-700.woff2') format('woff2'); }

/* ============================================================
   LAYMAN DEVELOPMENT — Brand Theme
   Palette: Slate & Amber · Font: Poppins
   ============================================================ */

:root {
    /* Brand */
    --ld-slate:        #2C3E50;
    --ld-slate-mid:    #455A6B;
    --ld-amber:        #E67E22;
    --ld-amber-dark:   #cf6f17;
    --ld-peach:        #F5CBA7;
    --ld-cream:        #F7F5F0;
    --ld-white:        #FFFFFF;
    --ld-deep-navy:    #1A2535;

    --ld-text:         #2C3E50;
    --ld-subtext:      #5b6b78;
    --ld-text-on-dark: #FFFFFF;
    --ld-sub-on-dark:  #7A95AB;

    --ld-shadow-sm: 0 2px 10px rgba(26, 37, 53, .06);
    --ld-shadow:    0 12px 34px rgba(26, 37, 53, .10);
    --ld-shadow-lg: 0 24px 60px rgba(26, 37, 53, .16);
    --ld-radius:    16px;

    /* Bootstrap overrides */
    --bs-primary:  #2C3E50;
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: #2C3E50;
}

* { scroll-behavior: smooth; }

html, body {
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ld-text);
    background: var(--ld-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--ld-slate); letter-spacing: -.01em; }

a { text-decoration: none; }

/* ---------- Focus accessibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible {
    outline: 3px solid rgba(230, 126, 34, .45);
    outline-offset: 2px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-amber {
    background: var(--ld-amber);
    border: 2px solid var(--ld-amber);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: .7rem 1.7rem;
    transition: all .2s ease;
    box-shadow: 0 8px 20px rgba(230, 126, 34, .28);
}
.btn-amber:hover, .btn-amber:focus {
    background: var(--ld-amber-dark);
    border-color: var(--ld-amber-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(230, 126, 34, .38);
}

.btn-ghost {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .55);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: .7rem 1.7rem;
    transition: all .2s ease;
}
.btn-ghost:hover, .btn-ghost:focus {
    background: #fff;
    color: var(--ld-slate);
    border-color: #fff;
    transform: translateY(-2px);
}

.btn-slate {
    background: var(--ld-slate);
    border: 2px solid var(--ld-slate);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: .7rem 1.7rem;
    transition: all .2s ease;
}
.btn-slate:hover, .btn-slate:focus {
    background: var(--ld-deep-navy);
    border-color: var(--ld-deep-navy);
    color: #fff;
    transform: translateY(-2px);
}

/* ============================================================
   Navbar
   ============================================================ */
.ld-navbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: var(--ld-shadow-sm);
    padding: .6rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.ld-navbar .navbar-brand img { height: 46px; width: auto; display: block; }

.ld-navbar .nav-link {
    color: var(--ld-slate);
    font-weight: 500;
    margin: 0 .35rem;
    padding: .5rem .25rem !important;
    position: relative;
}
.ld-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: .25rem; right: .25rem; bottom: .25rem;
    height: 2px;
    background: var(--ld-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.ld-navbar .nav-link:hover::after,
.ld-navbar .nav-link.active::after { transform: scaleX(1); }
.ld-navbar .nav-link.active { color: var(--ld-amber); }

.navbar-toggler { border: none; padding: .25rem .5rem; }
.navbar-toggler:focus { box-shadow: none; }

/* ============================================================
   Hero
   ============================================================ */
.ld-hero {
    position: relative;
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(230, 126, 34, .22), transparent 60%),
        linear-gradient(135deg, var(--ld-deep-navy) 0%, var(--ld-slate) 55%, var(--ld-slate-mid) 100%);
    color: var(--ld-text-on-dark);
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 9vw, 8rem);
}
.ld-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 70px;
    background: var(--ld-white);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
.ld-hero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    line-height: 1.08;
    font-weight: 700;
}
.ld-hero .lead {
    color: var(--ld-sub-on-dark);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 300;
    max-width: 36rem;
}
.ld-hero .accent { color: var(--ld-amber); }
.ld-eyebrow {
    display: inline-block;
    color: var(--ld-amber);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: 1rem;
}

.ld-hero-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    padding: 1.5rem;
    backdrop-filter: blur(6px);
}
.ld-hero-stat { text-align: center; padding: .5rem; }
.ld-hero-stat .num { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; color: #fff; }
.ld-hero-stat .lbl { color: var(--ld-sub-on-dark); font-size: .82rem; }

/* ============================================================
   Sections
   ============================================================ */
.ld-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.ld-section--cream { background: var(--ld-cream); }
.ld-section--slate { background: var(--ld-slate); color: var(--ld-text-on-dark); }
.ld-section--slate h2, .ld-section--slate h3 { color: #fff; }

.ld-section-head { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.ld-section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.ld-section-head p { color: var(--ld-subtext); font-size: 1.08rem; font-weight: 300; }
.ld-section--slate .ld-section-head p { color: var(--ld-sub-on-dark); }

.ld-divider {
    width: 64px; height: 4px; border-radius: 4px;
    background: var(--ld-amber);
    margin: 0 auto 1.4rem;
}

/* ============================================================
   Service cards
   ============================================================ */
.ld-card {
    background: #fff;
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow);
    padding: 2.2rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
    border: 1px solid rgba(44, 62, 80, .06);
    display: flex;
    flex-direction: column;
}
.ld-card:hover { transform: translateY(-6px); box-shadow: var(--ld-shadow-lg); }
/* Opt-out for cards that are NOT the sole filler of their grid column
   (e.g. stacked below other content). Prevents height:100% from resolving
   against the flex-stretched column and overflowing it. */
.ld-card--auto { height: auto; }
.ld-card-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(230, 126, 34, .15), rgba(245, 203, 167, .25));
    color: var(--ld-amber);
    margin-bottom: 1.3rem;
}
.ld-card-icon svg { width: 32px; height: 32px; }
.ld-card h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.ld-card p { color: var(--ld-subtext); font-weight: 300; flex-grow: 1; }
.ld-card .ld-card-link {
    color: var(--ld-amber);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
}
.ld-card .ld-card-link:hover { gap: .7rem; }

/* Feature list with checks */
.ld-check-list { list-style: none; padding: 0; margin: 0; }
.ld-check-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: .85rem;
    color: var(--ld-subtext);
    font-weight: 300;
}
.ld-check-list li::before {
    content: "";
    position: absolute;
    left: 0; top: .15rem;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ld-amber);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.3 3 8.1l1.1-1.1 2.1 2.1 5.6-5.6L13 4.6z'/%3E%3C/svg%3E") center/14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.3 3 8.1l1.1-1.1 2.1 2.1 5.6-5.6L13 4.6z'/%3E%3C/svg%3E") center/14px no-repeat;
}
.ld-section--slate .ld-check-list li { color: rgba(255,255,255,.82); }

/* ============================================================
   Stat strip
   ============================================================ */
.ld-stat { text-align: center; padding: 1rem; }
.ld-stat .num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--ld-amber); line-height: 1; }
.ld-stat .lbl { color: var(--ld-sub-on-dark); margin-top: .4rem; font-weight: 300; }

/* ============================================================
   Process steps
   ============================================================ */
.ld-step { text-align: center; padding: 1rem; }
.ld-step-num {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid; place-items: center;
    margin: 0 auto 1rem;
    background: var(--ld-slate);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    border: 3px solid var(--ld-amber);
}
.ld-step h4 { font-size: 1.1rem; margin-bottom: .4rem; }
.ld-step p { color: var(--ld-subtext); font-weight: 300; font-size: .95rem; }

/* ============================================================
   CTA band
   ============================================================ */
.ld-cta {
    background:
        radial-gradient(800px 300px at 20% 120%, rgba(230, 126, 34, .25), transparent 60%),
        linear-gradient(135deg, var(--ld-amber) 0%, var(--ld-amber-dark) 100%);
    color: #fff;
    border-radius: 24px;
    padding: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    box-shadow: var(--ld-shadow-lg);
}
.ld-cta h2 { color: #fff; font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
.ld-cta p { color: rgba(255, 255, 255, .9); font-weight: 300; max-width: 40rem; margin: 0 auto 1.8rem; }
.ld-cta .btn-white {
    background: #fff; color: var(--ld-amber-dark);
    font-weight: 600; border-radius: 999px; padding: .8rem 2rem; border: 2px solid #fff;
    transition: all .2s ease;
}
.ld-cta .btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.18); color: var(--ld-amber-dark); }

/* ============================================================
   Footer
   ============================================================ */
.ld-footer { background: var(--ld-deep-navy); color: var(--ld-sub-on-dark); padding: 3.5rem 0 1.5rem; }
.ld-footer img { height: 54px; margin-bottom: 1rem; }
.ld-footer h5 { color: #fff; font-size: 1rem; letter-spacing: .04em; margin-bottom: 1.1rem; }
.ld-footer a { color: var(--ld-sub-on-dark); display: block; padding: .25rem 0; transition: color .15s ease; }
.ld-footer a:hover { color: var(--ld-amber); }
.ld-footer .ld-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 2.5rem; padding-top: 1.5rem;
    color: var(--ld-sub-on-dark); font-size: .9rem;
}

/* ============================================================
   Contact / forms
   ============================================================ */
.ld-form-card {
    background: #fff; border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow); padding: clamp(1.6rem, 4vw, 2.6rem);
}
.ld-form-card .form-label { font-weight: 500; color: var(--ld-slate); }
.ld-form-card .form-control, .ld-form-card .form-select {
    border-radius: 10px; border: 1.5px solid #e3e6ea; padding: .7rem .9rem;
}
.ld-form-card .form-control:focus, .ld-form-card .form-select:focus {
    border-color: var(--ld-amber); box-shadow: 0 0 0 .2rem rgba(230, 126, 34, .15);
}
.ld-contact-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.ld-contact-item .ic {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(230, 126, 34, .12); color: var(--ld-amber);
}
.ld-contact-item .ic svg { width: 22px; height: 22px; }

/* ============================================================
   Page hero (interior pages)
   ============================================================ */
.ld-page-hero {
    background:
        radial-gradient(900px 380px at 85% -20%, rgba(230, 126, 34, .2), transparent 60%),
        linear-gradient(135deg, var(--ld-deep-navy), var(--ld-slate));
    color: #fff;
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.ld-page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.ld-page-hero p { color: var(--ld-sub-on-dark); font-weight: 300; max-width: 42rem; }
.ld-breadcrumb { color: var(--ld-sub-on-dark); font-size: .9rem; }
.ld-breadcrumb a { color: var(--ld-amber); }

/* ============================================================
   Misc
   ============================================================ */
.ld-pill {
    display: inline-block; background: rgba(230, 126, 34, .12); color: var(--ld-amber-dark);
    border-radius: 999px; padding: .3rem .9rem; font-size: .82rem; font-weight: 600;
    letter-spacing: .03em;
}
.ld-lead-text { font-size: 1.1rem; color: var(--ld-subtext); font-weight: 300; line-height: 1.75; }

/* ---------- Blog article body ---------- */
.ld-article { max-width: 46rem; }
.ld-article h2 { font-size: 1.5rem; margin: 2.2rem 0 .8rem; }
.ld-article p { color: var(--ld-subtext); font-weight: 300; line-height: 1.8; margin-bottom: 1rem; }
.ld-article a { color: var(--ld-amber-dark); font-weight: 500; }
.ld-article a:hover { text-decoration: underline; }
.ld-article .ld-check-list { margin: 1rem 0 1.4rem; }

@media (max-width: 991.98px) {
    .ld-navbar .nav-link { margin: .15rem 0; padding: .6rem .25rem !important; }
    .ld-navbar .navbar-nav { padding-top: .5rem; }
    .ld-navbar .navbar-collapse { padding-bottom: .5rem; }
}

/* Blazor error UI */
#blazor-error-ui {
    color-scheme: light only;
    background: var(--ld-slate);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .3);
    display: none;
    left: 0;
    padding: 0.8rem 1.4rem 0.9rem 1.4rem;
    position: fixed;
    width: 100%;
    z-index: 1060;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1.4rem; top: 0.7rem; }
.btn:disabled, .btn.disabled { opacity: .6; }