/* ==========================================================================
   UNIEK WEBDESIGN · page components
   Brings the section markup the inner pages already use into the same grid,
   spacing and colour language as the homepage. Loads after uw-studio.css.
   ========================================================================== */

/* ---------- 1. Shell ------------------------------------------------------ */

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}
.section{padding-block:var(--sec);position:relative;}
.section.gray,.section-gray{background:var(--bg);}
.page-loader,.scroll-progress,.loader-logo,.loader-bar,.loader-fill{display:none!important;}

/* ---------- 2. Type ------------------------------------------------------- */

.section-label{
  display:block;background:none;border:0;padding:0;border-radius:0;
  font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin-bottom:var(--s2);
}
.section-label::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;
  margin-right:10px;vertical-align:middle;
  box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent);
}
.section-title{font-size:var(--t-d1);line-height:1.12;letter-spacing:-.03em;font-weight:700;
  color:var(--navy);margin:0 0 var(--s3);}
.blue-text{color:var(--blue);}
/* Gradient text is one of the tells the brief asks to lose. */
.gradient-text{
  background:none!important;-webkit-text-fill-color:currentColor!important;
  color:var(--blue)!important;
}

/* ---------- 3. Page hero -------------------------------------------------- */

.page-hero,.about-hero,.port-hero,.blog-hero{
  position:relative;background:var(--white);color:var(--text);overflow:hidden;
  padding-top:calc(78px + var(--s6));padding-bottom:var(--s7);text-align:left;
}
/* A soft blue wash, matching the homepage hero. */
.page-hero::after,.about-hero::after,.port-hero::after,.blog-hero::after{
  content:'';position:absolute;inset:-40% -15% auto;height:150%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 44% at 20% 28%,rgba(37,99,235,.14),transparent 64%),
             radial-gradient(32% 38% at 86% 18%,rgba(96,165,250,.18),transparent 66%);
  filter:blur(40px);
}
.page-hero>*,.about-hero>*,.port-hero>*,.blog-hero>*{position:relative;z-index:1;}
.page-hero h1,.about-hero h1,.port-hero h1,.blog-hero-title{color:var(--navy);}
.page-hero p,.port-hero p,.blog-hero-sub,.about-hero-text>p{color:var(--text-2);}
.about-chip{background:var(--white);border-color:var(--border);color:var(--text-2);}
.port-status{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.port-status-dot{background:var(--green);}
/* The hero already carries its own bottom space; the next section should not
   stack a second full section pad on top of it. */
.page-hero + .section,.page-hero + .service-block,
.about-hero + .section,.port-hero + .section,.blog-hero + .section{padding-top:var(--s5);}
/* Sizes only. Colour is set by the dark-hero block above. */
.page-hero h1{
  font-size:var(--t-d1);line-height:1.1;letter-spacing:-.034em;font-weight:700;
  margin:0 0 var(--s3);max-width:20ch;
}
.page-hero p{font-size:var(--t-lead);line-height:1.75;max-width:60ch;margin:0 0 var(--s4);}

/* ---------- 4. Buttons ---------------------------------------------------- */

.btn,.btn-next,.btn-prev,.plan-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding-inline:28px;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--font);font-size:var(--t-sm);font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;box-shadow:none;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn svg,.btn-next svg{flex:none;transition:transform .25s var(--ease);}
.btn:hover svg,.btn-next:hover svg{transform:translateX(3px);}
.btn:hover,.btn-next:hover,.btn-prev:hover,.plan-cta:hover{transform:none;box-shadow:none;}
.btn-primary,.btn-next{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-primary:hover,.btn-next:hover{background:var(--blue-dark);border-color:var(--blue-dark);}
.btn-outline,.btn-prev,.plan-cta{background:transparent;color:var(--navy);border-color:var(--border-2);}
.btn-outline:hover,.btn-prev:hover,.plan-cta:hover{border-color:var(--navy);}
.btn-ripple{display:none!important;}

/* ---------- 5. Service blocks (diensten) ---------------------------------- */

.service-block{padding-block:var(--sec);border-bottom:1px solid var(--border);}
.service-block:last-of-type{border-bottom:0;}
.service-block.gray{background:var(--bg);}
.sb-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  align-items:center;
}
.sb-content{grid-column:1 / span 5;}
.sb-grid>div:not(.sb-content){grid-column:7 / span 6;grid-row:1;}
.sb-grid.flip .sb-content{grid-column:8 / span 5;grid-row:1;}
.sb-grid.flip>div:not(.sb-content){grid-column:1 / span 6;grid-row:1;}
.sb-content h2{font-size:var(--t-d2);line-height:1.14;letter-spacing:-.028em;
  margin:0 0 var(--s3);color:var(--navy);}
