/* =========================================================
   S. Vinothkumar — Freelance Web Developer
   Theme layer on top of Bootstrap 5.3.

   Layout, grid, navbar, offcanvas, accordion and cards are
   Bootstrap's. This file only does two things: retune
   Bootstrap's own variables to the palette taken from
   tamilarasann.com, and add the handful of components the
   bharathan.net layout needs that Bootstrap has no equivalent
   for - the hero, the alternating service bands, the numbered
   process row and the dark footer.
   ========================================================= */

/* ---------- palette, sampled from tamilarasann.com ---------- */
:root {
    --ink:       #0B2340;   /* headings, dark bands      */
    --ink-2:     #0E2748;
    --blue:      #2B84F0;   /* the one accent blue       */
    --blue-dark: #2680EB;
    --blue-tint: #E9F2FD;   /* pale blue band            */
    --cream:     #FDF7EE;   /* the warm band             */
    --cream-2:   #FFF6DC;
    --beige:     #F3EADD;
    --amber:     #FFC629;   /* the call to action        */
    --muted:     #5C6B84;   /* body copy                 */
    --line:      #E1E8F1;
    --green:     #25D366;

    /* hand the same palette to Bootstrap, so its own components
       (buttons, focus rings, links, accordion) inherit it instead
       of being overridden one by one */
    --bs-primary:      #2B84F0;
    --bs-primary-rgb:  43, 132, 240;
    --bs-body-color:   #5C6B84;
    --bs-body-bg:      #ffffff;
    --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.7;
    --bs-heading-color: #0B2340;
    --bs-border-color: #E1E8F1;
    --bs-link-color:   #2B84F0;
    --bs-link-hover-color: #2680EB;
    --bs-border-radius:    .75rem;
    --bs-border-radius-lg: 1.25rem;
    --bs-border-radius-xl: 1.25rem;
}

body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* The reference lays its content out in a 1200px shell. Bootstrap's own
   .container widens to 1320px at xxl, which reads noticeably looser, so the
   top breakpoint is pulled back rather than every section being re-padded. */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1200px; }
}

h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }

.h-xl { font-size: clamp(38px, 5.2vw, 60px); }
.h-lg { font-size: clamp(30px, 3.6vw, 44px); }

.lede { font-size: 1.125rem; max-width: 62ch; }

.accent { color: var(--blue); }
.dot    { color: var(--amber); }

.section    { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.bg-cream { background: var(--cream) !important; }
.bg-tint  { background: var(--blue-tint) !important; }
.bg-ink   { background: var(--ink) !important; color: rgba(255,255,255,.72); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }

/* the small caps label above every heading, as both references use */
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--blue); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--amber); }
.bg-ink .eyebrow { color: var(--amber); }
.bg-ink .eyebrow::before { background: var(--blue); }

/* ---------- buttons: Bootstrap shapes, this palette ---------- */
.btn { border-radius: 999px; font-weight: 700; padding: .8rem 1.6rem; font-size: .95rem; }
.btn:hover { transform: translateY(-2px); }
.btn { transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }

