/* WebDeveloper.lk: supplied circular identity, clear navigation, aligned image cards. */
:root { --header-height: 116px; }

/* Display the complete supplied square artwork; never crop or stretch the logo. */
.site-header .nav-wrap {
  width:min(var(--max),calc(100% - 2 * var(--gutter)));
  min-height:116px;
  gap:22px;
  padding-block:8px;
  align-items:center;
}
.site-header .brand-image, .site-footer .brand-image {
  display:inline-flex; align-items:center; justify-content:flex-start;
  padding:0; margin:0; line-height:1; flex-shrink:0;
}
.site-header .brand-logo-frame, .site-footer .brand-logo-frame {
  display:block; position:relative; width:100px; height:100px;
  max-width:100%; flex:none; overflow:hidden; background:#000;
  border-radius:50%;
}
.site-header .brand-logo, .site-footer .brand-logo {
  display:block; width:100%; max-width:100%; height:100%;
  transform:none; translate:none; object-fit:contain; object-position:center;
  margin:0; padding:0; border:0; aspect-ratio:1;
}
.site-footer .brand-logo-frame { width:176px; height:176px; }
.site-header .brand-image:focus-visible, .site-footer .brand-image:focus-visible {
  outline:3px solid #f2c64d; outline-offset:5px; border-radius:50%;
}

/* A single typographic scale overrides the former 10-12px menu rules. */
.site-header .primary-nav {
  min-width:0; gap:clamp(13px,1.2vw,20px);
  font-size:16px!important; font-weight:700; align-items:center;
}
.site-header .primary-nav > a:not(.nav-cta),
.site-header .primary-nav > .nav-dropdown > summary {
  display:flex; align-items:center; justify-content:flex-start;
  min-height:48px; padding:12px 0; font-size:16px!important;
  line-height:1.5; letter-spacing:-.02em; gap:7px;
}
.site-header .primary-nav .nav-cta {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; font-size:15px!important; line-height:1.4;
  padding:12px 17px!important; white-space:nowrap; text-align:center;
}
.site-header .nav-dropdown > summary::after { margin-left:0; font-size:12px!important; }
.site-header .nav-mega-panel, .site-header .nav-compact-panel {
  border-radius:0 0 16px 16px; scrollbar-width:thin;
}
.site-header .nav-mega-group { padding-inline:12px; }
.site-header .nav-mega-title {
  display:flex; align-items:flex-start; min-height:48px; margin:0 0 10px;
  font-size:13px!important; font-weight:700; line-height:1.55;
  letter-spacing:.025em; overflow-wrap:normal;
}
.site-header .nav-mega-group a, .site-header .nav-compact-panel a {
  min-height:44px; padding:10px 8px;
  font-size:14px!important; font-weight:500; line-height:1.65;
  overflow-wrap:break-word; border-radius:6px;
}
.site-header .menu-toggle { align-self:center; border-radius:12px; }
.site-header .nav-compact-panel { padding:14px; width:min(480px,calc(100vw - 48px)); }
.site-header .primary-nav a:focus-visible,
.site-header .primary-nav summary:focus-visible {
  outline:2px solid #ffcf55; outline-offset:4px; border-radius:5px;
}

/* Align section headings, cards and the footer to the existing content grid. */
.brief-section-inner { max-width:var(--max); }
.brief-section-inner > p:not(.brief-kicker),
.brief-section-inner > .brief-list { max-width:940px; }
.brief-section-inner > .visual-3d-pair { max-width:none; }
.site-footer.full-site-footer .footer-main { align-items:start; gap:38px 28px; }
.site-footer.full-site-footer .footer-combo { align-items:start; }
.site-footer .footer-brand-column { display:flex; flex-direction:column; align-items:flex-start; }
.site-footer .footer-address { margin:20px 0 18px; font-size:14px; line-height:1.85; }
.site-footer .footer-heading { min-height:44px; font-size:14px!important; line-height:1.55; }
.site-footer .footer-links > a, .site-footer .footer-contact-details a > strong {
  font-size:14px!important; line-height:1.7; overflow-wrap:break-word;
}
.site-footer .footer-contact-details { width:100%; }
.site-footer .footer-contact-details a > strong { overflow-wrap:anywhere; }
.site-footer .footer-directions { font-size:14px; }
.site-footer .footer-bottom { align-items:center; }