.sb-content p{font-size:var(--t-body);line-height:1.75;color:var(--text-2);margin:0 0 var(--s2);}
.sb-visual{background:var(--bg);border-radius:var(--radius-lg);overflow:hidden;padding:0;
  border:1px solid var(--border);box-shadow:none;}
.sb-visual img{border-radius:0!important;width:100%;height:auto!important;
  aspect-ratio:4/3;object-fit:cover;}

.feature-list{
  list-style:none;margin:var(--s4) 0;padding:0;
  border-top:1px solid var(--border);
}
.feature-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2);align-items:baseline;
  padding-block:12px;border-bottom:1px solid var(--border);
  font-size:var(--t-sm);color:var(--text);line-height:1.55;
}
.feature-list li::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);
  transform:translateY(-2px);
}

/* ---------- 6. Cards + FAQ ------------------------------------------------ */

.card,.faq-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s4);box-shadow:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover,.faq-card:hover{
  border-color:var(--border-2);box-shadow:0 8px 24px -16px rgba(15,23,42,.22);transform:none;
}
.card h3,.card h4,.faq-card h3{font-size:var(--t-d4);letter-spacing:-.02em;margin:0 0 var(--s1);color:var(--navy);}
.card p,.faq-card p{font-size:var(--t-sm);line-height:1.75;color:var(--text-2);margin:0;}
.faq-q{font-size:var(--t-d4);font-weight:700;letter-spacing:-.02em;color:var(--navy);margin:0 0 var(--s1);}
.faq-a{font-size:var(--t-sm);line-height:1.75;color:var(--text-2);margin:0;}
.faq-a a,.card a:not(.btn){color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);}
.faq-list{display:grid;gap:0;}

details.faq-item{border-bottom:1px solid var(--border);background:none;padding:0;}
details.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s3);
  font-size:var(--t-d4);font-weight:600;letter-spacing:-.018em;color:var(--navy);
  transition:color .2s var(--ease);
}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary:hover,details.faq-item[open] summary{color:var(--blue);}
details.faq-item .faq-a{padding-bottom:var(--s3);max-width:76ch;line-height:1.8;}

/* ---------- 7. Pricing ----------------------------------------------------- */

.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);
  align-items:stretch;}