.btn-amber { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-amber:hover, .btn-amber:focus { background: #ffd14f; border-color: #ffd14f; color: var(--ink); }

.btn-outline-ink { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.btn-outline-ink:hover { border-color: var(--blue); color: var(--blue); }

.btn-outline-light-ink { border: 1.5px solid rgba(255,255,255,.28); color: #fff; }
.btn-outline-light-ink:hover { border-color: var(--amber); color: var(--amber); }

.btn-blue-solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-blue-solid:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }

.btn-wa { background: var(--green); border-color: var(--green); color: #fff; }
.btn-wa:hover { background: #1fbb59; border-color: #1fbb59; color: #fff; }

/* ---------- top utility bar ---------- */
.topbar { background: var(--ink-2); color: rgba(255,255,255,.72); font-size: .78rem; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--amber); }
.topbar .tag {
    color: var(--amber); font-weight: 700; text-transform: uppercase;
    letter-spacing: .14em; font-size: .68rem;
}

/* ---------- navbar ---------- */
.navbar { border-bottom: 1px solid var(--line); background: #fff; }
.navbar .navbar-brand { font-weight: 800; letter-spacing: -.04em; color: var(--ink); font-size: 1.3rem; }
.navbar .navbar-brand span { color: var(--amber); }
.navbar .nav-link {
    font-weight: 600; color: var(--ink); font-size: .95rem;
    padding: .55rem .9rem; border-radius: 999px;
}
.navbar .nav-link:hover, .navbar .nav-link:focus { background: var(--blue-tint); color: var(--blue); }
.navbar-toggler { border: 0; padding: .35rem .5rem; }
.navbar-toggler:focus { box-shadow: none; }

/* ---------- the "core services" band ----------
   Layout, type and spacing sampled from freelancewordpressdev.co.uk: Gloock
   for the display heading, a hairline-bordered card grid, and square corners
   throughout - that section uses no radius anywhere.

   Colour is this site's, on white. Amber only appears as a mark - the bullet
   squares, the rule beside Contact, the years box - never as text: #FFC629 on
   white is about 1.7:1 and cannot be read. Blue carries the labels instead. */
.core {
    background: #fff;
    color: var(--muted);
    position: relative;
    padding: 104px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
/* the faint vertical rules the reference lays over its background */
.core::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(to right,
        rgba(11,35,64,.05) 0 1px, transparent 1px 25%);
}
.core > .container { position: relative; z-index: 1; }

.core__eyebrow {
    display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--blue); margin-bottom: 1.25rem;
}
.core__title {
    /* Was Gloock, the serif. The site now sets every heading in Manrope -
       see the note on .svc-grid-band .svc-head - so this follows. */
    font-weight: 800; letter-spacing: -.035em; color: var(--ink);
    font-size: clamp(30px, 3.4vw, 44px); line-height: 1.2; letter-spacing: 0;
    margin: 0;
}
.core p { color: var(--muted); font-size: .95rem; }

/* the buttons row: a squared button, an amber rule, then a plain word */
.core__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.btn-core {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .95rem 1.6rem; border-radius: 0;
    background: var(--ink); border: 1px solid var(--ink);
    color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-core:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.core__contact {
    display: inline-flex; align-items: center; gap: 1.1rem;
    color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 600;
}
.core__contact::before { content: ""; width: 3px; height: 26px; background: var(--amber); }
.core__contact:hover { color: var(--blue); }

/* the years box */
.core__years {
    border: 1px solid var(--beige); padding: 1.6rem 1.75rem;
    background: var(--cream);
    border-left: 3px solid var(--amber);
}
.core__years b {
    display: block; font-weight: 800; letter-spacing: -.035em;
    font-size: 56px; line-height: 1; color: var(--ink); margin-bottom: .75rem;
}
.core__years span { font-size: .82rem; color: var(--muted); line-height: 1.6; }

.core__rule { border: 0; border-top: 1px solid var(--line); margin: 3.25rem 0; opacity: 1; }

/* the three numbered cards */
.core-card {
    border: 1px solid var(--line); background: #fff;
    padding: 28px 24px 30px; height: 100%;
    transition: border-color .18s ease;
}
.core-card:hover { border-color: var(--blue); }
.core-card__n { font-size: 14px; font-weight: 800; color: var(--blue); display: block; margin-bottom: 1.1rem; }
.core-card h3 { color: var(--ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .85rem; }
.core-card p { font-size: .88rem; color: var(--muted); margin: 0 0 1.25rem; }
.core-card ul { list-style: none; margin: 0; padding: 0; }
.core-card li {
    position: relative; padding-left: 1.1rem; margin-bottom: .6rem;
    font-size: .82rem; color: var(--ink);
}
.core-card li::before {
    content: ""; position: absolute; left: 0; top: .45rem;
    width: 6px; height: 6px; background: var(--amber);
}

/* the tech stack strip */
.core__stack-label {
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--blue); margin-bottom: 1rem; display: block;
}
.core-pill {
    display: inline-block; padding: 7px 14px; border-radius: 0;
    background: #fff; border: 1px solid var(--line);
    color: var(--ink); font-size: 12px; font-weight: 600;
}
.core-pill:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 767.98px) {
    .core { padding: 64px 0; }
    .core__rule { margin: 2.25rem 0; }
}

/* ---------- the numbered services grid ----------
   Layout from freelancewordpressdev.co.uk/digital-services: a two-line serif
   headline over a four-across grid of hairline-bordered cards, square
   corners, numbers above the titles. Colour is this site's - navy band, amber
   for the second headline line and the numbers. */
.svc-grid-band {
    background: var(--ink); color: rgba(255,255,255,.72);
    position: relative; overflow: hidden; padding: 104px 0;
}
.svc-grid-band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(to right,
        rgba(255,255,255,.035) 0 1px, transparent 1px 25%);
}
.svc-grid-band > .container { position: relative; z-index: 1; }

/* The band heading was the only h2 on a service page set in Gloock, the serif
   used for the hero name. Next to the sans-serif headings in the cards
   directly beneath it, it read as a different site rather than as emphasis,
   so it now takes the same family, weight and tracking as every other
   heading. The amber second line stays - that was doing real work. */
.svc-grid-band .svc-head {
    font-weight: 800; letter-spacing: -.035em;
    font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06;
    color: #fff; margin: 0 0 3.25rem;
}
.svc-grid-band .svc-head em { font-style: normal; color: var(--amber); display: block; }

.svc-tile {
    border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03);
    padding: 28px 24px 30px; height: 100%; text-decoration: none; display: block;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.svc-tile:hover { border-color: var(--amber); background: rgba(255,255,255,.06); transform: translateY(-3px); }
.svc-tile__n {
    display: block; font-size: 14px; font-weight: 800; letter-spacing: .06em;
    color: var(--amber); margin-bottom: 1.6rem;
}
.svc-tile h3 {
    color: #fff; font-size: 1.18rem; font-weight: 600; line-height: 1.3;
    letter-spacing: -.01em; margin: 0 0 1.25rem;
}
.svc-tile p { margin: 0; font-size: .9rem; color: rgba(255,255,255,.66); line-height: 1.65; }

@media (max-width: 767.98px) {
    .svc-grid-band { padding: 64px 0; }
    .svc-grid-band .svc-head { margin-bottom: 2.25rem; }
}

/* ---------- mega menu ---------- */
/* Bootstrap's dropdown does the open/close and the keyboard handling; this
   makes the panel span the page instead of hanging off its trigger. The
   navbar's .container is the positioning context, so the panel matches the
   content width rather than the viewport. */
.navbar .container { position: relative; }

.has-mega { position: static; }

.mega__new {
    display: inline-block; margin-left: .4rem; vertical-align: middle;
    background: var(--ink); color: #fff; font-size: .6rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; padding: .15rem .4rem; border-radius: .3rem;
}

/* one column of links, hanging off its own trigger */
.menu-list {
    border: 1px solid var(--line); border-radius: 1rem; padding: .6rem;
    margin-top: .75rem; box-shadow: 0 26px 60px rgba(11,35,64,.13); min-width: 264px;
}
.menu-list .dropdown-item {
    border-radius: .6rem; padding: .6rem .85rem; font-size: .93rem;
    font-weight: 600; color: var(--ink);
}
.menu-list .dropdown-item:hover,
.menu-list .dropdown-item:focus { background: var(--blue-tint); color: var(--blue); }

/* three labelled columns, spanning the container rather than the trigger */
.menu-panel {
    width: 100%; left: 0; right: 0;
    border: 0; border-top: 1px solid var(--line); border-radius: 0 0 1.25rem 1.25rem;
    padding: 2rem 2.25rem 2.25rem; margin-top: .75rem;
    box-shadow: 0 26px 60px rgba(11,35,64,.13);
}
.menu-panel__label {
    display: flex; align-items: center; gap: .6rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink); text-decoration: none; margin-bottom: 1rem;
}
.menu-panel__label::before { content: ""; width: 20px; height: 2px; background: var(--blue); flex: 0 0 20px; }
.menu-panel__label:hover { color: var(--blue); }
.menu-panel__item {
    display: block; padding: .42rem 0; font-size: .93rem; font-weight: 600;
    color: var(--muted); text-decoration: none;
}
.menu-panel__item:hover { color: var(--blue); }

/* the caret on a trigger, and its open state */
.navbar .nav-link.dropdown-toggle::after { border: 0; content: "\f078"; font: 900 .6rem "Font Awesome 6 Free"; vertical-align: 1px; margin-left: .35rem; }
.navbar .nav-item.show > .nav-link { background: var(--blue-tint); color: var(--blue); }

@media (max-width: 1199.98px) {
    .menu-panel { padding: 1.5rem; }
}

/* ---------- the mobile panel's collapsible groups ---------- */
.m-group__head {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; padding: .9rem 0; color: var(--ink);
    font-size: 1.02rem; font-weight: 700; text-align: left;
}
.m-group__head i { color: var(--blue); font-size: .8rem; transition: transform .2s ease; }
.m-group__head[aria-expanded="true"] i { transform: rotate(180deg); }
.m-sub { list-style: none; margin: 0 0 .75rem; padding: 0 0 0 .25rem; }
.m-sub a {
    display: block; padding: .55rem 0; font-size: .92rem; color: var(--muted); text-decoration: none;
}
.m-sub a:hover { color: var(--blue); }
.m-sub .m-sub__label {
    font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--blue); padding: .75rem 0 .25rem; display: block;
}

/* ---------- inner page banner ---------- */
/* The home page opens on the full hero. Every other page opens on this: the
   same navy, a third of the height, the page title and a crumb trail. */
.page-hero {
    background: var(--ink); color: rgba(255,255,255,.7);
    position: relative; overflow: hidden;
    padding: 72px 0 80px;
}
.page-hero::after {
    content: ""; position: absolute; right: -180px; top: -120px;
    width: 460px; height: 460px; border-radius: 50%;
    border: 1px solid rgba(43,132,240,.25);
    box-shadow: 0 0 0 50px rgba(43,132,240,.04);
    pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(34px, 4.6vw, 54px); }
.page-hero .lede { color: rgba(255,255,255,.7); }

.crumbs { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; }
.crumbs li { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.55); }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.3); }
.crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.crumbs [aria-current] { color: var(--amber); font-weight: 700; }