/* Service imagery and copy use matched dimensions, spacing and link placement. */
.service-feature-grid {
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:stretch; gap:26px; margin-top:32px;
}
.service-feature-card {
  grid-column:span 2; display:flex; flex-direction:column;
  min-width:0; position:relative; isolation:isolate; overflow:hidden;
  border:1px solid #3b2528; border-radius:20px;
  background:linear-gradient(145deg,#151116,#09090d);
  box-shadow:0 15px 40px #0003;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.service-count-4 .service-feature-card { grid-column:span 3; }
.service-count-5 .service-feature-card:nth-child(n+4) { grid-column:span 3; }
.service-feature-media {
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; width:100%; aspect-ratio:3/2;
  border-bottom:1px solid #ffffff12; background:#101116;
}
.service-feature-media img {
  display:block; width:100%; height:100%; object-fit:contain; object-position:center;
  margin:0; transition:transform .45s ease;
}
.service-count-5 .service-feature-card:nth-child(n+4) .service-feature-media { aspect-ratio:16/9; }
.service-feature-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:24px; }
.service-feature-number {
  display:block; margin:0 0 14px; font-family:Arial,sans-serif;
  color:#ef7777; font-size:12px; font-weight:700; letter-spacing:.13em;
}
.brief-page .service-feature-card h3, .service-feature-card h3 {
  margin:0 0 14px!important; font-size:23px!important; font-weight:600!important;
  line-height:1.35!important; letter-spacing:-.025em!important;
  color:#fff; overflow-wrap:break-word;
}
.brief-page .service-feature-card p, .service-feature-card p {
  margin:0 0 20px; font-size:16px; line-height:1.8; color:#dad4d6;
}
.service-feature-card p:last-child { margin-bottom:0; }
.service-feature-card .home-read-more {
  display:flex; flex-direction:column; align-items:flex-start;
  gap:12px; margin: auto 0 0; padding-top:8px;
}
.service-feature-card .home-read-more a {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding-top:13px; min-height:44px;
  border-top:1px solid #ffffff14; font-size:14px; line-height:1.6;
}
.service-feature-card .home-read-more a > span { flex:none; }
.service-feature-media:focus-visible {
  outline:3px solid #ffca50; outline-offset:-5px; border-radius:16px 16px 0 0;
}
@media (hover:hover) and (pointer:fine) {
  .service-feature-card:hover, .service-feature-card:focus-within {
    border-color:#c24646; box-shadow:0 18px 42px #0005,0 0 24px #d1161612;
  }
  .service-feature-card:hover .service-feature-media img { transform:scale(1.035); }
}
@media (max-width:1279px) {
  :root { --header-height:108px; }
  .site-header .nav-wrap { min-height:108px; padding-block:8px; }
  .site-header .brand-logo-frame { width:92px; height:92px; }
  .site-header .primary-nav, .brief-page .site-header .primary-nav {
    align-items:stretch; gap:0;
  }
  .site-header .primary-nav > a:not(.nav-cta),
  .site-header .primary-nav > .nav-dropdown > summary {
    min-height:52px; padding:14px 0; font-size:17px!important;
    justify-content:space-between; letter-spacing:0;
  }
  .site-header .nav-mega-panel, .site-header .nav-compact-panel,
  .brief-page .site-header .nav-mega-panel, .brief-page .site-header .nav-compact-panel {
    width:100%; padding:14px; border-radius:10px;
  }
  .site-header .nav-mega-title { min-height:0; font-size:14px!important; margin-bottom:9px; }
  .site-header .nav-mega-group { padding-inline:0; }
  .site-header .nav-mega-group a, .site-header .nav-compact-panel a {
    font-size:15px!important; padding:11px 8px; min-height:46px;
  }
  .site-header .primary-nav .nav-cta { font-size:16px!important; margin-top:18px; }
}
@media (max-width:1000px) {
  .service-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .service-feature-grid .service-feature-card { grid-column:span 1; }
  .service-count-5 .service-feature-card:last-child,
  .service-count-3 .service-feature-card:last-child { grid-column:1/-1; }
  .service-count-5 .service-feature-card:last-child,
  .service-count-3 .service-feature-card:last-child { display:grid; grid-template-columns:1fr 1fr; }
  .service-count-5 .service-feature-card:last-child .service-feature-media,
  .service-count-3 .service-feature-card:last-child .service-feature-media { aspect-ratio:auto; min-height:240px; }
  .service-count-5 .service-feature-card:nth-child(4) .service-feature-media { aspect-ratio:3/2; }
  .service-feature-body { padding:22px; }
}
@media (max-width:760px) {
  :root { --header-height:92px; }
  .site-header .nav-wrap { min-height:92px; padding-block:8px; }
  .site-header .brand-logo-frame { width:76px; height:76px; }
  .site-header .primary-nav { padding-inline:22px; }
  .site-header .menu-toggle { width:46px; height:46px; flex-basis:46px; }
  .site-footer .brand-logo-frame { width:160px; height:160px; }
  .site-footer .footer-links > a { font-size:13px!important; }
  .site-footer .footer-heading { font-size:13px!important; }
  .service-feature-grid { gap:18px; margin-top:26px; }
  .service-feature-body { padding:20px; }
}
@media (max-width:640px) {
  .service-feature-grid { grid-template-columns:minmax(0,1fr); }
  .service-feature-grid .service-feature-card,
  .service-count-5 .service-feature-card:last-child,
  .service-count-3 .service-feature-card:last-child {
    grid-column:auto; display:flex; flex-direction:column;
  }
  .service-feature-grid .service-feature-card .service-feature-media {
    aspect-ratio:3/2; min-height:0;
  }
  .brief-page .service-feature-card h3, .service-feature-card h3 {
    font-size:23px!important; line-height:1.35!important;
  }
  .site-footer.full-site-footer .footer-main { gap:28px 20px; }
  .site-footer .footer-heading { min-height:0; }
}
@media (prefers-reduced-motion:reduce) {
  .service-feature-card, .service-feature-media img { transition:none!important; transform:none!important; }
}