:root{
  --bg:#f6f4ef;
  --surface:#ffffff;
  --surface-2:#f3f6fb;
  --text:#0d1b38;
  --muted:#52627f;
  --line:rgba(8,24,60,0.12);
  --line-strong:rgba(8,24,60,0.18);
  --navy:#08183c;
  --navy-soft:#10275f;
  --navy-deep:#051230;
  --blue:#183f93;
  --blue-soft:#dfe8fb;
  --white:#ffffff;
  --shadow:0 18px 55px rgba(8,24,60,0.10);
  --shadow-strong:0 28px 80px rgba(8,24,60,0.18);
  --radius:28px;
  --radius-sm:18px;
  --radius-xs:14px;
  --max:1200px;
  --transition:240ms cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(24,63,147,.08), transparent 26%),
    radial-gradient(circle at 100% 20%, rgba(8,24,60,.05), transparent 22%),
    var(--bg);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.site-shell{overflow-x:hidden}
.container{width:min(calc(100% - 2rem),var(--max));margin:0 auto}
.narrow{width:min(calc(100% - 2rem),780px);margin:0 auto}
.section{padding:6.5rem 0}
.page-hero{
  padding:7rem 0 3rem;
  background:
    linear-gradient(180deg, rgba(8,24,60,1) 0%, rgba(8,24,60,.96) 60%, rgba(8,24,60,.90) 100%);
  color:var(--white);
}
.page-hero .hero-lead{max-width:42rem}
.section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 2.6rem;
}
.section-head h2,
.hero-copy h1,
.page-hero h1{
  margin:.9rem 0 1rem;
  line-height:.98;
  letter-spacing:-.04em;
}
.hero-copy h1{
  font-size:clamp(2.8rem,5.8vw,5.6rem);
}
.page-hero h1{
  font-size:clamp(2.3rem,4.8vw,4.2rem);
}
.section-head h2{
  font-size:clamp(2rem,4vw,3.4rem);
}
.hero-lead,
.section-head p,
.legal-card p,
.legal-card li{
  color:var(--muted);
  line-height:1.8;
  font-size:1.02rem;
}
.page-hero .hero-lead{color:rgba(255,255,255,.78)}
.section-kicker,
.eyebrow,
.card-badge,
.mini-pill,
.mini-label{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  width:fit-content;
  padding:.58rem .88rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.eyebrow,
.section-kicker{
  background:rgba(255,255,255,.08);
  color:var(--white);
  border:1px solid rgba(255,255,255,.14);
}
.section .section-kicker,
.intro-strip .section-kicker{
  background:var(--blue-soft);
  color:var(--navy);
  border:1px solid rgba(24,63,147,.12);
}
.card-badge{
  background:var(--blue-soft);
  color:var(--navy);
  border:1px solid rgba(24,63,147,.14);
}
.mini-pill{
  background:rgba(255,255,255,.08);
  color:var(--white);
  border:1px solid rgba(255,255,255,.14);
}
.mini-pill.alt{
  background:rgba(255,255,255,.16);
}
.mini-label{
  background:rgba(24,63,147,.10);
  color:var(--blue);
  border:1px solid rgba(24,63,147,.12);
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(246,244,239,.72);
  border-bottom:1px solid rgba(8,24,60,.08);
}
.header-inner{
  min-height:4.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  display:inline-flex;
  align-items:center;
}
.brand-logo{
  width:min(190px,34vw);
  max-height:42px;
  object-fit:contain;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:1rem;
}
.site-nav a{
  color:var(--muted);
  font-weight:600;
  transition:color var(--transition), transform var(--transition);
}
.site-nav a:hover,
.site-nav a:focus-visible{
  color:var(--navy);
  transform:translateY(-1px);
}
.nav-cta{
  padding:.78rem 1rem;
  background:var(--navy);
  color:var(--white)!important;
  border-radius:999px;
  box-shadow:var(--shadow);
}
.nav-toggle{
  display:none;
  width:3rem;
  height:3rem;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--line);
  padding:0;
}
.nav-toggle span{
  display:block;
  width:1.3rem;
  height:2px;
  margin:.27rem auto;
  background:var(--navy);
  border-radius:3px;
}