/* the current page in the navbar */
.navbar .nav-link.active { background: var(--blue-tint); color: var(--blue); }
.offcanvas .nav-link.active { color: var(--blue); }

/* a timeline row, for the About page */
.tl-item { border-left: 2px solid var(--line); padding: 0 0 2rem 1.75rem; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
    content: ""; position: absolute; left: -9px; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 3px solid var(--blue);
}
.tl-year {
    font-size: .78rem; font-weight: 800; letter-spacing: .12em;
    color: var(--blue); text-transform: uppercase;
}

/* portfolio filter row */
.filter-pill {
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    border-radius: 999px; padding: .55rem 1.2rem; font-size: .88rem; font-weight: 700;
}
.filter-pill.is-active, .filter-pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- training: the course tabs ---------- */
/* A row of numbered course tabs across the top, then the selected course's
   panel below it — the arrangement the reference training page uses. */
.course-tabs { border-bottom: 1px solid var(--line); gap: 0; flex-wrap: nowrap; overflow-x: auto; }
.course-tabs::-webkit-scrollbar { height: 4px; }
.course-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.course-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    padding: 1rem 1.4rem 1.1rem; text-align: left; white-space: nowrap;
    color: var(--muted); background: none;
}
.course-tabs .nav-link b { display: block; color: var(--ink); font-size: .97rem; font-weight: 700; letter-spacing: -.02em; }
.course-tabs .nav-link small { font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.course-tabs .nav-link:hover b { color: var(--blue); }
.course-tabs .nav-link.active { border-bottom-color: var(--amber); background: none; }
.course-tabs .nav-link.active b { color: var(--blue); }
.course-tabs .nav-link.active small { color: var(--amber); }

.course-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: var(--blue-tint); color: var(--blue);
}
.course-pill--fee { background: var(--amber); color: var(--ink); }