.pricing-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s4);display:flex;flex-direction:column;position:relative;box-shadow:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.pricing-card:hover{border-color:var(--border-2);box-shadow:0 8px 24px -16px rgba(15,23,42,.22);transform:none;}
.pricing-card.onepage{background:var(--white);}
.pricing-card.popular,.pricing-card.featured{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
.pricing-card.popular .plan-name,.pricing-card.featured .plan-name{color:#93b4f8;}
.pricing-card.popular .plan-desc,.pricing-card.featured .plan-desc,
.pricing-card.popular .price-note,.pricing-card.featured .price-note{color:#94a3b8;}
.pricing-card.popular .price-amount,.pricing-card.featured .price-amount,
.pricing-card.popular .price-currency,.pricing-card.featured .price-currency{color:#fff;}

.plan-name{
  font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin-bottom:var(--s2);
}
.plan-desc{font-size:var(--t-xs);line-height:1.7;color:var(--text-2);margin:0 0 var(--s3);}
.price-row{display:flex;align-items:baseline;gap:3px;margin-bottom:4px;}
.price-currency{font-size:1.25rem;font-weight:600;color:var(--text-2);}
.price-amount{font-size:2.75rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--navy);}
.price-note{font-size:var(--t-label);font-weight:500;letter-spacing:.04em;color:var(--text-3);
  margin:0 0 var(--s3);text-transform:uppercase;}
.plan-divider{height:1px;background:var(--border);margin-block:var(--s3);border:0;}
.pricing-card.popular .plan-divider,.pricing-card.featured .plan-divider{background:rgba(255,255,255,.14);}
.plan-features{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:10px;}
.plan-features li{
  font-size:var(--t-xs);line-height:1.55;color:var(--text);
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;
}
.plan-features li::before{font-weight:700;line-height:1.5;}
.plan-features li.check::before{content:'✓';color:var(--blue);}
.plan-features li.cross::before{content:'–';color:var(--text-3);}
.plan-features li.cross{color:var(--text-3);}
.pricing-card.popular .plan-features li,.pricing-card.featured .plan-features li{color:#e2e8f0;}
/* The tick sits in a pale badge on white cards; on the navy card that badge
   would be light-on-light, so it gets its own treatment. */
.pricing-card.popular .plan-features li.check::before,
.pricing-card.featured .plan-features li.check::before{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff;
}
.pricing-card.popular .plan-features li.cross,.pricing-card.featured .plan-features li.cross{color:#64748b;}
.pricing-card.popular .plan-features li.cross::before,
.pricing-card.featured .plan-features li.cross::before{
  background:transparent;border-color:rgba(255,255,255,.16);color:#94a3b8;
}
.plan-cta{margin-top:auto;width:100%;}
.pricing-card.popular .plan-cta,.pricing-card.featured .plan-cta{
  background:var(--blue);border-color:var(--blue);color:#fff;}
.pricing-card.popular .plan-cta:hover,.pricing-card.featured .plan-cta:hover{background:var(--blue-dark);}

.monthly-row{display:grid;gap:var(--s1);margin-bottom:var(--s3);}
.monthly-block{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
  padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);
}
.pricing-card.popular .monthly-block,.pricing-card.featured .monthly-block{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
.monthly-block-icon{display:grid;place-items:center;color:var(--blue);}
.monthly-block-icon svg{stroke:currentColor!important;}
.monthly-block-amount{font-size:var(--t-sm);font-weight:700;letter-spacing:-.01em;color:var(--navy);}
.monthly-block-amount span{font-weight:500;color:var(--text-3);font-size:.85em;}
.pricing-card.popular .monthly-block-amount,.pricing-card.featured .monthly-block-amount{color:#fff;}
.monthly-block-desc{font-size:var(--t-label);color:var(--text-3);}
.eenmalig-note{
  font-size:var(--t-label);line-height:1.65;color:var(--text-3);
  padding-top:10px;border-top:1px solid var(--border);margin-bottom:var(--s2);
}
.pricing-card.popular .eenmalig-note,.pricing-card.featured .eenmalig-note{
  color:#94a3b8;border-top-color:rgba(255,255,255,.14);}

.addons-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);}
.addon-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);box-shadow:none;
  transition:border-color .2s var(--ease);
}
.addon-card:hover{border-color:var(--border-2);transform:none;box-shadow:none;}
.addon-icon{
  width:40px;height:40px;display:grid;place-items:center;color:var(--blue);
  background:var(--blue-light);border:0;border-radius:var(--radius);
}
.addon-card h3,.addon-card h4{font-size:var(--t-d4);letter-spacing:-.02em;margin:0;color:var(--navy);}
.addon-card p{font-size:var(--t-xs);line-height:1.7;color:var(--text-2);margin:0;}
.addon-price{
  font-size:var(--t-sm);font-weight:700;color:var(--navy);
  margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--border);
}

/* Badges and the billing toggle */
.featured-badge,.toggle-popular,.promo-badge,.discount-badge,.save-badge{
  border-radius:99px!important;font-size:var(--t-label)!important;font-weight:600!important;
  letter-spacing:.04em;padding:5px 12px!important;border:0;white-space:nowrap;
}
.featured-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--blue);color:#fff;}
.toggle-popular{background:var(--blue);color:#fff;margin-left:8px;}
.promo-badge,.discount-badge{background:var(--blue);color:#fff;}
.save-badge{background:#f0fdf4;color:var(--green);border:1px solid #bbf7d0!important;}

.billing-toggle-wrap{
  display:inline-flex;align-items:stretch;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg);padding:4px;gap:4px;
  margin:var(--s4) 0 0;
}
.billing-btn{
  border:0;border-radius:var(--radius);background:transparent;cursor:pointer;box-shadow:none;
  font-family:var(--font);font-size:var(--t-xs);font-weight:600;color:var(--text-2);
  padding:10px 18px;transition:background-color .2s var(--ease),color .2s var(--ease);
}
.billing-btn:hover{color:var(--navy);}
.billing-btn.active,.billing-btn[aria-selected="true"]{background:var(--white);color:var(--navy);
  box-shadow:0 1px 3px rgba(15,23,42,.1);}
.pricing-toggle{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0 0;}
.toggle-label{font-size:var(--t-xs);font-weight:500;color:var(--text-3);}
.toggle-label.active{color:var(--navy);}
.toggle{width:46px;height:26px;background:var(--border-2);border:0;border-radius:99px;
  cursor:pointer;position:relative;transition:background-color .2s var(--ease);}
.toggle::after{content:'';position:absolute;width:20px;height:20px;background:#fff;
  border-radius:50%;top:3px;left:3px;transition:left .2s var(--ease);}
.toggle.on{background:var(--blue);}
.toggle.on::after{left:23px;}

/* ---------- 8. About ------------------------------------------------------- */

.about-hero{padding-block:calc(72px + var(--s6)) var(--s5);}
.about-hero-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  align-items:center;}
.about-hero-text{grid-column:1 / span 6;}
.about-hero-inner>div:not(.about-hero-text){grid-column:8 / span 5;grid-row:1;}
.about-hero h1{font-size:var(--t-d1);line-height:1.1;letter-spacing:-.034em;color:var(--navy);}
.about-hero h1 .name-line{color:var(--blue);}
.about-hero-text>p{font-size:var(--t-lead);line-height:1.75;color:var(--text-2);max-width:52ch;}
.about-photo-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:none;
  border:1px solid var(--border);background:var(--bg);aspect-ratio:3/4;}
.about-photo-namecard{
  border-radius:var(--radius);background:rgba(15,23,42,.86);border:0;color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.about-photo-namecard *{color:#fff!important;}
.about-float-badge{border-radius:var(--radius);background:var(--blue);color:#fff;
  box-shadow:none;border:0;}
.about-chips{display:flex;flex-wrap:wrap;gap:var(--s1);}
.about-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-label);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--border);border-radius:99px;
  color:var(--text-2);background:var(--white);
}
.about-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);}