.hero-section{
  position:relative;
  overflow:hidden;
  padding:6.5rem 0 4.5rem;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.12), transparent 18%),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(180deg, var(--navy) 0%, #09173a 62%, #10204a 100%);
  color:var(--white);
}
.hero-section::after{
  content:"";
  position:absolute;
  inset:auto -12vw -12rem auto;
  width:38rem;
  height:38rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.hero-grid,
.intro-grid,
.calc-grid,
.contact-grid,
.project-grid,
.pricing-grid,
.process-grid,
.case-study-grid,
.footer-grid,
.form-grid,
.hero-actions,
.hero-metrics,
.project-actions,
.project-tags,
.tick-list,
.contact-links,
.dashboard-top,
.dashboard-stats{
  display:grid;
}
.hero-grid{
  grid-template-columns:1.02fr .98fr;
  gap:2.4rem;
  align-items:center;
}
.hero-copy{position:relative;z-index:2}
.hero-copy .hero-lead{
  max-width:44rem;
  color:rgba(255,255,255,.78);
  font-size:1.08rem;
}
.hero-actions{
  grid-template-columns:repeat(2,max-content);
  gap:1rem;
  margin:1.8rem 0 2rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:3.3rem;
  padding:0 1.25rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover,
.btn:focus-visible{
  transform:translateY(-2px);
}
.btn-primary{
  background:var(--white);
  color:var(--navy);
  box-shadow:var(--shadow);
}
.btn-secondary{
  background:rgba(255,255,255,.08);
  color:var(--white);
  border-color:rgba(255,255,255,.16);
}
.btn-ghost{
  background:transparent;
  color:var(--navy);
  border-color:var(--line);
}
.btn-small{
  min-height:2.9rem;
  padding:0 1rem;
  font-size:.95rem;
}
.hero-metrics{
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.metric-card{
  padding:1.1rem 1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(255,255,255,.06);
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.metric-label{
  display:block;
  font-size:.82rem;
  color:rgba(255,255,255,.60);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.metric-card strong{
  display:block;
  font-size:1.8rem;
  margin:.5rem 0 .18rem;
  letter-spacing:-.04em;
}
.metric-card small{
  color:rgba(255,255,255,.70);
  line-height:1.55;
}

.hero-visual{
  position:relative;
  min-height:35rem;
}
.dashboard-card,
.floating-tile,
.service-card,
.project-card,
.price-card,
.calculator-card,
.contact-card,
.process-step,
.case-study-card,
.legal-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.dashboard-card{
  position:absolute;
  inset:1.2rem 0 3.2rem 0;
  border-radius:32px;
  overflow:hidden;
  padding:1.4rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)),
    linear-gradient(180deg, #112b67 0%, #08183c 100%);
  border-color:rgba(255,255,255,.12);
  box-shadow:var(--shadow-strong);
}
.dashboard-top{
  grid-template-columns:repeat(3,max-content);
  gap:.7rem;
}
.dashboard-graph{
  position:relative;
  height:14rem;
  margin:2rem 0 1.3rem;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  background-size:100% 25%, 20% 100%, auto;
  overflow:hidden;
}
.graph-line{
  position:absolute;
  left:8%;
  right:8%;
  height:3px;
  border-radius:999px;
  transform-origin:left center;
  animation:growLine 2s ease forwards;
}
.line-one{
  top:68%;
  background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.85));
  transform:rotate(-11deg) scaleX(.2);
}
.line-two{
  top:60%;
  background:linear-gradient(90deg, rgba(180,214,255,.12), #cfe0ff);
  transform:rotate(-20deg) scaleX(.2);
  animation-delay:.25s;
}
.graph-dot{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 0 0 10px rgba(255,255,255,.08);
  animation:floatDot 3s ease-in-out infinite;
}
.dot-one{left:28%;top:60%}
.dot-two{left:51%;top:48%;animation-delay:.4s}
.dot-three{left:76%;top:28%;animation-delay:.9s}
.dashboard-stats{
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.dashboard-stats div{
  padding:1rem;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.dashboard-stats span{
  display:block;
  color:rgba(255,255,255,.60);
  font-size:.82rem;
  margin-bottom:.35rem;
}
.dashboard-stats strong{
  color:var(--white);
  font-size:1rem;
  line-height:1.5;
}
.floating-tile{
  position:absolute;
  padding:1rem 1.1rem;
  border-radius:20px;
  color:var(--navy);
  min-width:13rem;
}
.floating-tile small{
  display:block;
  color:var(--muted);
  margin-bottom:.25rem;
}
.floating-tile strong{
  display:block;
  font-size:1rem;
}
.tile-one{
  left:-1rem;
  bottom:5.2rem;
  animation:floatY 5.4s ease-in-out infinite;
}
.tile-two{
  right:-.6rem;
  top:3rem;
  animation:floatY 4.8s ease-in-out infinite reverse;
}
.hero-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(6px);
  opacity:.85;
}
.orb-one{
  width:8rem;height:8rem;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
  left:10%;
  top:2%;
}
.orb-two{
  width:12rem;height:12rem;
  background:radial-gradient(circle, rgba(198,220,255,.24), transparent 70%);
  right:15%;
  bottom:1%;
}

.intro-strip{
  padding:1.5rem 0 0;
}
.intro-grid{
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:stretch;
}
.intro-copy{
  padding:2.4rem 0 0;
}
.intro-copy h2{
  margin:1rem 0 .85rem;
  font-size:clamp(2rem,4vw,3.4rem);
  letter-spacing:-.04em;
  line-height:1.02;
}
.tick-list{
  grid-template-columns:1fr;
  gap:.85rem;
  padding:0;
  list-style:none;
  margin:1.8rem 0 0;
}
.tick-list li{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  color:var(--muted);
  line-height:1.7;
}
.tick-list li::before{
  content:"";
  width:1.05rem;
  height:1.05rem;
  margin-top:.35rem;
  border-radius:50%;
  flex:0 0 auto;
  background:
    radial-gradient(circle at center, var(--white) 0 25%, transparent 26%),
    linear-gradient(180deg, var(--blue), var(--navy));
  box-shadow:0 0 0 5px rgba(24,63,147,.10);
}
.founder-card{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:0;
  border-radius:32px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  min-height:34rem;
}
.founder-photo-wrap{
  min-height:100%;
  background:linear-gradient(180deg, #e8edf7, #f6f4ef);
}
.founder-photo{
  width:100%;
  height:100%;
  object-fit:cover;
}
.founder-copy{
  padding:2.2rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.founder-copy h3{
  margin:.85rem 0 .6rem;
  font-size:2rem;
  letter-spacing:-.04em;
}
.founder-copy p{
  color:var(--muted);
  line-height:1.8;
}

.filter-row,
.pricing-switcher{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
  margin-bottom:2rem;
}
.filter-btn,
.switch-btn{
  min-height:3rem;
  padding:0 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  font-weight:700;
  transition:all var(--transition);
}
.filter-btn.active,
.switch-btn.active{
  background:var(--navy);
  color:var(--white);
  border-color:transparent;
  box-shadow:var(--shadow);
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.2rem;
}
.service-card{
  padding:1.45rem;
  border-radius:26px;
  transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition), max-height var(--transition), padding var(--transition), margin var(--transition), border var(--transition);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-strong);
}
.service-card h3{
  margin:1rem 0 .6rem;
  font-size:1.28rem;
  letter-spacing:-.03em;
}
.service-card p,
.service-card li{
  color:var(--muted);
  line-height:1.7;
}
.service-card ul{
  padding-left:1rem;
  margin:1rem 0 0;
}
.service-card.is-hidden{
  opacity:0;
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  padding-top:0;
  padding-bottom:0;
  margin:0;
  border-width:0;
  box-shadow:none;
}

.work-section{
  background:linear-gradient(180deg, rgba(8,24,60,.03), rgba(8,24,60,.06));
}
.project-grid{
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}
.project-card{
  border-radius:30px;
  overflow:hidden;
}
.project-visual,
.case-study-visual{
  position:relative;
  min-height:18rem;
  padding:1rem;
  overflow:hidden;
}
.plumbing-theme{
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.28), transparent 22%),
    linear-gradient(135deg, #0f265a 0%, #1f58c0 100%);
}
.electrical-theme{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.28), transparent 24%),
    linear-gradient(135deg, #08183c 0%, #d3a844 100%);
}
.browser-bar{
  display:flex;
  gap:.38rem;
  margin-bottom:1rem;
}
.browser-bar span{
  width:.78rem;
  height:.78rem;
  border-radius:50%;
  background:rgba(255,255,255,.65);
}
.project-mock-content,
.case-visual-inner{
  border-radius:24px;
  padding:1.5rem;
  min-height:13rem;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.project-mock-title,
.case-mock-title{
  width:max-content;
  max-width:100%;
  padding:.7rem .9rem;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--navy);
  font-weight:800;
}
.project-mock-lines,
.case-mock-stack{
  margin-top:1.1rem;
  height:6rem;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85) 0 16px, transparent 16px),
    linear-gradient(180deg, rgba(255,255,255,.70) 0 16px, transparent 16px),
    linear-gradient(180deg, rgba(255,255,255,.55) 0 16px, transparent 16px);
  background-size:72% 22px, 100% 22px, 58% 22px;
  background-position:0 0, 0 28px, 0 56px;
  background-repeat:no-repeat;
}
.project-mock-buttons{
  display:flex;
  gap:.6rem;
  margin-top:1rem;
}
.project-mock-buttons span{
  width:6.2rem;
  height:2.5rem;
  border-radius:999px;
  background:rgba(255,255,255,.88);
}
.project-copy,
.case-study-copy{
  padding:1.5rem;
}
.project-copy h3,
.case-study-copy h2{
  margin:1rem 0 .7rem;
  font-size:1.55rem;
  letter-spacing:-.04em;
}
.project-copy p,
.case-study-copy p,
.detail-list li{
  color:var(--muted);
  line-height:1.8;
}
.project-tags{
  grid-template-columns:repeat(3,max-content);
  gap:.6rem;
  margin:1rem 0 1.2rem;
}
.project-tags span{
  padding:.55rem .8rem;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.86rem;
  font-weight:600;
}
.project-actions{
  grid-template-columns:repeat(2,max-content);
  gap:.8rem;
}
.section-cta{
  text-align:center;
  margin-top:2rem;
}