/* the "you finish with" box */
.outcome {
    border-radius: 1rem; padding: 1.25rem 1.4rem;
    background: var(--cream); border: 1px solid var(--beige);
}
.outcome span {
    display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--blue); margin-bottom: .4rem;
}

/* the module grid */
.module {
    border-top: 1px solid var(--line); padding: 1.15rem 0;
    display: flex; gap: 1rem;
}
.module b {
    flex: 0 0 34px; font-size: .8rem; font-weight: 800; letter-spacing: .06em;
    color: var(--blue); padding-top: .15rem;
}
.module h4 { font-size: 1rem; margin: 0 0 .25rem; letter-spacing: -.02em; }
.module p { margin: 0; font-size: .9rem; }

/* a mode card, and the value props above the courses */
.mode-card { border: 1px solid var(--line); border-radius: 1.25rem; padding: 2rem; background: #fff; height: 100%; }
.mode-card .icon-chip { margin-bottom: 1.25rem; }
.mode-best {
    display: block; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
    font-size: .82rem; color: var(--blue); font-weight: 700;
}

.prop { display: flex; gap: 1rem; }
.prop .icon-chip { flex: 0 0 40px; }
.prop h3 { font-size: 1.02rem; margin: 0 0 .3rem; }
.prop p { margin: 0; font-size: .9rem; }

/* the dark workshop / trainer bands */
.band-ink { background: var(--ink); color: rgba(255,255,255,.72); position: relative; overflow: hidden; }
.band-ink h2, .band-ink h3 { color: #fff; }
.band-ink .lede { color: rgba(255,255,255,.72); }
.band-ink::after {
    content: ""; position: absolute; left: -160px; bottom: -180px;
    width: 420px; height: 420px; border-radius: 50%;
    border: 1px solid rgba(43,132,240,.22); pointer-events: none;
}
.band-ink > .container { position: relative; z-index: 1; }
.band-list { list-style: none; margin: 0; padding: 0; }
.band-list li { display: flex; gap: .75rem; padding: .5rem 0; font-size: .95rem; }
.band-list li::before { content: "✓"; color: var(--amber); font-weight: 800; }

/* map / embed placeholder */
.map-box {
    border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--line);
    background: var(--blue-tint); aspect-ratio: 16 / 9;
    display: grid; place-items: center; color: var(--blue); font-size: .85rem;
    text-align: center;
}
/* The embed fills the frame. Without this an iframe keeps its own attribute
   size and leaves a band of the tint showing down one side. */
.map-box iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 575.98px) {
    /* 16:9 is 190px tall on a phone, which is too little map to read. */
    .map-box { aspect-ratio: 4 / 3; }
}