.story-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  align-items:start;}
.story-left{grid-column:1 / span 5;}
.story-right{grid-column:7 / span 6;}
.story-left img,.story-right img{border-radius:var(--radius-lg);width:100%;height:auto;}
.story-card{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:start;
  padding-block:var(--s3);border-bottom:1px solid var(--border);
  background:none;border-radius:0;box-shadow:none;
}
.story-card:first-child{border-top:1px solid var(--border);}
.story-card:hover{transform:none;box-shadow:none;background:none;}
.story-card-icon{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  background:var(--blue-light);color:var(--blue);border:0;border-radius:var(--radius);
}
.story-card-text h4{font-size:var(--t-d4);letter-spacing:-.02em;margin:0 0 4px;color:var(--navy);}
.story-card-text p{font-size:var(--t-sm);line-height:1.75;color:var(--text-2);margin:0;}

.values-grid,.skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);}
.value-item,.skill-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s4);box-shadow:none;transition:border-color .2s var(--ease);
}
.value-item:hover,.skill-card:hover{border-color:var(--border-2);transform:none;box-shadow:none;}
.value-item h3,.value-item h4,.skill-card h3,.skill-card h4{
  font-size:var(--t-d4);letter-spacing:-.02em;margin:0 0 var(--s1);color:var(--navy);}
