/**************************************
  0) ROOT + GLOBAL UTILITIES
**************************************/
:root{
  --nav-teal:#7ECFDC;
  --nav-dark:#0d2740;
}



/* Basic header spacing used globally */
.site-top {
  position: sticky; top:0; z-index:1000;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-top .container{ min-height:68px; }

/* Base brand link (also used outside header scope) */
.brand {
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  color: #0d2740;
}

/* Generic hover micro-interactions */
.btn{ transition: transform .25s ease, box-shadow .25s ease }
.btn:hover{ transform: translateY(-3px) }
.light-btn:hover {
  transform: translateY(-3px);
  background-color: #7ECFDC; /* Hover color */
  border-color: #7ECFDC;     /* Optional: match border to hover color */
  color: #fff;               /* Optional: make text white for contrast */
}


/**************************************
  1) HEADER & NAV (site-top, brand, nav)
**************************************/
header.site-top .brand {
  font-size: 1.4rem;
  font-weight: 700;
}
header.site-top .brand span {
  font-size: 1.4rem;
}

/* Default/stuck header (solid) — already declared above with .site-top */

/* Overlay variant: sits above hero, transparent, no border/shadow */
.site-top--overlay{
  position:absolute; left:0; right:0; top:0;
  background: transparent;
  border-bottom-color: transparent;
}
.site-top.is-stuck{
  background:#fff;
  border-bottom-color: rgba(0,0,0,.06);
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

/* Final overlay hard reset (wins via !important) */
.site-top--overlay{
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.site-top--overlay.shadow-sm,
.site-top--overlay[class*="shadow"]{
  box-shadow:none !important;
}

/* Brand + nav link visuals */
.site-top .brand{ font-weight:700; font-size:1.6rem; color:var(--nav-dark); text-decoration:none; }
.site-top .brand span{ color:var(--nav-teal); }

.site-top .nav{ display:flex; gap:28px; align-items:center; }
.site-top .nav a{
  position:relative; display:inline-block; padding:6px 2px;
  color:var(--nav-dark); text-decoration:none; font-weight:600; letter-spacing:.2px;
  transition:color .2s ease;
}
.site-top .nav a::after{
  content:""; position:absolute; left:0; bottom:-8px; height:2px; width:0;
  background:var(--nav-teal); transition:width .22s ease;
}
.site-top .nav a:hover{ color:#3aa8ba; }
.site-top .nav a:hover::after{ width:100%; }
.site-top .nav a.active{ color:var(--nav-teal); }
.site-top .nav a.active::after{ width:100%; }



/* Hamburger */
.hamburger {
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  color: #0d2740;
}
.hamburger{ display:none; width:44px; height:44px; background:none; border:0; font-size:1.7rem; color:var(--nav-dark); }

/* Mobile drawer */
@media (max-width:991px){
  .hamburger{ display:inline-block; }
  .site-top .nav{
    position:fixed; top:0; right:0; width:280px; height:100vh;
    background:#fff; border-left:1px solid rgba(0,0,0,.08);
    box-shadow:-20px 0 40px rgba(0,0,0,.06);
    padding:80px 18px 18px; flex-direction:column; gap:12px;
    transform:translateX(100%); transition:transform .28s ease; z-index:1001;
  }
  .site-top.is-open .nav{ transform:translateX(0); }
  #site-nav{ transition: transform .28s ease }
}

/* Dim overlay for mobile drawer */
.nav-dim{ position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .25s ease; }
.nav-dim.show{ opacity:1; pointer-events:auto; }

/* Z-index layering for header/drawer/dimmer */
.site-top { z-index: 2000; }
@media (max-width: 991px){
  .site-top .nav { z-index: 2001; }
}
.nav-dim { z-index: 1500; }

/**************************************
  2) HERO (section.hero.hero-soft.tall-hero)
**************************************/
/* Taller hero that fills more of the viewport and stays centered */
.tall-hero{
  min-height: 36vh;
  display: flex;
  align-items: center;
  padding: 120px 0 160px;        /* base */
  padding-top: 200px;            /* ensure not hidden under overlay header */
}

nav.site-nav a:not(.active) {
  font-weight: normal;
}


/* Stronger blush background */
.tall-hero.hero-soft{
  background:
    linear-gradient(180deg, var(--blush) 0%, rgba(253,235,241,0) 78%),
    linear-gradient(0deg,  rgba(253,235,241,.35) 0%, rgba(253,235,241,0) 85%);
}

/* Top spacing above hero buttons */
.hero-cta{ margin-top: 4rem; }

@media (max-width: 991px){
  .tall-hero{ min-height: 64vh; padding: 96px 0 120px; }
}
@media (max-width: 575px){
  .tall-hero{ min-height: 58vh; padding: 84px 0 110px; }
}




/* 5) Safety: Bootstrap rows sometimes overflow if used outside a container.
   This trims any tiny gutters that might slip out on edge cases. */
.container, .container-fluid {
  overflow-x: clip; /* prevents gutter from creating scroll */
  
}

.fwk-bleed{
  background: #FAF8F5
}

/* ===== Featured Work (scoped) ===== */
.fwk{
    
  --ink:#0d2740;
  --muted:#6b7a86;
  --chip: white;
  --teal:#7ECFDC;
  --ring:#7ECFDC;
  --shadow:0 12px 36px rgba(13,39,64,.08);

 

  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 28px);
  overflow-x: hidden; /* ensures no horizontal scroll */
}

.fwk * { box-sizing: border-box; }
.fwk h2, .fwk h3 { font-family: "Cormorant Garamond", serif; color: var(--ink); }
.fwk p { color: var(--muted); margin: .35rem 0 1rem; }

.fwk__head{ text-align:center; margin-bottom: clamp(28px, 6vw, 56px); }
.fwk__head h2{
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 600;
}
.fwk__head p{ max-width: 640px; margin: .5rem auto 0; }

.fwk__project{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  padding: clamp(16px, 2vw, 22px) 0;
}
.fwk__project + .fwk__project{ margin-top: clamp(28px, 6vw, 64px); }

/* alternate row (image on right on desktop) */
.fwk__project--alt{ grid-template-columns: .95fr 1.05fr; }

.fwk__copy h3{
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 600;
  margin-bottom: .35rem;
}

.fwk__tags{ display:flex; gap:10px; flex-wrap:wrap; margin:.25rem 0 1.1rem; }
.fwk__tag{
  background: var(--chip);
  color:black;
  border:1px solid var(--ring);
  padding:.34rem .6rem;
  border-radius:999px;
  font-size:.8rem;
  white-space:nowrap;
}

.fwk__btn{
  display:inline-block;
  text-decoration:none;
  color:#fff;
  background: #7ECFDC;
  background: linear-gradient(180deg, #6ec3d0, #4a9fb0);
  padding:.55rem .9rem;
  border-radius:999px;
  box-shadow: var(--shadow);
  font-size:.9rem; font-weight:600;
}
.fwk__btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(13,39,64,.16); }

/* Media blocks */
.fwk__media{ display:flex; gap:16px; justify-content:flex-end; align-items:center; }


.fwk__media--phones .fwk__mock {
  /* width: 220px;               */
  /* aspect-ratio: 9/19.5; */

  border-radius: 0;          /* remove rounded frame */
  background: none;          /* no background color */
  box-shadow: none;          /* remove drop shadow */
  object-fit: contain;       /* keep full SVG visible */
}

.fwk__media--grid4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 20px; /* spacing */
}

.fwk__media--grid4 .fwk__thumb {
  width: 100%;
  height: 250px; /* fixed height for all */
  object-fit: contain; /* show full image without cropping */
  background: #fff; /* optional: adds background if image doesn’t fill */
  border-radius: 10px; /* optional: rounded edges */
  padding: 10px; /* optional spacing inside */
}




/* Two wide thumbs */
.fwk__media--pair{ gap:14px; }
.fwk__wide{
  width: 280px; max-width: 100%;
  aspect-ratio: 16/11;
  border-radius: 10px;
  background:#f2f4f6;
  object-fit: cover;
  box-shadow: var(--shadow);
}

/* —— Responsive —— */
@media (max-width: 1100px){
  .fwk__project,
  .fwk__project--alt{
    grid-template-columns: 1fr;
  }
  .fwk__media{ justify-content:flex-start; }
}

@media (max-width: 600px){
  .fwk__media--phones .fwk__mock{ width: 130px; }
  .fwk__thumb{ width: 44vw; }
  .fwk__wide{ width: 44vw; }
}


/* ===== Featured Work — upscale pass =============================== */
.fwk{
  max-width: 1320px;                    /* wider container */
  padding: clamp(52px, 7vw, 96px) clamp(22px, 5vw, 48px);
}

/* Global text sizing in this section */
.fwk h2, .fwk h3, .fwk p, .fwk__tag, .fwk__btn { line-height: 1.35; }
.fwk p{ font-size: clamp(1rem, 1.05vw, 1.15rem); }

/* Head */
.fwk__head{ margin-bottom: clamp(36px, 7vw, 72px); }
.fwk__head h2{
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  font-weight: 600;
}
.fwk__head p{ max-width: 760px; }

/* Row layout & spacing */
.fwk__project{
  grid-template-columns: 1.1fr .95fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(22px, 2.8vw, 32px) 0;
}
.fwk__project + .fwk__project{ margin-top: clamp(36px, 7vw, 84px); }
.fwk__project--alt{ grid-template-columns: .95fr 1.1fr; }

/* Copy block */
.fwk__copy h3{
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  margin-bottom: .5rem;
}
.fwk__tags{ gap:12px; margin:.4rem 0 1.25rem; }
.fwk__tag{
  padding:.42rem .8rem;
  font-size:.92rem;
  font-weight: 500;
}

/* Button */
.fwk__btn{
  padding:.7rem 1.1rem;
  font-size:1rem;

}

/* ---------- Media blocks ---------- */

/* Phone pair — bigger real images, no frame */
.fwk__media--phones .fwk__mock{
  width: 300px;                    /* was 220px */
  max-width: 40vw;
  aspect-ratio: 9/19.5;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

/* Grid of 4 — larger and consistent height */
.fwk__media--grid4{
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;                        /* a touch more breathing room */
}
.fwk__media--grid4 .fwk__thumb{
  width: 100%;
  height: 340px;                    /* was 250px */
  object-fit: contain;              /* never crop */
  background: transparent;          /* no background box */
  border-radius: 10px;
  padding: 0;                       /* remove inner padding */
  display:block;
}

/* Two wides */
.fwk__media--pair{ gap:18px; }
.fwk__wide{
  width: 420px;                     /* was 280px */
  max-width: 46vw;
  aspect-ratio: 16/11;
}

/* ---------- Responsive tuning ---------- */
@media (max-width: 1100px){
  .fwk__project,
  .fwk__project--alt{ grid-template-columns: 1fr; }
  .fwk__media{ justify-content:flex-start; }
  .fwk__media--phones .fwk__mock{ width: 240px; }
  .fwk__media--grid4 .fwk__thumb{ height: 300px; }
  .fwk__wide{ width: 360px; }
}

@media (max-width: 600px){
  .fwk__head h2{ font-size: clamp(1.9rem, 8vw, 2.25rem); }
  .fwk p{ font-size: .98rem; }
  .fwk__media--phones .fwk__mock{ width: 160px; }
  .fwk__media--grid4{ gap: 18px; }
  .fwk__media--grid4 .fwk__thumb{ height: 240px; }
  .fwk__wide{ width: 280px; }
}



/* grid */
.fwk__media--grid4{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
}

/* each tile has the SAME size */
.fwk__cell{

  aspect-ratio: 16 / 12;            /* <- guarantees equal height rows */
  border-radius:12px;
  /* box-shadow:0 8px 30px rgba(0,0,0,.08); */
  overflow:hidden;           
}      

.fwk__cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;

}



/* scale the whole block up/down responsively */
@media (max-width: 900px){
  .fwk__media--grid4{ gap:18px; }
  .fwk__cell{ aspect-ratio: 16 / 13; }
}
@media (max-width: 600px){
  .fwk__media--grid4{ grid-template-columns:1fr; }
}




/* ===========================
   Project 2 — Dashboard Grid
   =========================== */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr)); 
  gap: 8px;
  margin-top: 24px;
  
}