/* ---------- hero ---------- */
.hero { background: var(--ink); color: rgba(255,255,255,.74); position: relative; overflow: hidden; }
.hero::after {   /* the soft ring the reference sets behind the portrait */
    content: ""; position: absolute; right: -140px; top: 60px;
    width: 560px; height: 560px; border-radius: 50%;
    border: 1px solid rgba(43,132,240,.28);
    box-shadow: 0 0 0 60px rgba(43,132,240,.05);
    pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero-name { font-size: clamp(44px, 6.4vw, 78px); color: #fff; letter-spacing: -.045em; line-height: 1; }
.hero-role { font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; color: var(--blue); letter-spacing: -.035em; }

/* The role line is a full positioning statement, not two words, so it runs to
   three lines at the display size the short version used. Stepped down and
   given a max-width so it breaks where the sense breaks rather than wherever
   the column happens to end. */
.hero-role--long {
    font-size: clamp(21px, 2.3vw, 30px);
    line-height: 1.25;
    max-width: 22ch;
}
.hero-role__sep { color: rgba(255,255,255,.35); font-weight: 400; }
.hero-stats { border-top: 1px solid rgba(255,255,255,.12); }
.hero-stats b { font-size: 1.85rem; color: #fff; letter-spacing: -.04em; line-height: 1; }
.hero-stats span { font-size: .82rem; color: rgba(255,255,255,.55); }
.hero-portrait {
    border-radius: 1.25rem; overflow: hidden; aspect-ratio: 4 / 5;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    display: grid; place-items: center; color: rgba(255,255,255,.4);
    font-size: .82rem; text-align: center; padding: 1.25rem;
}
.hero-card {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 1.25rem; padding: 1.5rem;
}
.badge-avail {
    display: inline-flex; align-items: center; gap: 9px;
    padding: .5rem 1rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: rgba(37,211,102,.14); color: #6ff0a4; border: 1px solid rgba(37,211,102,.3);
}
.badge-avail i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: block; }

/* ---------- services: the alternating full-width bands ---------- */
.svc-band { border-radius: 1.25rem; padding: 2.75rem; border: 1px solid var(--line); background: #fff; }
.svc-band--ink   { background: var(--ink); border-color: transparent; color: rgba(255,255,255,.7); }
.svc-band--cream { background: var(--cream); border-color: var(--beige); }
.svc-num { font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--blue); }
.svc-band--ink .svc-num { color: var(--amber); }
.svc-title { font-size: clamp(26px, 3vw, 40px); text-transform: uppercase; letter-spacing: -.03em; }
.svc-icon {
    width: 52px; height: 52px; border-radius: 1rem; background: var(--blue);
    color: #fff; display: grid; place-items: center; font-size: 1.25rem;
}
.svc-band--ink .svc-icon { background: var(--amber); color: var(--ink); }
.svc-links { list-style: none; margin: 0; padding: 0; }
.svc-links li { border-top: 1px solid var(--line); }
.svc-band--ink .svc-links li { border-color: rgba(255,255,255,.14); }
.svc-links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 0; font-weight: 600; color: var(--ink); font-size: .97rem; text-decoration: none;
}
.svc-band--ink .svc-links a { color: #fff; }
.svc-links a:hover { color: var(--blue); }
.svc-band--ink .svc-links a:hover { color: var(--amber); }
.svc-media {
    border-radius: 1rem; aspect-ratio: 4 / 3; background: var(--blue-tint);
    display: grid; place-items: center; color: var(--blue); font-size: .82rem;
    text-align: center; padding: 1.25rem; border: 1px dashed rgba(43,132,240,.35);
}
.svc-band--ink .svc-media {
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.5);
}

/* ---------- about me: wide text column, portrait card ---------- */
.who p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.1rem; }
.who p a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(43,132,240,.35); }
.who p a:hover { border-bottom-color: var(--blue); }