.value-item p,.skill-card p{font-size:var(--t-sm);line-height:1.75;color:var(--text-2);margin:0;}
.skill-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3);}
.skill-tags span{
  font-size:var(--t-label);font-weight:600;padding:5px 10px;border-radius:99px;
  border:1px solid var(--border);color:var(--text-2);background:var(--white);
}

/* ---------- 9. Contact + forms --------------------------------------------- */

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--s3);}
.form-group label{font-size:var(--t-xs);font-weight:600;color:var(--navy);}
.form-group input,.form-group textarea,.form-group select{
  font-family:var(--font);font-size:var(--t-sm);color:var(--navy);
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:13px 14px;width:100%;box-shadow:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.form-group textarea{min-height:140px;resize:vertical;}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-3);}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);
}
.form-nav{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}

.step-indicator{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4);
  font-size:var(--t-xs);color:var(--text-2);}
.step-dot{
  width:28px;height:28px;border:1px solid var(--border);border-radius:50%;
  display:grid;place-items:center;font-size:var(--t-label);font-weight:600;
  color:var(--text-3);background:var(--white);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.step-dot.active,.step-dot.done{background:var(--blue);color:#fff;border-color:var(--blue);}
.step-panel{display:none;}
.step-panel.active{display:block;}

.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s2);margin-bottom:var(--s3);}
.option-grid label,.option-grid .option{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s3);cursor:pointer;font-size:var(--t-sm);color:var(--text);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.option-grid label:hover,.option-grid .option:hover{border-color:var(--border-2);}
.option-grid input:checked+label,.option-grid label.selected,.option-grid .option.selected{
  border-color:var(--blue);background:var(--blue-light);color:var(--navy);}

.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);}
.trust-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s4);box-shadow:none;transition:border-color .2s var(--ease);
}
.trust-card:hover{border-color:var(--border-2);transform:none;box-shadow:none;}
.trust-icon{width:40px;height:40px;display:grid;place-items:center;
  background:var(--blue-light);color:var(--blue);border:0;border-radius:var(--radius);
  margin-bottom:var(--s3);}
.trust-card h3,.trust-card h4{font-size:var(--t-d4);letter-spacing:-.02em;margin:0 0 var(--s1);}
.trust-card p{font-size:var(--t-sm);line-height:1.75;color:var(--text-2);margin:0;}

.promise-item,.next-step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2);align-items:start;
  padding-block:12px;border-bottom:1px solid var(--border);
  font-size:var(--t-sm);color:var(--text);line-height:1.6;
}
.submit-notice{font-size:var(--t-xs);color:var(--text-3);line-height:1.7;margin-top:var(--s3);}
.success-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:var(--blue-light);color:var(--blue);margin-bottom:var(--s3);}

/* ---------- 10. Portfolio --------------------------------------------------- */

.port-hero{padding-block:calc(72px + var(--s6)) var(--s5);text-align:left;}
.port-hero-inner{max-width:none;margin:0;}
.port-hero-inner>div[style*="justify-content:center"]{justify-content:flex-start!important;}
.port-hero h1{font-size:var(--t-d1);line-height:1.1;letter-spacing:-.034em;
  color:var(--navy);max-width:18ch;}
.port-hero p{font-size:var(--t-lead);line-height:1.75;color:var(--text-2);max-width:56ch;}
.port-status{
  display:inline-flex;align-items:center;gap:8px;
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:99px;padding:6px 14px;
  font-size:var(--t-label);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#166534;margin-bottom:var(--s3);
}
.port-status-dot{width:6px;height:6px;background:var(--green);border-radius:50%;}