.process-grid{
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.process-step{
  padding:1.5rem;
  border-radius:26px;
}
.process-step span{
  display:inline-grid;
  place-items:center;
  width:3rem;
  height:3rem;
  border-radius:18px;
  background:var(--navy);
  color:var(--white);
  font-weight:800;
}
.process-step h3{
  margin:1rem 0 .6rem;
  font-size:1.3rem;
  letter-spacing:-.03em;
}
.process-step p{color:var(--muted);line-height:1.75}

.pricing-panels{
  position:relative;
}
.pricing-panel{
  display:none;
}
.pricing-panel.active{
  display:block;
}
.pricing-grid{
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}
.price-card{
  position:relative;
  padding:1.6rem;
  border-radius:28px;
}
.price-card.featured{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
  color:var(--white);
  border-color:transparent;
  box-shadow:var(--shadow-strong);
}
.featured-pill{
  display:inline-flex;
  padding:.5rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:var(--white);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.price-card h3{
  margin:1rem 0 .7rem;
  font-size:1.4rem;
  letter-spacing:-.04em;
}
.price{
  font-size:2.5rem;
  font-weight:800;
  letter-spacing:-.06em;
  margin-bottom:.35rem;
}
.price small{
  font-size:.95rem;
  letter-spacing:0;
}
.price-sub{
  margin:0 0 1rem;
  color:var(--muted);
}
.price-card.featured .price-sub,
.price-card.featured li{
  color:rgba(255,255,255,.78);
}
.price-card ul{
  margin:1rem 0 0;
  padding-left:1rem;
}
.price-card li{
  color:var(--muted);
  line-height:1.8;
}

.calc-grid{
  grid-template-columns:.9fr 1.1fr;
  gap:1.2rem;
  align-items:start;
}
.calculator-card,
.contact-card,
.legal-card{
  border-radius:30px;
  padding:1.4rem;
}
.calc-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}
.calc-form label,
.form-grid label{
  display:grid;
  gap:.45rem;
}
.calc-form span,
.form-grid span{
  font-size:.92rem;
  font-weight:700;
  color:var(--text);
}
.calc-form input,
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
  min-height:3.25rem;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  padding:0 1rem;
  outline:none;
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-grid textarea{
  padding:1rem;
  min-height:8rem;
  resize:vertical;
}
.calc-form input:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  border-color:rgba(24,63,147,.35);
  box-shadow:0 0 0 5px rgba(24,63,147,.08);
  background:var(--white);
}
.calc-results{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
  margin-top:1rem;
}
.calc-results div{
  padding:1rem;
  border-radius:20px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.calc-results span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  margin-bottom:.35rem;
}
.calc-results strong{
  display:block;
  font-size:1.45rem;
  letter-spacing:-.04em;
}

.faq-list{
  max-width:900px;
  margin:0 auto;
  display:grid;
  gap:1rem;
}
.faq-item{
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border:0;
  background:transparent;
  padding:1.2rem 1.25rem;
  color:var(--text);
  font-weight:700;
  text-align:left;
}
.faq-icon{
  display:inline-grid;
  place-items:center;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--line);
  flex:0 0 auto;
}
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--transition);
}
.faq-answer p{
  overflow:hidden;
  margin:0;
  padding:0 1.25rem;
  color:var(--muted);
  line-height:1.8;
}
.faq-item.open .faq-answer{
  grid-template-rows:1fr;
}
.faq-item.open .faq-answer p{
  padding:0 1.25rem 1.25rem;
}
.faq-item.open .faq-icon{
  background:var(--navy);
  color:var(--white);
}

.contact-grid{
  grid-template-columns:.86fr 1.14fr;
  gap:1.2rem;
  align-items:start;
}
.contact-copy h2{
  margin:1rem 0 .85rem;
  font-size:clamp(2rem,4vw,3.2rem);
  letter-spacing:-.04em;
}
.contact-copy p{
  color:var(--muted);
  line-height:1.8;
}
.contact-links{
  grid-template-columns:1fr;
  gap:.8rem;
  margin-top:1.5rem;
}
.contact-links a{
  color:var(--navy);
  font-weight:700;
}
.form-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}
.full-width{
  grid-column:1 / -1;
}
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1rem;
}
.form-note{
  margin:.9rem 0 0;
  color:var(--muted);
  line-height:1.6;
}
.form-note.success{
  color:#13633c;
}
.form-note.error{
  color:#a53333;
}

.case-study-grid{
  gap:1.2rem;
}
.case-study-card{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:0;
  overflow:hidden;
  border-radius:30px;
}
.detail-list{
  padding-left:1rem;
  margin:1rem 0 1.2rem;
}

.legal-card{
  background:var(--surface);
}
.legal-card h2{
  margin:0 0 .7rem;
  font-size:1.35rem;
  letter-spacing:-.03em;
}
.legal-card p{
  margin:0 0 1.5rem;
}

.site-footer{
  padding:1rem 0 2rem;
  border-top:1px solid rgba(8,24,60,.08);
}
.footer-grid{
  grid-template-columns:1.45fr 1fr 1fr 1fr;
  gap:1.2rem;
  padding:2rem 0 1rem;
}
.footer-brand p{
  color:var(--muted);
  line-height:1.8;
  max-width:28rem;
}
.footer-logo{
  width:min(240px, 100%);
  margin-bottom:1rem;
}
.site-footer h3{
  font-size:1rem;
  margin:0 0 .85rem;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.7rem;
}
.footer-links a{
  color:var(--muted);
}
.footer-links a:hover{
  color:var(--navy);
}
.footer-bottom{
  padding-top:1rem;
  border-top:1px solid rgba(8,24,60,.08);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  color:var(--muted);
}
.to-top{
  color:var(--navy);
  font-weight:700;
}

.reveal{
  opacity:1;
  transform:none;
  transition:opacity .7s ease, transform .7s ease;
}
.js-enabled .reveal{
  opacity:0;
  transform:translateY(20px);
}
.js-enabled .reveal.in-view{
  opacity:1;
  transform:none;
}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}