/* The two hairlines from the reference: one under the title, one between the
   halves of the text. Bootstrap's <hr> carries its own opacity, hence the
   explicit reset. */
.who__rule {
    border: 0; border-top: 1px solid var(--line);
    opacity: 1; margin: 1.75rem 0 2rem;
}
.who__h {
    font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 1.25rem;
    letter-spacing: -.01em; color: var(--ink);
}

/* On the white ground the card has to carry its own edge, so it takes the
   cream fill and hairline the package cards already use rather than the
   rgba-white treatment that only works against the navy. */
.who-card {
    background: var(--cream); border: 1px solid var(--beige);
    border-radius: 1.25rem; padding: 1.5rem 1.5rem 2rem; text-align: center;
}
.who-card__photo {
    aspect-ratio: 6 / 7; border-radius: .75rem; margin-bottom: 1.75rem;
    background: #fff; border: 1px dashed var(--line);
    display: grid; place-items: center; text-align: center;
    color: var(--muted); font-size: .82rem; line-height: 1.6;
}
.who-card__name { font-size: 1.6rem; margin: 0 0 .5rem; color: var(--ink); }
.who-card__role { font-size: .95rem; margin: 0 0 1.75rem; color: var(--muted); }
.who-card__social { display: flex; justify-content: center; gap: .75rem; }