/* Projects run full width, alternating, matching the homepage cases. */
.coming-section .coming-grid{
  grid-template-columns:minmax(0,1fr)!important;
  gap:var(--s6)!important;margin-bottom:var(--s6);
}
.coming-card.live-card{
  display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  align-items:center;
  background:none!important;border:0!important;border-radius:0!important;
  padding:0!important;overflow:visible!important;box-shadow:none!important;
}
.coming-card.live-card .live-preview{grid-column:1 / span 7;grid-row:1;}
.coming-card.live-card .live-card-body{grid-column:9 / span 4;grid-row:1;}
.coming-card.live-card:nth-child(even) .live-preview{grid-column:6 / span 7;}
.coming-card.live-card:nth-child(even) .live-card-body{grid-column:1 / span 4;}
.coming-card.live-card:hover{transform:none;box-shadow:none;}
.coming-card.live-card .live-preview{
  height:auto!important;aspect-ratio:16/10;border-radius:var(--radius-lg);
  border:1px solid var(--border);background:var(--bg);overflow:hidden;position:relative;
}
.coming-card.live-card:hover .live-preview>picture>img{transform:scale(1.03)!important;}
.coming-card.live-card .pf-phone-mockup{
  width:12%;max-width:70px;right:20px;bottom:0;animation:none;
  filter:drop-shadow(0 12px 28px rgba(15,23,42,.4));
}
.coming-card.live-card .pf-phone-inner{border-radius:var(--radius) var(--radius) 0 0;
  border:1px solid var(--border);border-bottom:0;background:var(--white);padding:2px;}
.coming-card.live-card .pf-phone-screen-img{border-radius:0;height:auto;}
.coming-card.live-card .live-badge{
  top:12px;right:auto;left:12px;background:var(--navy);border:0;border-radius:var(--radius);
  color:#fff;padding:6px 12px;display:inline-flex;align-items:center;gap:7px;margin:0;
  font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.coming-card.live-card .live-badge::before{background:#4ade80;}
.coming-card.live-card .live-card-body{padding:0!important;}
.coming-card.live-card .live-type{
  font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 var(--s2);
}
.coming-card.live-card h3{
  font-size:var(--t-d2)!important;font-weight:700!important;line-height:1.14!important;
  letter-spacing:-.028em!important;color:var(--navy)!important;margin:0 0 var(--s2)!important;
}
.coming-card.live-card p{
  font-size:var(--t-sm)!important;line-height:1.75!important;color:var(--text-2)!important;
  margin:0 0 var(--s3)!important;
}
.live-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s3);}
.live-tag{
  font-size:var(--t-label);font-weight:600;color:var(--text-2);
  background:var(--white);border:1px solid var(--border);border-radius:99px;padding:5px 10px;
}

.next-proj-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);}
.next-proj-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);box-shadow:none;
  overflow:hidden;transition:border-color .2s var(--ease);
}
.next-proj-card:hover{border-color:var(--border-2);transform:none;box-shadow:none;}
.next-proj-card::before{display:none;}
.next-proj-badge{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;
  background:var(--blue-light);border:0;color:var(--blue);
  font-size:var(--t-label);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.next-proj-logo-wrap{
  height:88px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:0;border-radius:var(--radius);padding:var(--s2);overflow:hidden;
}
.next-proj-logo-wrap img{width:100%;height:100%;object-fit:contain;}
.next-proj-info h3{font-size:var(--t-d4);letter-spacing:-.02em;margin:0 0 4px;color:var(--navy);}
.next-proj-info p{font-size:var(--t-xs);line-height:1.7;color:var(--text-2);margin:0;}
.next-proj-progress{height:4px;background:var(--border);border-radius:99px;margin-top:auto;overflow:hidden;}
.next-proj-progress-bar{height:4px;background:var(--blue);border-radius:99px;}
.next-proj-progress-bar::after{display:none;}

.honest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);}
.honest-item{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s4);}
.honest-num{font-size:2.5rem;font-weight:700;letter-spacing:-.04em;line-height:1;
  color:var(--navy);display:block;margin-bottom:var(--s1);}
.honest-label{font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:var(--s2);}
.honest-sub{font-size:var(--t-sm);line-height:1.75;color:var(--text-2);margin:0;}

.pf-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:none;}
.pf-card:hover{transform:none;box-shadow:0 8px 24px -16px rgba(15,23,42,.22);border-color:var(--border-2);}
.pf-preview{border-radius:0;background:var(--bg);}
.pf-info h3{font-size:var(--t-d4);letter-spacing:-.02em;color:var(--navy);}
.pf-info p{font-size:var(--t-xs);color:var(--text-2);}
.pf-live,.pf-wip-badge{border-radius:99px;font-size:var(--t-label);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;}