@keyframes growLine{
  to{transform:rotate(var(--rotation, 0deg)) scaleX(1)}
}
.line-one{--rotation:-11deg}
.line-two{--rotation:-20deg}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes floatDot{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media (max-width: 1080px){
  .hero-grid,
  .intro-grid,
  .calc-grid,
  .contact-grid,
  .case-study-card,
  .founder-card{
    grid-template-columns:1fr;
  }
  .hero-visual{
    min-height:31rem;
  }
  .service-grid,
  .pricing-grid,
  .project-grid,
  .process-grid,
  .footer-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .footer-grid{
    grid-template-columns:1.2fr 1fr 1fr;
  }
  .footer-grid > :first-child{
    grid-column:1 / -1;
  }
}

@media (max-width: 820px){
  .site-nav{
    position:fixed;
    left:1rem;
    right:1rem;
    top:5rem;
    display:grid;
    gap:.4rem;
    padding:.8rem;
    border-radius:24px;
    background:rgba(255,255,255,.96);
    border:1px solid var(--line);
    box-shadow:var(--shadow-strong);
    opacity:0;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity var(--transition), transform var(--transition);
  }
  .site-nav.open{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .site-nav a{
    padding:.9rem 1rem;
    border-radius:16px;
  }
  .site-nav a:hover{
    background:var(--surface-2);
  }
  .nav-toggle{
    display:block;
  }
  .hero-actions,
  .project-actions{
    grid-template-columns:1fr;
  }
  .hero-metrics,
  .service-grid,
  .pricing-grid,
  .project-grid,
  .process-grid,
  .calc-results,
  .footer-grid,
  .form-grid,
  .calc-form{
    grid-template-columns:1fr;
  }
  .project-tags{
    grid-template-columns:repeat(2, max-content);
  }
  .dashboard-top{
    grid-template-columns:repeat(2, max-content);
  }
  .dashboard-stats{
    grid-template-columns:1fr;
  }
  .hero-visual{
    min-height:28rem;
  }
  .tile-one{
    left:.5rem;
    bottom:2rem;
  }
  .tile-two{
    right:.5rem;
    top:1.4rem;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 560px){
  .header-inner{
    min-height:5rem;
  }
  .brand-logo{
    width:min(190px, 48vw);
  }
  .hero-section{
    padding:5.8rem 0 4rem;
  }
  .hero-copy h1{
    font-size:clamp(2.2rem, 10vw, 3.2rem);
  }
  .section,
  .page-hero{
    padding-left:0;
    padding-right:0;
  }
  .hero-visual{
    min-height:24rem;
  }
  .dashboard-card{
    inset:.8rem 0 2.6rem 0;
    padding:1rem;
  }
  .dashboard-graph{
    height:11rem;
  }
  .floating-tile{
    min-width:auto;
    max-width:10rem;
  }
  .founder-copy,
  .project-copy,
  .case-study-copy,
  .price-card,
  .calculator-card,
  .contact-card,
  .service-card{
    padding:1.2rem;
  }
  .project-tags{
    grid-template-columns:1fr;
  }
}


/* === 2026-03 visual and layout upgrade === */
:root{
  --bg:#f3f1ec;
  --surface:#ffffff;
  --surface-2:#eef3fb;
  --text:#0b1d4e;
  --muted:#52617d;
  --line:rgba(6,24,53,0.10);
  --line-strong:rgba(6,24,53,0.18);
  --navy:#061835;
  --navy-soft:#0d2758;
  --navy-deep:#041127;
  --blue:#173d92;
  --blue-soft:#e8eefb;
  --shadow:0 18px 45px rgba(6,24,53,0.09);
  --shadow-strong:0 24px 70px rgba(6,24,53,0.14);
}
body{
  background:
    radial-gradient(circle at 0% 0%, rgba(23,61,146,.05), transparent 24%),
    radial-gradient(circle at 100% 18%, rgba(6,24,53,.04), transparent 24%),
    var(--bg);
}
.container{width:min(calc(100% - 2.5rem), 1180px)}
.site-header{background:rgba(243,241,236,.86);backdrop-filter:blur(14px)}
.header-inner{min-height:4.6rem}
.brand-logo{width:min(200px, 38vw)}
.site-nav{gap:1rem}
.site-nav a{font-size:.97rem}
.nav-cta{padding:.82rem 1.05rem}
.hero-upgrade{
  padding:7rem 0 5rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 18%),
    radial-gradient(circle at 15% 100%, rgba(255,255,255,.04), transparent 28%),
    linear-gradient(180deg, #061835 0%, #071b3c 100%);
}
.hero-upgrade::after{display:none}
.hero-stack{text-align:center;max-width:860px}
.hero-stack .eyebrow{margin:0 auto}
.hero-stack .hero-lead{max-width:720px;margin:0 auto;color:rgba(255,255,255,.78)}
.hero-stack .hero-actions{justify-content:center}
.hero-metrics-slim{max-width:980px;margin:2rem auto 0}
.intro-upgrade{padding:4rem 0 0}
.intro-grid-upgrade{grid-template-columns:minmax(0,1fr) minmax(360px, 520px);gap:2rem;align-items:stretch}
.intro-copy,.founder-card-upgrade{min-width:0}
.founder-card-upgrade{grid-template-columns:minmax(0,1fr);min-height:unset}
.founder-photo-wrap{min-height:360px;background:linear-gradient(180deg, #dfe7f7, #f7f4ee);overflow:hidden}
.founder-photo{width:100%;height:100%;object-fit:cover;object-position:center top}
.founder-copy{padding:1.9rem 2rem 2rem}
.founder-copy p{max-width:30rem}
.founder-highlights{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.founder-highlights span{padding:.62rem .92rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--navy);font-weight:700;font-size:.9rem}
.work-section{background:linear-gradient(180deg, rgba(6,24,53,.02), rgba(6,24,53,.05))}
.project-grid-upgrade{gap:1.5rem}
.project-card,.case-study-card{background:var(--surface)}
.project-visual-live,.case-study-live{min-height:0;padding:1rem 1rem 0;background:linear-gradient(180deg, rgba(8,21,54,.04), rgba(8,21,54,.08))}
.project-preview-link{display:block;border-radius:22px;overflow:hidden;border:1px solid rgba(6,24,53,.10);background:#dbe4f5;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.project-shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;background:linear-gradient(180deg, #dfe7f8, #edf1f8)}
.case-shot{aspect-ratio:16/9.2}
.browser-bar{padding:0 .05rem;margin-bottom:.9rem}
.browser-bar span{background:rgba(6,24,53,.26)}
.project-copy,.case-study-copy{padding:1.45rem 1.45rem 1.5rem}
.project-copy h3,.case-study-copy h2{color:var(--navy)}
.project-tags{grid-template-columns:repeat(3, max-content)}
.page-hero-upgrade{padding:6rem 0 2.5rem;background:linear-gradient(180deg, #061835 0%, #071b3c 100%)}
.case-study-grid-upgrade{gap:1.4rem}
.case-study-grid-upgrade .case-study-card{grid-template-columns:1.08fr .92fr;align-items:stretch}
.case-study-grid-upgrade .case-study-visual{padding:1rem}
@media (max-width: 1180px){
  .intro-grid-upgrade,.case-study-grid-upgrade .case-study-card{grid-template-columns:1fr}
}
@media (max-width: 1080px){.header-inner{min-height:4.4rem}}
@media (max-width: 820px){
  .site-nav{top:4.7rem}
  .hero-upgrade{padding:6.2rem 0 4rem}
  .hero-stack .hero-actions{justify-content:stretch}
  .hero-metrics-slim{grid-template-columns:1fr}
  .intro-grid-upgrade{grid-template-columns:1fr}
  .founder-photo-wrap{min-height:300px}
}
@media (max-width: 560px){
  .container{width:min(calc(100% - 1.2rem), 1180px)}
  .header-inner{min-height:4rem}
  .brand-logo{width:min(170px, 42vw)}
  .hero-upgrade{padding:5.7rem 0 3.6rem}
  .founder-photo-wrap{min-height:250px}
  .project-visual-live,.case-study-live{padding:.85rem .85rem 0}
}


/* === 2026-03-20 polish fixes === */
:root{
  --bg:#f6f4ef;
  --surface:#ffffff;
  --surface-2:#eef3fb;
  --text:#001b44;
  --muted:#53617a;
  --line:rgba(0,24,56,0.10);
  --line-strong:rgba(0,24,56,0.18);
  --navy:#001830;
  --navy-soft:#032351;
  --navy-deep:#000f24;
  --blue:#123b86;
  --blue-soft:#edf2fb;
  --shadow:0 14px 34px rgba(0,24,56,0.08);
  --shadow-strong:0 24px 60px rgba(0,24,56,0.12);
}
body{
  background:
    radial-gradient(circle at 0% 0%, rgba(18,59,134,.045), transparent 24%),
    radial-gradient(circle at 100% 18%, rgba(0,24,56,.035), transparent 22%),
    var(--bg);
}
.brand{
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.site-header{
  background:rgba(246,244,239,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,24,56,.08);
}
.header-inner{
  min-height:3.55rem;
  gap:.8rem;
}
.brand-logo{
  width:auto;
  height:2rem;
  max-width:min(198px, 40vw);
  display:block;
}
.site-nav{
  gap:.95rem;
}
.site-nav a{
  font-size:.93rem;
}
.nav-cta{
  padding:.68rem .92rem;
  font-size:.92rem;
  box-shadow:0 12px 26px rgba(0,24,56,.12);
}
.hero-upgrade{
  padding:6rem 0 4.4rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at 18% 100%, rgba(255,255,255,.04), transparent 25%),
    linear-gradient(180deg, #001830 0%, #001f44 100%);
}
.hero-stack{
  max-width:900px;
}
.hero-stack .hero-lead{
  color:rgba(255,255,255,.82);
}
.metric-card{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
.metric-card strong,
.metric-card .metric-label{
  color:#fff;
}
.metric-card small{
  color:rgba(255,255,255,.72);
}
.intro-upgrade{
  padding:3.4rem 0 0;
}
.founder-card-upgrade{
  border-radius:28px;
  overflow:hidden;
}
.founder-photo-wrap{
  min-height:400px;
  background:linear-gradient(180deg, #edf2fb, #f6f4ef);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:1.1rem;
}
.founder-photo{
  width:84%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  display:block;
}
.founder-copy{
  padding:1.8rem 1.9rem 2rem;
}
.founder-copy h3{
  margin-bottom:.8rem;
}
.founder-copy p + p{
  margin-top:.9rem;
}
.founder-highlights span{
  background:#f3f6fc;
  border-color:rgba(0,24,56,.10);
  color:var(--navy);
}
.project-visual-live,
.case-study-live{
  background:linear-gradient(180deg, rgba(0,24,56,.035), rgba(0,24,56,.075));
}
.project-preview-link{
  border-radius:20px;
  background:#e8eef8;
  border:1px solid rgba(0,24,56,.10);
}
.project-copy,
.case-study-copy{
  padding:1.38rem 1.38rem 1.45rem;
}
.faq-item{
  border-radius:20px;
  box-shadow:none;
  border:1px solid rgba(0,24,56,.12);
}
.faq-question{
  padding:1.1rem 1.2rem;
}
.faq-answer p{
  line-height:1.7;
  padding:0 1.2rem;
}
.faq-item.open .faq-answer p{
  padding:0 1.2rem 1.1rem;
}
.faq-icon{
  width:2.1rem;
  height:2.1rem;
  background:#f2f5fb;
  border-color:rgba(0,24,56,.10);
}
.footer-logo{
  height:2rem;
  width:auto;
}
@media (max-width: 1080px){
  .header-inner{
    min-height:3.4rem;
  }
  .brand-logo{
    height:1.9rem;
  }
  .site-nav{
    gap:.85rem;
  }
}
@media (max-width: 820px){
  .site-nav{
    top:3.9rem;
  }
  .hero-upgrade{
    padding:5.4rem 0 3.7rem;
  }
  .founder-photo-wrap{
    min-height:360px;
  }
}
@media (max-width: 560px){
  .header-inner{
    min-height:3.2rem;
  }
  .brand-logo{
    height:1.72rem;
    max-width:58vw;
  }
  .hero-upgrade{
    padding:4.95rem 0 3.3rem;
  }
  .founder-photo-wrap{
    min-height:300px;
  }
}


.portfolio-note{
  max-width:760px;
  margin:1.2rem auto 0;
  text-align:center;
  color:var(--muted);
  font-size:.96rem;
}


/* === 2026-03-20 final official polish === */
.header-inner{min-height:3.2rem}
.brand-logo{height:1.7rem;max-width:min(176px,34vw)}
.site-nav a{font-size:.9rem}
.nav-cta{padding:.58rem .9rem;border-radius:999px}
.intro-grid-upgrade{grid-template-columns:minmax(0,1fr) minmax(320px, 430px);gap:1.7rem;align-items:start}
.intro-copy p{max-width:44rem}
.intro-pills{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.2rem}
.intro-pills span{display:inline-flex;align-items:center;padding:.68rem .95rem;border-radius:999px;background:#f2f5fb;border:1px solid rgba(0,24,56,.09);color:var(--navy);font-weight:700;font-size:.9rem;box-shadow:0 8px 22px rgba(0,24,56,.05)}
.founder-card-upgrade{max-width:430px;justify-self:end}
.founder-photo-wrap{min-height:340px;padding-top:1rem}
.founder-photo{width:68%;max-height:360px;height:auto;object-fit:contain;object-position:center top}
.founder-copy{padding:1.35rem 1.45rem 1.55rem}
.founder-copy p{font-size:.98rem;line-height:1.72}
.founder-highlights span{font-size:.84rem;padding:.56rem .78rem}
@media (max-width: 1080px){
  .header-inner{min-height:3.05rem}
  .brand-logo{height:1.6rem;max-width:min(168px,34vw)}
}
@media (max-width: 820px){
  .site-nav{top:3.55rem}
  .intro-grid-upgrade{grid-template-columns:1fr}
  .founder-card-upgrade{max-width:420px;justify-self:center}
}
@media (max-width: 560px){
  .header-inner{min-height:2.95rem}
  .brand-logo{height:1.52rem;max-width:54vw}
  .nav-cta{padding:.54rem .84rem}
  .founder-photo-wrap{min-height:280px}
  .founder-photo{width:64%;max-height:300px}
  .intro-pills span{font-size:.84rem;padding:.6rem .82rem}
}


/* 2026-04 portfolio order + 3-card homepage work grid */
.project-grid.project-grid-upgrade{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
}
@media (max-width: 1180px){
  .project-grid.project-grid-upgrade{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px){
  .project-grid.project-grid-upgrade{
    grid-template-columns:1fr;
  }
}


/* 2026-04 planner upgrade */
.planner-grid{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  gap:1.2rem;
  align-items:start;
}
.planner-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  padding:1.4rem;
}
.planner-form{
  display:grid;
  gap:1rem;
}
.planner-form label,
.planner-form select{
  width:100%;
}
.planner-form span{
  display:block;
  margin-bottom:.45rem;
  font-size:.92rem;
  font-weight:700;
  color:var(--text);
}
.planner-form select{
  min-height:3.2rem;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  padding:0 1rem;
  outline:none;
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.planner-form select:focus{
  border-color:rgba(24,63,147,.35);
  box-shadow:0 0 0 5px rgba(24,63,147,.08);
  background:var(--white);
}
.planner-output-top h3{
  margin:.8rem 0 .6rem;
  font-size:clamp(1.7rem, 3vw, 2.35rem);
  line-height:1.02;
  letter-spacing:-.04em;
}
.planner-output-top p,
.planner-list li{
  color:var(--muted);
  line-height:1.8;
}
.planner-signals{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.8rem;
  margin:1.15rem 0;
}
.planner-signals div{
  padding:1rem;
  border-radius:20px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.planner-signals span{
  display:block;
  color:var(--muted);
  font-size:.84rem;
  margin-bottom:.35rem;
}
.planner-signals strong{
  display:block;
  font-size:1rem;
  line-height:1.45;
}
.planner-list{
  display:grid;
  gap:.65rem;
  margin:0;
  padding-left:1.05rem;
}
.planner-stack{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.15rem;
}
.planner-stack span{
  display:inline-flex;
  align-items:center;
  padding:.62rem .88rem;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--muted);
  font-weight:700;
}
.planner-stack span.active{
  background:var(--navy);
  color:var(--white);
  border-color:transparent;
  box-shadow:var(--shadow);
}
.planner-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.2rem;
}
@media (max-width: 1080px){
  .planner-grid{grid-template-columns:1fr;}
}
@media (max-width: 820px){
  .planner-signals{grid-template-columns:1fr;}
}


/* === email form and recurring billing update === */
.hp-field{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important;opacity:0 !important;pointer-events:none !important}
.form-note.success{color:#17633b}
.form-note.error{color:#9e2f2f}
.contact-links.compact{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:1.1rem}
.contact-links.compact a{color:var(--navy);font-weight:700}
.billing-preview-card,.recurring-card{background:var(--surface);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow)}
.billing-preview-card{padding:1.6rem;text-align:left}
.billing-preview-card p,.recurring-card p,.recurring-card li,.payment-note{color:var(--muted);line-height:1.75}
.recurring-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.recurring-card{padding:1.45rem}
.recurring-card ul{margin:1rem 0 1.1rem;padding-left:1rem}
.recurring-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.payment-button[hidden]{display:none !important}
.payment-note{margin-top:.75rem;font-size:.92rem}
.payment-badge{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;padding:.55rem .82rem;border-radius:999px;font-size:.77rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:var(--blue-soft);color:var(--navy);border:1px solid rgba(24,63,147,.12)}
.service-jump{scroll-margin-top:6rem}
@media (max-width: 820px){.recurring-grid{grid-template-columns:1fr}}


/* === 2026-04 polish refresh === */
:root{
  --bg:#f5f4ef;
  --surface:#ffffff;
  --surface-2:#edf3fc;
  --text:#021a42;
  --muted:#5a6983;
  --navy:#001b44;
  --navy-soft:#0d2f72;
  --blue:#1f56c7;
  --line:rgba(0,27,68,.10);
  --shadow:0 18px 48px rgba(0,24,56,.10);
  --shadow-strong:0 28px 70px rgba(0,24,56,.14);
}
body{
  background:
    radial-gradient(circle at 0% 0%, rgba(31,86,199,.04), transparent 24%),
    radial-gradient(circle at 100% 16%, rgba(0,27,68,.03), transparent 24%),
    linear-gradient(180deg, #f7f5ef 0%, #f4f3ee 100%);
}
.hero-upgrade{background:linear-gradient(180deg,#001b44 0%,#06265a 100%)}
.hero-stack .hero-actions{justify-content:center}
.btn{font-weight:800}
.btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy-soft));color:#fff;box-shadow:0 16px 34px rgba(0,27,68,.16)}
.btn-primary:hover,.btn-primary:focus-visible{box-shadow:0 22px 42px rgba(0,27,68,.20)}
.btn-secondary{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff}
.btn-solid{background:var(--surface);color:var(--navy);border:1px solid rgba(0,27,68,.10);box-shadow:var(--shadow)}
.section-cta .btn-secondary,.billing-actions .btn-solid{background:var(--navy);color:#fff;border-color:transparent;box-shadow:0 16px 34px rgba(0,27,68,.14)}
.project-card,.case-study-card,.booking-card,.recurring-card,.contact-email-card,.planner-card,.billing-preview-card{transition:transform .22s ease, box-shadow .22s ease,border-color .22s ease}
.project-card:hover,.case-study-card:hover,.booking-card:hover,.recurring-card:hover,.contact-email-card:hover,.planner-card:hover,.billing-preview-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-strong);border-color:rgba(0,27,68,.14)}
.project-preview-link{background:#eef2f8}
.project-shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.case-shot{aspect-ratio:16/9.2}
.project-preview-fallback{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#090909,#181818 45%,#3d0d0d 100%)}
.case-preview-fallback{aspect-ratio:16/9.2}
.preview-topbar{position:absolute;inset:0 0 auto 0;height:42px;display:flex;gap:8px;align-items:center;padding:0 16px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.05)}
.preview-topbar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55)}
.preview-frame{position:absolute;inset:56px 18px 18px;border-radius:18px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10)}
.preview-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff;font-size:13px}
.preview-nav-pills{display:flex;gap:6px}.preview-nav-pills i{display:block;width:28px;height:8px;border-radius:999px;background:rgba(255,255,255,.18)}
.preview-hero-text{width:58%;height:18px;border-radius:999px;background:rgba(255,255,255,.84);margin-top:22px}.preview-hero-sub{width:80%;height:10px;border-radius:999px;background:rgba(255,255,255,.32);margin-top:12px}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.preview-grid em{display:block;height:70px;border-radius:16px;background:rgba(255,255,255,.08)}
.preview-actions{display:flex;gap:12px;margin-top:18px}.preview-actions u{display:block;width:120px;height:38px;border-radius:999px;background:linear-gradient(135deg,#fff,#e7edf8)}
.billing-preview-upgrade{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:2rem}
.billing-copy h2{margin:.9rem 0 .8rem;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.05;letter-spacing:-.04em;color:var(--navy)}
.billing-copy p{margin:0;max-width:42rem;color:var(--muted);line-height:1.8}
.billing-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:flex-end}
.contact-upgrade-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:1.4rem;align-items:start}
.contact-points{display:grid;gap:.95rem;margin-top:1.4rem}
.contact-points div{padding:1rem 1.1rem;border-radius:20px;background:rgba(255,255,255,.70);border:1px solid rgba(0,27,68,.08);box-shadow:0 10px 24px rgba(0,27,68,.06)}
.contact-points strong{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.35rem}
.contact-points a,.contact-points span{color:var(--navy);font-weight:700}
.contact-email-card{padding:1.65rem;border-radius:30px;background:rgba(255,255,255,.96)}
.contact-card-head h3{margin:.85rem 0 .55rem;font-size:1.8rem;letter-spacing:-.04em;color:var(--navy)}
.contact-card-head p{margin:0 0 1rem;color:var(--muted);line-height:1.7}
.form-grid-upgrade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.form-grid-upgrade label{display:grid;gap:.45rem}
.form-grid-upgrade span{font-size:.92rem;font-weight:700;color:var(--text)}
.contact-email-card input,.contact-email-card select,.contact-email-card textarea{width:100%;min-height:3.25rem;border-radius:16px;border:1px solid rgba(0,27,68,.10);background:var(--surface-2);color:var(--text);padding:0 1rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.contact-email-card textarea{padding:1rem;min-height:8.5rem;resize:vertical}
.contact-email-card input:focus,.contact-email-card select:focus,.contact-email-card textarea:focus{border-color:rgba(31,86,199,.34);box-shadow:0 0 0 5px rgba(31,86,199,.08);background:#fff}
.form-actions-upgrade{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.15rem}
.form-note{min-height:1.5rem}
.booking-stack .section-head{margin-bottom:1.7rem}
.booking-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.booking-card{padding:1.45rem;border-radius:30px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.booking-card h3{margin:1rem 0 .65rem;font-size:1.45rem;letter-spacing:-.03em;color:var(--navy)}
.booking-card p,.booking-sub{color:var(--muted);line-height:1.75}
.booking-price{margin-top:1rem;font-size:2rem;font-weight:800;letter-spacing:-.05em;color:var(--navy)}
.booking-price small{font-size:.95rem;color:var(--muted);font-weight:700}
.booking-sub{margin-top:.15rem;font-weight:600}
.booking-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.billing-section-upgrade{background:linear-gradient(180deg,rgba(0,27,68,.025),rgba(0,27,68,.055))}
.recurring-grid-upgrade{margin-top:.4rem}
.recurring-card h3{margin:.95rem 0 .45rem;font-size:1.7rem;letter-spacing:-.04em;color:var(--navy)}
.payment-note{color:var(--muted);font-size:.92rem}
.contact-links.compact a{font-weight:700}
.planner-card{background:rgba(255,255,255,.96)}
.planner-form select{background:#f1f5fc;border:1px solid rgba(0,27,68,.10)}
.planner-form select:focus{background:#fff}
.planner-output-top h3{color:var(--navy)}
.planner-stack span.active{background:var(--navy-soft)}
.site-footer{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.12))}
.footer-bottom,.site-footer p,.footer-links a{color:#4c5e7d}
.footer-links a:hover{color:var(--navy)}
.site-header{background:rgba(246,244,239,.92)}
.site-nav a{color:#4a5a79}.site-nav a:hover,.site-nav a:focus-visible{color:var(--navy)}
@media (max-width:1080px){.booking-grid,.recurring-grid-upgrade{grid-template-columns:1fr 1fr}.contact-upgrade-grid,.billing-preview-upgrade{grid-template-columns:1fr;display:grid}.billing-actions{justify-content:flex-start}}
@media (max-width:820px){.booking-grid,.recurring-grid-upgrade,.form-grid-upgrade{grid-template-columns:1fr}.contact-upgrade-grid{grid-template-columns:1fr}.billing-preview-upgrade{padding:1.4rem}.form-actions-upgrade,.booking-actions{flex-direction:column}.form-actions-upgrade .btn,.booking-actions .btn,.billing-actions .btn{width:100%}.site-nav{background:rgba(255,255,255,.98)}}


/* === 2026-04-11 liquid glass polish === */
:root{
  --glass-white:rgba(255,255,255,.62);
  --glass-heavy:rgba(255,255,255,.76);
  --glass-line:rgba(255,255,255,.54);
  --glass-shadow:0 26px 80px rgba(0,27,68,.14);
  --glass-shadow-soft:0 18px 48px rgba(0,27,68,.10);
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:auto;
  width:34rem;
  height:34rem;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  filter:blur(10px);
}
body::before{
  top:-8rem;
  left:-10rem;
  background:radial-gradient(circle, rgba(68,130,255,.12), transparent 60%);
}
body::after{
  right:-12rem;
  bottom:-12rem;
  background:radial-gradient(circle, rgba(180,214,255,.22), transparent 62%);
}
.site-header{
  background:rgba(247,245,239,.68);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.65);
  box-shadow:0 10px 34px rgba(0,27,68,.05);
}
.hero-upgrade{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.14), transparent 18%),
    radial-gradient(circle at 82% 0%, rgba(180,214,255,.24), transparent 24%),
    linear-gradient(180deg,#001b44 0%,#0b2c67 58%,#163f8a 100%);
}
.hero-upgrade::before,
.hero-upgrade::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hero-upgrade::before{
  width:20rem;height:20rem;right:-5rem;top:4rem;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
}
.hero-upgrade::after{
  width:14rem;height:14rem;left:-2rem;bottom:-3rem;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
}
.metric-card,
.project-card,
.case-study-card,
.booking-card,
.recurring-card,
.contact-email-card,
.planner-card,
.billing-preview-card,
.contact-points div,
.service-card,
.price-card,
.process-step,
.faq-item{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.63));
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid rgba(255,255,255,.76);
  box-shadow:var(--glass-shadow-soft), inset 0 1px 0 rgba(255,255,255,.72);
}
.metric-card{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.22);
  box-shadow:0 24px 55px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.25);
}
.metric-card .metric-label,
.metric-card strong,
.metric-card small{color:#fff}
.intro-pills,
.hero-glass-pops{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.intro-pills span{
  padding:.72rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 12px 24px rgba(0,27,68,.08);
  color:var(--navy);
  font-weight:800;
}
.project-visual-live,
.case-study-live{
  position:relative;
  padding:1rem 1rem 0;
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(232,239,250,.76));
}
.project-preview-link{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,#eef2fb,#dae6f7);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
}
.project-preview-link::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.34), transparent 38%, transparent 62%, rgba(255,255,255,.18));
  pointer-events:none;
}
.project-shot,
.case-shot,
.project-shot-atk{
  width:100%;
  aspect-ratio:16/10;
  object-fit:contain;
  object-position:center top;
  padding:.35rem .45rem 0;
  background:linear-gradient(180deg,#f6f8fd,#e6edf8);
}
.case-shot{aspect-ratio:16/9.2}
.project-shot-atk{background:linear-gradient(180deg,#f2f5fb,#dfe7f5)}
.project-card:hover .project-preview-link,
.case-study-card:hover .project-preview-link{transform:translateY(-2px)}
.project-copy,
.case-study-copy{padding:1.55rem}
.project-copy h3,
.case-study-copy h2,
.booking-card h3,
.recurring-card h3,
.contact-card-head h3{color:#001b44}
.project-tags span,
.founder-highlights span{
  background:rgba(236,242,251,.92);
  border:1px solid rgba(184,201,235,.85);
  color:#24497f;
}
.portfolio-cta-btn,
.section-cta .btn-secondary{
  background:linear-gradient(135deg,#001b44,#184c9d) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 18px 42px rgba(0,27,68,.18) !important;
}
.portfolio-cta-btn:hover{box-shadow:0 24px 46px rgba(0,27,68,.22)!important}
.booking-card,
.recurring-card,
.billing-preview-card{border-radius:32px}
.booking-card .card-badge,
.recurring-card .payment-badge,
.contact-card-head .mini-label,
.contact-copy .section-kicker{
  box-shadow:0 10px 22px rgba(31,86,199,.08);
}
.booking-actions,
.recurring-actions,
.project-actions,
.form-actions-upgrade{gap:.75rem}
.contact-upgrade{
  position:relative;
  overflow:hidden;
}
.contact-upgrade::before{
  content:"";
  position:absolute;
  width:28rem;
  height:28rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(31,86,199,.09), transparent 64%);
  right:-10rem;
  top:2rem;
  pointer-events:none;
}
.contact-copy{
  position:relative;
  z-index:1;
}
.contact-email-card{
  position:relative;
  overflow:hidden;
  padding:1.85rem;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.88);
}
.contact-email-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.14));
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
  border-radius:inherit;
  pointer-events:none;
}
.contact-card-head p{max-width:38rem}
.contact-email-card input,
.contact-email-card select,
.contact-email-card textarea{
  background:linear-gradient(180deg, rgba(239,244,252,.92), rgba(232,239,249,.88));
  border:1px solid rgba(170,191,229,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}
.contact-email-card textarea{min-height:10rem}
.contact-email-card input::placeholder,
.contact-email-card textarea::placeholder{color:#7384a2}
.contact-points{grid-template-columns:repeat(3,minmax(0,1fr));display:grid;gap:.9rem}
.contact-points div{
  min-height:7rem;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.contact-points strong{color:#6d7e9d}
.contact-points a,
.contact-points span{line-height:1.55}
.form-actions-upgrade .btn{min-width:13rem}
.form-note{font-weight:600}
.form-note.success{color:#13633c}
.form-note.error{color:#b53a3a}
.billing-preview-upgrade{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(242,246,252,.74));
}
.billing-preview-upgrade::after{
  content:"";
  position:absolute;
  width:14rem;height:14rem;border-radius:50%;right:-3rem;bottom:-4rem;
  background:radial-gradient(circle, rgba(31,86,199,.12), transparent 66%);
}
.recurring-card.is-selected{
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(31,86,199,.32);
  box-shadow:0 26px 72px rgba(0,27,68,.18), 0 0 0 6px rgba(31,86,199,.08), inset 0 1px 0 rgba(255,255,255,.86);
}
.payment-note{min-height:1.4rem}
.planner-card,
.recurring-card,
.booking-card,
.billing-preview-card{
  position:relative;
  overflow:hidden;
}
.planner-card::before,
.recurring-card::before,
.booking-card::before,
.billing-preview-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.20), transparent 38%, transparent 70%, rgba(31,86,199,.05));
  pointer-events:none;
}
.site-footer{
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.footer-grid{gap:1.35rem}
.footer-links a,
.site-footer p,
.footer-bottom{color:#50627f}
.footer-links a:hover{color:#001b44}
@media (max-width:1080px){
  .contact-points{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .contact-points{grid-template-columns:1fr}
  .project-shot,
  .case-shot,
  .project-shot-atk{object-fit:cover;padding:0}
}


/* === 2026-04-11 preview + contact overflow fixes === */
.project-grid-upgrade{gap:1.6rem;align-items:stretch}
.project-card,.case-study-card{display:flex;flex-direction:column}
.project-visual-live,.case-study-live{
  padding:1rem;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.75), transparent 18%),
    linear-gradient(180deg, rgba(246,249,255,.96), rgba(232,239,250,.92));
}
.project-visual-live .browser-bar,
.case-study-live .browser-bar{display:none}
.project-preview-link{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#f3f6fb;
  border:1px solid rgba(196,210,236,.92);
  box-shadow:
    0 18px 38px rgba(0,27,68,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.project-preview-link::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.28), transparent 32%, transparent 70%, rgba(255,255,255,.12));
  z-index:2;
}
.project-preview-link::after{display:none}
.project-shot,
.case-shot,
.project-shot-atk{
  display:block;
  width:100%;
  aspect-ratio:16/9.25;
  object-fit:cover;
  object-position:center top;
  padding:0;
  background:#eef3fb;
}
.project-shot-atk{object-position:center 12%;filter:brightness(1.04) contrast(1.04) saturate(1.05)}
.project-copy,.case-study-copy{display:flex;flex-direction:column;gap:.95rem;flex:1}
.project-copy p,.case-study-copy p{flex:1}
.project-actions{margin-top:auto}
.contact-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:.95rem}
.contact-points div{
  min-width:0;
  padding:1.1rem 1rem;
  border-radius:24px;
}
.contact-points strong{
  display:block;
  margin-bottom:.45rem;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.contact-points a,
.contact-points span{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  color:#001b44;
  font-weight:700;
  line-height:1.45;
}
.contact-email-card{
  border-radius:36px;
  box-shadow:0 28px 80px rgba(0,27,68,.12), inset 0 1px 0 rgba(255,255,255,.92);
}
.contact-card-head h3{font-size:clamp(1.7rem,2.6vw,2.4rem);margin:.5rem 0 .65rem}
.contact-card-head p{font-size:1rem;line-height:1.75;color:#53617a}
.contact-email-card input,
.contact-email-card select,
.contact-email-card textarea{
  border-radius:18px;
  min-height:3.5rem;
  padding:0 1rem;
  font-size:1rem;
}
.contact-email-card textarea{padding:1rem;min-height:11rem}
.form-actions-upgrade .btn{min-width:0}
.portfolio-cta-btn,
.section-cta .btn-secondary{opacity:1 !important;filter:none !important}
@media (max-width: 820px){
  .project-shot,.case-shot,.project-shot-atk{aspect-ratio:16/10;object-fit:cover;object-position:center top}
  .contact-points{grid-template-columns:1fr}
}


/* === 2026-04-11 local preview + email compose fix === */
.project-visual-live,
.case-study-live{
  padding:.7rem;
  background:linear-gradient(180deg, rgba(244,247,253,.95), rgba(233,239,248,.9));
}
.project-preview-link{
  border-radius:24px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(195,209,233,.92);
  box-shadow:0 18px 40px rgba(0,27,68,.08), inset 0 1px 0 rgba(255,255,255,.94);
}
.project-preview-link::before,
.project-preview-link::after{display:none !important}
.project-shot,
.case-shot,
.project-shot-atk{
  width:100%;
  display:block;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center top;
  background:#f6f8fd;
  padding:0;
}
.project-shot-atk{object-position:center center;filter:none}
.contact-points div{min-width:0;overflow:hidden}
.contact-points a,
.contact-points span{overflow-wrap:anywhere;word-break:break-word}
.form-actions-upgrade .btn{min-width:0}


/* === static preview + email polish fix === */
.project-visual,
.case-study-visual,
.project-visual-live,
.case-study-live {
  min-height: 0;
  padding: 1.15rem 1.15rem 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(233,239,248,.92));
}
.project-preview-link {
  display: block;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(186,199,225,.75);
  background: #f4f7fc;
  box-shadow: 0 12px 28px rgba(6,24,53,.08);
  transform: none !important;
}
.project-preview-link::before,
.project-preview-link::after,
.browser-bar { display: none !important; }
.project-shot,
.case-shot,
.project-shot-static {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #eef2f8;
}
.project-copy,
.case-study-copy { padding-top: 1.1rem; }
.contact-card-head p,
.form-note,
.payment-note { max-width: none; }
.contact-points div span,
.contact-points div a,
.contact-points div strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.recurring-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.payment-note, .billing-select, .payment-button { display: none !important; }
@media (max-width: 820px) {
  .project-visual,
  .case-study-visual,
  .project-visual-live,
  .case-study-live { padding: .9rem .9rem 0; }
}


/* === v6 static portfolio + mail fix === */
.project-visual,
.case-study-visual,
.project-visual-live,
.case-study-live {
  padding: 1rem 1rem 0;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(236,241,248,.95));
}
.project-preview-link {
  border: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
}
.project-shot-static,
.case-shot.project-shot-static {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
  border-radius: 20px;
  border: 1px solid rgba(180,193,221,.65);
  box-shadow: 0 12px 28px rgba(6,24,53,.10);
  background: #eef3fb;
}
.project-card .card-badge,
.case-study-card .card-badge {
  background: rgba(16, 48, 112, .08);
}
.form-note.success { color: #2f5f9f; }
.form-note.error { color: #b33535; }
@media (max-width: 820px) {
  .project-shot-static,
  .case-shot.project-shot-static { aspect-ratio: 16 / 10; }
}


/* === v6.1 static card image fit === */
.project-shot-static,
.case-shot.project-shot-static {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center center;
  background: #eef3fb;
}
.project-preview-link { padding: 0; }


/* === v7 plain screenshot portfolio cards === */
.project-visual, .case-study-visual, .project-visual-live, .case-study-live { padding: 1rem 1rem 0; background: transparent; }
.project-preview-link { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 18px !important; overflow: hidden; }
.project-shot-static, .case-shot.project-shot-static { aspect-ratio: 16 / 9 !important; object-fit: cover !important; object-position: center top !important; border-radius: 18px !important; border: 1px solid rgba(180,193,221,.65) !important; box-shadow: 0 14px 30px rgba(6,24,53,.10) !important; background: #eef3fb !important; }
.project-copy, .case-study-copy { padding-top: 1.15rem; }
@media (max-width: 820px) { .project-visual, .case-study-visual, .project-visual-live, .case-study-live { padding: .9rem .9rem 0; } .project-shot-static, .case-shot.project-shot-static { aspect-ratio: 16 / 10 !important; } }


/* === remove portfolio previews cleanly === */
.project-card-no-preview .project-copy, .case-study-no-preview .case-study-copy{padding:1.65rem 1.6rem 1.6rem;}
.project-card-no-preview .project-copy h3, .case-study-no-preview .case-study-copy h2{margin-top:.15rem;}
.case-study-no-preview{grid-template-columns:1fr !important;}
.project-card-no-preview, .case-study-no-preview{min-height:100%;}
.project-card-no-preview .project-actions, .case-study-no-preview .project-actions{margin-top:1.2rem;}
@media (max-width:820px){.project-card-no-preview .project-copy, .case-study-no-preview .case-study-copy{padding:1.35rem;}}