.who-dot {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    font-size: 1.05rem; text-decoration: none; transition: transform .18s ease, filter .18s ease;
}
.who-dot:hover { transform: translateY(-2px); filter: brightness(1.08); }
.who-dot--amber { background: var(--amber); color: var(--ink); }
.who-dot--blue  { background: var(--blue);  color: #fff; }
.who-dot--green { background: var(--green); color: #fff; }

/* The card is a sidebar next to the text at lg and up; below that it stacks,
   where a full-width portrait would push everything else off the first screen. */
@media (max-width: 991.98px) {
    .who-card { max-width: 420px; margin-inline: auto; }
}

/* ---------- service pages ---------- */
/* The banner is the page-hero's ground with a two-column layout on it: the
   pitch on the left, the quote card on the right. */
.svc-hero {
    background: var(--ink); color: rgba(255,255,255,.74);
    padding: 3rem 0 4.5rem; position: relative; overflow: hidden;
}
.svc-hero::before {
    content: ""; position: absolute; top: -30%; right: -10%; width: 620px; height: 620px;
    border-radius: 50%; background: rgba(255,255,255,.03); pointer-events: none;
}
.svc-hero > .container { position: relative; z-index: 1; }
.svc-hero__h1 {
    color: #fff; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1;
    letter-spacing: -.02em; margin: 1.25rem 0 0;
}
.svc-hero__sub { color: var(--amber); font-size: 1.1rem; font-weight: 700; margin: .9rem 0 0; }
.svc-hero__lede { font-size: 1.05rem; line-height: 1.75; margin: 1.1rem 0 0; max-width: 58ch; }

.svc-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.svc-trust li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.svc-trust i { color: var(--amber); font-size: .78rem; }

.svc-quote {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
    border-radius: 1.25rem; padding: 1.75rem;
}
.svc-quote__eyebrow {
    display: block; font-size: .68rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--amber); margin-bottom: .6rem;
}
.svc-quote__h { color: #fff; font-size: 1.4rem; margin: 0 0 .65rem; }
.svc-quote__p { font-size: .92rem; margin: 0 0 1.1rem; }
.svc-quote__list { list-style: none; margin: 0 0 1.35rem; padding: 0; font-size: .9rem; }
.svc-quote__list li { padding: .35rem 0 .35rem 1.5rem; position: relative; }
.svc-quote__list li::before {
    content: "\f00c"; font: 900 .7rem "Font Awesome 6 Free";
    position: absolute; left: 0; top: .5rem; color: var(--amber);
}
.svc-quote__foot { font-size: .8rem; margin-top: .9rem; text-align: center; }

.svc-prose { font-size: 1.02rem; line-height: 1.8; margin-bottom: 1.15rem; }
.svc-tile__b {
    font-size: .85rem; color: var(--amber); margin: 1rem 0 0;
    padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.1);
}

.who-for {
    background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.6rem;
}
.who-for h3 { font-size: 1.05rem; color: var(--ink); margin: 0 0 .5rem; }
.who-for p  { font-size: .92rem; line-height: 1.65; margin: 0; }

.ind-card {
    background: #fff; border: 1px solid var(--beige); border-radius: 1.25rem; padding: 1.6rem;
}
.ind-card h3 { font-size: 1.05rem; color: var(--ink); margin: 0 0 .75rem; }
.ind-card p  { font-size: .89rem; line-height: 1.65; margin: 0 0 .6rem; }
.ind-card strong { color: var(--ink); }

.step-card {
    background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.75rem;
}
.step-card__n {
    display: block; font-size: .82rem; font-weight: 800; letter-spacing: .12em;
    color: var(--blue); margin-bottom: .75rem;
}
.step-card h3 { font-size: 1.15rem; color: var(--ink); margin: 0 0 .65rem; }
.step-card p  { font-size: .92rem; line-height: 1.65; margin: 0 0 .75rem; }
.step-card__meta { font-size: .85rem; color: var(--muted); }
.step-card__meta strong { color: var(--ink); }

.tech-row { padding: .6rem 0; border-top: 1px solid var(--line); }
.tech-row:first-of-type { border-top: 0; padding-top: 0; }
.tech-row strong { display: block; color: var(--ink); font-size: .95rem; }
.tech-row span   { display: block; font-size: .86rem; line-height: 1.6; }

.feat { display: flex; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.feat i { color: var(--blue); margin-top: .25rem; }
.feat strong { display: block; color: var(--ink); font-size: .95rem; }
.feat span   { display: block; font-size: .86rem; line-height: 1.55; }

.tick-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.tick-list li { padding: .45rem 0 .45rem 1.75rem; position: relative; font-size: .93rem; }
.tick-list li::before {
    content: "\f058"; font: 900 .85rem "Font Awesome 6 Free";
    position: absolute; left: 0; top: .5rem; color: var(--blue);
}

.case { background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.75rem; }
.case__ind {
    display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--blue); background: var(--blue-tint);
    padding: .3rem .6rem; border-radius: .4rem;
}
.case__name { font-size: 1.15rem; color: var(--ink); margin: .9rem 0 1rem; }
.case__dl { margin: 0; font-size: .88rem; }
.case__dl dt {
    font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-top: .85rem;
}
.case__dl dt:first-child { margin-top: 0; }
.case__dl dd { margin: .25rem 0 0; line-height: 1.6; }
/* The one line on the page that is meant to look unfinished, because it is. */
.case__todo { color: var(--blue); font-weight: 700; }

/* ---------- why hire me ---------- */
.reason {
    background: #fff; border: 1px solid var(--line); border-radius: 1.25rem;
    padding: 2rem 1.75rem 1.75rem; position: relative;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.reason:hover {
    border-color: var(--blue); transform: translateY(-3px);
    box-shadow: 0 18px 40px -28px rgba(11,35,64,.55);
}

/* The reference marks each point with a short dash. Here the dash sits under
   the number, which does the same job of starting the eye in one place down
   the column. */
.reason__n {
    display: block; font-size: .82rem; font-weight: 800; letter-spacing: .12em;
    color: var(--blue); margin-bottom: .9rem;
}
.reason__n::after {
    content: ""; display: block; width: 26px; height: 2px;
    background: var(--amber); margin-top: .55rem;
}
.reason__t { font-size: 1.12rem; color: var(--ink); margin: 0 0 .6rem; letter-spacing: -.01em; }
.reason__d { font-size: .95rem; line-height: 1.7; margin: 0; }

/* ---------- stats / process / cards ---------- */
.icon-chip {
    width: 40px; height: 40px; border-radius: .75rem; background: var(--blue-tint);
    color: var(--blue); display: grid; place-items: center; font-size: 1rem;
}
.stat-num { font-size: 3rem; color: var(--ink); letter-spacing: -.05em; line-height: 1; font-weight: 800; }

.step-n {
    width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
    font-size: 1.2rem; font-weight: 800; color: var(--ink);
    background: #fff; border: 1.5px solid var(--amber); margin-inline: auto;
}

.tool-pill {
    display: inline-block; padding: .65rem 1.1rem; border-radius: 999px; background: #fff;
    border: 1px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--ink);
    text-decoration: none;
}
.tool-pill:hover { border-color: var(--blue); color: var(--blue); }
.tool-pill .mega__new { margin-left: .4rem; }

/* one labelled group of skills */
.skill-group { height: 100%; }
.skill-group__label {
    display: flex; align-items: center; gap: .6rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink); margin-bottom: 1rem;
}
.skill-group__label::before { content: ""; width: 20px; height: 2px; background: var(--amber); flex: 0 0 20px; }