/* ---------- 11. Retired decoration ------------------------------------------ */
/* Blue grid overlays, radial glows and gradient card rules were filler. */

.city-hero::before,.about-hero::before,.about-photo-wrap::before,.about-photo-frame::after,
.values-section::before,.err-section::before,.port-hero::before,.next-proj-section::before,
.next-proj-card::before,.next-proj-progress-bar::after,.skill-card::before,
.coming-section::before,.coming-card::before{display:none!important;content:none!important;}

.values-section,.next-proj-section,.trust-section{background:var(--bg);}

/* ---------- 12. Blog --------------------------------------------------------- */

.blog-hero{background:var(--white);padding-block:calc(72px + var(--s6)) var(--s4);text-align:left;}
.blog-hero-glow{display:none!important;}
.blog-hero-inner{max-width:none;margin:0;text-align:left;}
.blog-hero-title{font-size:var(--t-d1);font-weight:700;line-height:1.1;letter-spacing:-.034em;
  color:var(--navy);}
.blog-hero-sub{font-size:var(--t-lead);line-height:1.75;color:var(--text-2);max-width:60ch;margin-inline:0;}
.blog-search{border-radius:var(--radius);border:1px solid var(--border);background:var(--white);
  box-shadow:none;max-width:520px;margin-inline:0;}
.blog-search input{background:transparent;font-family:var(--font);color:var(--navy);}