.dashboard-cell {
  width: 100%;
  aspect-ratio: 16 / 10; 
  overflow: hidden;
  border-radius: 12px;
}

.dashboard-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;  /* full image, no cropping */
}

/* Only for ConnectedCare dashboard block */
.fwk__media--cc {
  margin-left: auto;     
  margin-right: 0;
 
}



/* Responsive tweaks */
@media (max-width: 992px) {
  .dashboard-grid {
    grid-template-columns: 1fr;  /* stack on tablets/mobiles */
    gap: 20px;
  }
  .dashboard-cell { aspect-ratio: 16/12; }
}



/* ---------- FUTURE PROJECTS ---------- */
.future {
  background: #FAF8F5;                 /* subtle paper tone to match your page */
  padding: clamp(32px, 5vw, 56px) 0;
}
.future__card {
  width: min(920px, 92%);
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(13, 39, 64, .06);
  padding: clamp(24px, 4vw, 36px);
  text-align: center;
  border: 1px solid rgba(13, 39, 64, .06);
}
.future__card h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  color: #0d2740;
  margin: 0 0 10px;
}
.future__card p {
  color: #576774;
  max-width: 720px;
  margin: 0 auto 18px;
  line-height: 1.55;
}



/* ---------- HOW I WORK ---------- */
.process {
  background: #FAF8F5;
  padding: clamp(40px, 6vw, 72px) 0;
}
.process__wrap {
  width: min(1100px, 94%);
  margin: 0 auto;
  text-align: center;
}
.process__title {
  font-family: "Cormorant Garamond", serif;
  color: #0d2740;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 1.9rem);
  margin-bottom: clamp(18px, 3vw, 28px);
}

.process__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px);
}

.process__item {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 4px 10px;
}

.process__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  background: #d9f1f3;                       /* pastel teal */
  box-shadow: 0 6px 18px rgba(13, 39, 64, .08) inset;
  color: #247d8c;
}
.process__name {
  color: #0d2740;
  font-weight: 600;
}
.process__desc {
  color: #6b7a86;
  font-size: .9rem;
  line-height: 1.45;
  max-width: 220px;
  margin: 0;
}

/* responsive */
@media (max-width: 900px) {
  .process__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__desc { max-width: 360px; }
}


.proj1 img
{
  
  width: 40% !important;
 

}