.card { border-color: var(--line); border-radius: 1.25rem; }
.card-hover { transition: transform .18s ease, border-color .18s ease; }
.card-hover:hover { transform: translateY(-4px); border-color: var(--blue); }
.thumb {
    aspect-ratio: 16 / 10; background: var(--cream); display: grid; place-items: center;
    color: var(--muted); font-size: .82rem; text-align: center; padding: 1rem;
    border-bottom: 1px solid var(--line);
    border-radius: 1.25rem 1.25rem 0 0;
}
.tag-pill {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--blue); background: var(--blue-tint); padding: .3rem .6rem; border-radius: 999px;
}
.stars { color: var(--amber); letter-spacing: 2px; }
.avatar {
    width: 42px; height: 42px; border-radius: 50%; background: var(--blue-tint);
    color: var(--blue); display: grid; place-items: center; font-weight: 800; font-size: .85rem;
}

.pack-featured { border-color: var(--amber); box-shadow: 0 18px 44px rgba(11,35,64,.08); }
.pack-flag {
    position: absolute; top: -13px; left: 2rem; background: var(--amber); color: var(--ink);
    font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: .35rem .9rem; border-radius: 999px;
}
.pack-price { font-size: 2.1rem; color: var(--ink); font-weight: 800; letter-spacing: -.04em; }
.pack-list { list-style: none; margin: 0; padding: 0; }
.pack-list li { display: flex; gap: .6rem; font-size: .92rem; padding: .35rem 0; }
.pack-list li::before { content: "✓"; color: var(--blue); font-weight: 800; }

/* ---------- accordion: Bootstrap's behaviour, this look ---------- */
.accordion { --bs-accordion-border-color: var(--line); --bs-accordion-btn-focus-box-shadow: none; }
.accordion-item { border-left: 0; border-right: 0; border-radius: 0 !important; }
.accordion-item:first-of-type { border-top: 0; }
.accordion-button {
    font-weight: 700; color: var(--ink); font-size: 1.05rem;
    padding: 1.35rem 0; background: transparent !important; box-shadow: none !important;
}
.accordion-button::after { margin-left: auto; }
.accordion-body { padding: 0 0 1.35rem; max-width: 70ch; }

/* ---------- forms ---------- */
.form-control, .form-select {
    border-color: var(--line); border-radius: .75rem; padding: .8rem 1rem;
    font-size: .95rem; color: var(--ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--blue); box-shadow: 0 0 0 .2rem rgba(43,132,240,.15);
}
.form-label { font-weight: 700; color: var(--ink); font-size: .85rem; }

.contact-chip {
    width: 40px; height: 40px; border-radius: .75rem; background: #fff;
    border: 1px solid var(--line); display: grid; place-items: center; color: var(--blue);
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.62); }
.site-footer h4 { color: #fff; font-size: .95rem; letter-spacing: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--amber); }
.social-dot {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08);
    display: grid; place-items: center; color: #fff;
}
.social-dot:hover { background: var(--amber); color: var(--ink) !important; }

/* back to top — sits above the WhatsApp button, and only once there is
   somewhere to go back to */
.to-top {
    position: fixed; right: 20px; bottom: 86px; z-index: 1035;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,.18);
    display: grid; place-items: center; font-size: 1rem; cursor: pointer;
    box-shadow: 0 8px 22px rgba(11,35,64,.28);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .18s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.to-top:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

@media (max-width: 575.98px) {
    /* Size and inset shrink; the bottom offset does NOT. The WhatsApp button
       keeps its 54px height and 20px inset at every width, so moving this to
       78px left a 4px gap - the two read as one blob on a phone. 86px keeps
       the same 12px gap as desktop. */
    .to-top { right: 16px; width: 42px; height: 42px; }
}

.wa-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 1035;
    width: 54px; height: 54px; border-radius: 50%; background: var(--green);
    color: #fff; display: grid; place-items: center; font-size: 1.35rem;
    box-shadow: 0 10px 26px rgba(37,211,102,.4); text-decoration: none;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .hero::after { display: none; }
    .svc-band { padding: 1.75rem; }
}
@media (max-width: 767.98px) {
    .section { padding: 64px 0; }
    .section-sm { padding: 48px 0; }
}