.blog-card,.blog-card-featured,.blog-card-compact,.blog-topic,.blog-cta-banner,
.blog-empty,.blog-archive{border-radius:var(--radius-lg)!important;box-shadow:none!important;}
.blog-card,.blog-card-featured,.blog-card-compact,.blog-topic{
  background:var(--white);border:1px solid var(--border);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.blog-card:hover,.blog-card-featured:hover,.blog-card-compact:hover,.blog-topic:hover{
  border-color:var(--border-2);box-shadow:0 8px 24px -16px rgba(15,23,42,.22);transform:none;}
.blog-card-image,.blog-card-art{background:var(--bg);border-radius:0!important;}
.blog-card-title,.blog-topic-name{color:var(--navy);letter-spacing:-.022em;font-weight:700;}
.blog-card-excerpt,.blog-card-foot,.blog-topic-desc{color:var(--text-2);}
.blog-card-cat,.blog-card-badge,.blog-chip,.blog-topic-count,.blog-archive-count{
  border-radius:99px!important;font-size:var(--t-label)!important;font-weight:600!important;
  letter-spacing:.04em;}
.blog-card-badge{background:var(--navy);color:#fff;border:0;}
.blog-chip{background:var(--white);border:1px solid var(--border);color:var(--text-2);padding:8px 14px;
  transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease);}
.blog-chip:hover{border-color:var(--border-2);color:var(--navy);}
.blog-chip.active,.blog-chip[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue);}
.blog-section-title{font-size:var(--t-d2);letter-spacing:-.028em;color:var(--navy);}
.blog-section-sub{color:var(--text-2);}
.blog-cta-banner{background:var(--navy);color:#fff;}
.blog-cta-banner h2,.blog-cta-banner h3{color:#fff;}

.article-hero,.post-hero{background:var(--white);}
.article-body,.post-body,.prose{color:var(--text);}
.article-body h2,.post-body h2,.prose h2{letter-spacing:-.028em;color:var(--navy);}
.article-body a,.post-body a,.prose a{color:var(--blue);text-underline-offset:2px;}
article img,[class^="post-"] img,[class*=" post-"] img,
[class^="blog-"] img,[class*=" blog-"] img{border-radius:var(--radius)!important;}

/* ---------- 13. Closing CTA on inner pages ----------------------------------- */

.cta-section{padding-block:0;}
.cta-banner{
  background:var(--navy);color:#fff;border-radius:0;box-shadow:none;
  padding:var(--s8) var(--gut);text-align:left;
}
.cta-banner .section-label{color:#93b4f8;}
.cta-banner .section-title,.cta-banner h2{
  font-size:var(--t-d1);line-height:1.12;letter-spacing:-.032em;color:#fff;
  margin:0 0 var(--s3);max-width:20ch;}
.cta-banner p{font-size:var(--t-lead);line-height:1.75;color:#cbd5e1;max-width:56ch;
  margin:0 0 var(--s4);}
.cta-banner p strong{color:#fff;}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s2);}
.cta-banner .btn-outline{background:transparent;border-color:rgba(255,255,255,.32);color:#fff;}
.cta-banner .btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);}

/* ---------- 14. Responsive ---------------------------------------------------- */

@media (max-width:1080px){
  .pricing-grid,.addons-grid,.next-proj-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sb-content,.sb-grid.flip .sb-content{grid-column:1 / span 6;}
  .sb-grid>div:not(.sb-content),.sb-grid.flip>div:not(.sb-content){grid-column:7 / span 6;}
  .about-hero-text{grid-column:1 / span 6;}
  .about-hero-inner>div:not(.about-hero-text){grid-column:7 / span 6;}
  .coming-card.live-card .live-preview,
  .coming-card.live-card:nth-child(even) .live-preview{grid-column:1 / span 7;}
  .coming-card.live-card .live-card-body,
  .coming-card.live-card:nth-child(even) .live-card-body{grid-column:8 / span 5;}
}

@media (max-width:900px){
  .values-grid,.skills-grid,.trust-grid,.honest-grid,.faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sb-content,.sb-grid.flip .sb-content,
  .sb-grid>div:not(.sb-content),.sb-grid.flip>div:not(.sb-content){grid-column:1 / span 12;grid-row:auto;}
  .story-left,.story-right{grid-column:1 / span 12;}
  .about-hero-text,.about-hero-inner>div:not(.about-hero-text){grid-column:1 / span 12;grid-row:auto;}
  .coming-card.live-card .live-preview,
  .coming-card.live-card:nth-child(even) .live-preview{grid-column:1 / span 12;grid-row:1;}
  .coming-card.live-card .live-card-body,
  .coming-card.live-card:nth-child(even) .live-card-body{grid-column:1 / span 12;grid-row:2;}
}

@media (max-width:640px){
  .pricing-grid,.addons-grid,.next-proj-grid,.values-grid,.skills-grid,
  .trust-grid,.honest-grid,.faq-grid{grid-template-columns:minmax(0,1fr);}
  .form-row{grid-template-columns:minmax(0,1fr);}
  .page-hero h1,.port-hero h1,.about-hero h1{max-width:none;}
  .form-nav .btn,.form-nav .btn-next,.form-nav .btn-prev{width:100%;}
  .cta-actions{flex-direction:column;align-items:stretch;}
  .cta-actions .btn{width:100%;}
}

/* ---------- 15. Portfolio page: previews become typing laptops ------------- */
.coming-card.live-card .live-preview{
  height:auto!important;aspect-ratio:auto;background:none!important;border:0!important;
  box-shadow:none!important;overflow:visible!important;border-radius:0!important;
  position:relative;
}
/* The phone stands on the same line as the laptop base, not below it, and a
   thin light gap keeps it from melting into the screenshot behind it. */
.coming-card.live-card .live-preview .uw-devphone{
  right:0;bottom:0;width:17%;
  box-shadow:0 0 0 4px var(--white),var(--shadow-lg);
}
.coming-card.live-card:hover .live-preview>picture>img{transform:none!important;}

/* On a phone the project is shown on a phone: the laptop steps aside. */
@media (max-width:900px){
  .coming-card.live-card .live-preview .uw-laptop{display:none;}
  .coming-card.live-card .live-preview .uw-devphone{
    display:block;position:relative;right:auto;bottom:auto;
    width:min(220px,56vw);max-width:none;margin-inline:auto;
    padding:7px;border-radius:26px;box-shadow:var(--shadow-lg);
  }
  .coming-card.live-card .live-preview .uw-devphone figure{inset:7px;border-radius:19px;opacity:1;}
}
@media (hover:none){
  .coming-card.live-card .live-preview .uw-devphone{transition:transform .2s var(--ease-state);}
  .coming-card.live-card:active .live-preview .uw-devphone{transform:scale(.985);}
}