:root{
  --primary:#00163d;--primary-2:#0f2b5c;--secondary:#3755c3;--cyan:#0284c7;--gold:#c59b27;
  --surface:#f8f9ff;--surface-low:#eff4ff;--surface-mid:#e6eeff;--white:#fff;--text:#0d1c2f;
  --muted:#64748b;--line:#e2e8f0;--line-strong:#cbd5e1;--green:#25d366;--danger:#ba1a1a;
  --shadow-sm:0 1px 3px rgba(15,43,92,.05),0 1px 2px rgba(15,43,92,.03);
  --shadow-md:0 12px 28px -8px rgba(15,43,92,.15);--shadow-lg:0 24px 48px -16px rgba(15,43,92,.22);
  --radius:8px;--radius-sm:4px;--container:1280px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--surface);color:var(--text);font-family:"Hanken Grotesk",sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:#fff;padding:12px 16px}.skip-link:focus{left:16px;top:16px}.material-symbols-outlined{font-size:20px;line-height:1;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
h1,h2,h3,h4{font-family:Manrope,sans-serif;color:var(--primary);line-height:1.15;margin:0 0 .7em;letter-spacing:-.02em}h1{font-size:clamp(40px,5vw,64px);font-weight:800}h2{font-size:clamp(30px,3.5vw,44px);font-weight:700}h3{font-size:21px;font-weight:700}p{margin:0 0 1em}.lead,.hero-lead{font-size:18px;line-height:1.62;color:#46556a}.eyebrow{margin:0 0 10px;font-family:Manrope,sans-serif;font-size:11px;line-height:1.4;letter-spacing:.14em;font-weight:800;color:var(--secondary);text-transform:uppercase}.eyebrow.light{color:#ffdf98}.section{padding:88px 0}.section-soft{background:linear-gradient(180deg,#f1f5ff 0%,#f8f9ff 100%)}.section-head{margin-bottom:38px;max-width:760px}.section-head>p:last-child{color:#596679;font-size:17px}.section-head.centered{text-align:center;margin-left:auto;margin-right:auto}.split-head{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:32px}.split-head>div{max-width:760px}.text-link{display:inline-flex;gap:6px;align-items:center;color:var(--secondary);font-weight:700}.text-link:hover{color:var(--primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:6px;padding:13px 21px;min-height:46px;font-weight:700;line-height:1.1;transition:.2s ease;cursor:pointer}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--secondary)}.btn-soft{background:#fff;color:var(--primary);border-color:var(--line);box-shadow:var(--shadow-sm)}.btn-soft:hover{background:var(--surface-mid)}.btn-outline{background:#fff;color:var(--primary);border-color:var(--line-strong)}.btn-outline:hover{border-color:var(--secondary);color:var(--secondary)}.btn-gold{background:#ffdf98;color:#251a00}.btn-gold:hover{background:#eec14b}
/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(226,232,240,.78);transition:box-shadow .2s}.site-header.is-scrolled{box-shadow:0 10px 30px rgba(15,43,92,.08)}.header-topbar{background:var(--primary);color:#fff;font-size:11px;font-family:Manrope,sans-serif;text-transform:uppercase;letter-spacing:.08em}.topbar-inner{height:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar-left,.topbar-right a,.topbar-left>span{display:flex;align-items:center;gap:6px}.topbar-right a{color:#fff}.topbar-left .material-symbols-outlined{color:#ffdf98;font-size:14px}.topbar-right .material-symbols-outlined{color:var(--green);font-size:14px}.topbar-divider{opacity:.4}.header-main{min-height:78px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.brand img,.brand .custom-logo{width:auto;height:35px;object-fit:contain}.brand .custom-logo-link{display:flex}.brand-copy{display:flex;flex-direction:column;line-height:1.1}.brand-copy strong{font-family:Manrope,sans-serif;color:var(--primary);font-size:15px;letter-spacing:-.01em}.brand-copy small{margin-top:4px;color:var(--muted);font-family:Manrope,sans-serif;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.primary-nav{margin-left:auto}.nara-menu{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}.nara-menu a{display:block;color:#3f4c5f;font-weight:600;font-size:14px;padding:12px 0}.nara-menu a:hover,.nara-menu .current-menu-item>a{color:var(--secondary)}.header-actions{display:flex;align-items:center;gap:9px}.header-whatsapp{display:flex;align-items:center;gap:7px;padding:10px 11px;background:var(--surface-low);border-radius:6px;font-weight:700;color:var(--primary);font-size:13px}.header-whatsapp .material-symbols-outlined{color:var(--green)}.header-quote{padding:11px 14px;font-size:13px}.menu-toggle{display:none;border:0;background:var(--surface-low);color:var(--primary);width:42px;height:42px;border-radius:6px;align-items:center;justify-content:center}
/* Hero */
.hero-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#f0f5ff 0%,#f8f9ff 76%);padding:78px 0 92px}.blueprint-grid{position:absolute;inset:0;opacity:.035;background-size:32px 32px;background-image:linear-gradient(to right,var(--primary) 1px,transparent 1px),linear-gradient(to bottom,var(--primary) 1px,transparent 1px)}.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(400px,5fr);gap:64px;align-items:center}.hero-copy{max-width:760px}.authority-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(213,227,253,.72);border:1px solid rgba(196,198,208,.65);padding:7px 12px;border-radius:999px;font-family:Manrope,sans-serif;font-size:10px;letter-spacing:.08em;font-weight:800;text-transform:uppercase;color:var(--primary);margin-bottom:20px}.authority-badge .dot{width:8px;height:8px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 4px rgba(2,132,199,.09)}.hero-copy h1 span{color:var(--secondary)}.hero-copy .hero-lead{max-width:700px;margin:0 0 26px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}.whatsapp-button .material-symbols-outlined{color:var(--green)}.whatsapp-button span:last-child{display:flex;flex-direction:column;align-items:flex-start}.whatsapp-button small{font-size:9px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.09em}.hero-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:700px}.hero-trust-grid>div{display:grid;grid-template-columns:28px 1fr;column-gap:7px;align-items:center;padding:12px;background:rgba(255,255,255,.83);border:1px solid rgba(226,232,240,.8);border-radius:7px;box-shadow:var(--shadow-sm)}.hero-trust-grid .material-symbols-outlined{grid-row:1/3;color:var(--cyan);font-size:23px}.hero-trust-grid strong{font-family:Manrope,sans-serif;font-size:13px;color:var(--primary)}.hero-trust-grid small{font-size:11px;color:var(--muted)}.hero-visual{position:relative;min-height:520px}.hero-main-image{position:absolute;inset:0 0 36px 54px;border:5px solid #fff;border-radius:9px;overflow:hidden;box-shadow:var(--shadow-lg);background:#dde9ff}.hero-main-image img{width:100%;height:100%;object-fit:cover}.hero-main-image:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,22,61,.83))}.image-caption{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;color:#fff;display:flex;flex-direction:column}.image-caption small{color:#ffdf98;font-size:10px;letter-spacing:.12em;font-weight:800}.image-caption strong{font-family:Manrope,sans-serif;font-size:20px}.hero-secondary-image{position:absolute;width:44%;height:43%;left:0;bottom:0;border:5px solid #fff;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg)}.hero-secondary-image img{width:100%;height:100%;object-fit:cover}.experience-card{position:absolute;right:-18px;top:26px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:var(--shadow-md);border-radius:8px;padding:13px 15px;display:flex;gap:10px;align-items:center}.experience-card .material-symbols-outlined{width:38px;height:38px;display:grid;place-items:center;border-radius:6px;background:var(--surface-mid);color:var(--secondary)}.experience-card div{display:flex;flex-direction:column}.experience-card strong{font-family:Manrope,sans-serif;font-size:17px;color:var(--primary)}.experience-card small{font-size:11px;color:var(--muted)}
/* Metrics */
.metrics-band{background:var(--primary);color:#fff;padding:24px 0}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.metrics-grid>div{position:relative;padding:12px 16px;border-left:1px solid rgba(175,198,255,.25)}.metrics-grid>div:first-child{border-left:0}.metrics-grid strong{display:block;color:#fff;font-family:Manrope,sans-serif;font-size:28px;line-height:1.1;margin-bottom:3px}.metrics-grid span{display:block;font-family:Manrope,sans-serif;font-size:13px;font-weight:700}.metrics-grid small{color:#afc6ff;font-size:11px}
/* Cards and sections */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.step-card{min-height:240px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.2s}.step-card:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow-md)}.step-top{display:flex;justify-content:space-between;align-items:center;color:#9aa4b2}.step-number{width:40px;height:40px;display:grid;place-items:center;background:#dde9ff;color:var(--primary);font-family:Manrope,sans-serif;font-weight:800;border-radius:5px}.step-card h3{margin:18px 0 8px;font-size:18px}.step-card p{color:#5d697b;font-size:14px;flex:1}.step-card small{border-top:1px solid var(--line);padding-top:10px;color:#8590a0;font-family:Manrope,sans-serif;font-size:9px;font-weight:800;letter-spacing:.1em}.step-featured{grid-column:span 2;background:var(--primary);color:#fff;border-color:var(--primary)}.step-featured h3{color:#fff}.step-featured p{color:#c9d7f5}.step-featured .step-number{background:#ffdf98}.step-featured .step-top>.material-symbols-outlined{color:#ffdf98}.step-featured small{color:#ffdf98;border-color:#2b4679}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card,.project-card,.content-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s}.service-card:hover,.project-card:hover,.content-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}.card-image,.project-image,.content-thumb{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;background:#e6eeff}.card-image img,.project-image img,.content-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.service-card:hover .card-image img,.project-card:hover .project-image img{transform:scale(1.035)}.card-body,.project-body,.content-card-body{padding:20px}.card-body h3,.project-body h3,.content-card-body h2{font-size:20px;margin-bottom:8px}.card-body p,.project-body p,.content-card-body p{color:#5c6879;font-size:14px}.service-icon-card{min-height:300px;padding-top:20px}.service-icon{width:56px;height:56px;margin:18px 20px 2px;display:grid;place-items:center;background:#eff4ff;color:var(--secondary);border-radius:8px}.service-icon .material-symbols-outlined{font-size:30px}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-image{aspect-ratio:4/3}.project-image>span{position:absolute;left:12px;bottom:12px;background:rgba(0,22,61,.9);color:#fff;padding:5px 9px;border-radius:4px;font-family:Manrope,sans-serif;font-size:9px;font-weight:800;letter-spacing:.08em}.project-meta{display:flex;justify-content:space-between;gap:10px;color:#7d8796;font-family:Manrope,sans-serif;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}.project-status{border-top:1px solid var(--line);padding-top:11px;margin-top:14px;color:#1f8e51;font-weight:700;font-size:12px;display:flex;align-items:center;gap:5px}.project-status .material-symbols-outlined{font-size:17px}
/* Mission */
.mission-section{background:var(--primary);color:#fff;padding:86px 0;overflow:hidden}.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.mission-copy h2{color:#fff}.mission-panel{background:rgba(15,43,92,.72);border:1px solid rgba(112,140,253,.15);padding:18px 20px;border-radius:7px;margin-top:13px}.mission-panel small{font-family:Manrope,sans-serif;color:#ffdf98;font-size:9px;font-weight:800;letter-spacing:.1em}.mission-panel p{color:#d3def6;margin:5px 0 0}.mission-visual{position:relative;border:4px solid rgba(255,255,255,.95);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg);min-height:410px}.mission-visual img{width:100%;height:100%;min-height:410px;object-fit:cover}.mission-visual:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,22,61,.88))}.mission-image-caption{position:absolute;z-index:2;left:22px;right:22px;bottom:20px;display:flex;flex-direction:column}.mission-image-caption small{font-size:9px;color:#ffdf98;font-weight:800;letter-spacing:.1em}.mission-image-caption strong{font-family:Manrope,sans-serif;font-size:18px;color:#fff}
/* Testimonials / team */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.testimonial-card{position:relative;margin:0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 22px 18px 25px;box-shadow:var(--shadow-sm);overflow:hidden}.testimonial-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gold)}.stars{color:#d97706;letter-spacing:2px;font-size:15px}.testimonial-card>p{margin:12px 0 20px;color:#465266;font-style:italic}.testimonial-card footer{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column}.testimonial-card footer strong{font-family:Manrope,sans-serif;color:var(--primary)}.testimonial-card footer span{font-size:12px;color:var(--muted)}.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.team-card{text-align:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 16px;box-shadow:var(--shadow-sm)}.team-photo{margin:0 auto 14px;width:80px;height:80px;border-radius:50%;background:#eff4ff;display:grid;place-items:center;overflow:hidden;color:var(--primary)}.team-photo img{width:100%;height:100%;object-fit:cover}.team-photo .material-symbols-outlined{font-size:34px}.team-card small{display:block;color:var(--secondary);font-family:Manrope,sans-serif;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.team-card h3{font-size:17px;margin:6px 0}.team-card p{font-size:12px;color:var(--muted);margin:0}
/* Packages */
.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}.package-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px;box-shadow:var(--shadow-sm)}.package-card>small{font-family:Manrope,sans-serif;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.package-card h3{font-size:25px;margin:8px 0 12px}.package-card p,.package-copy{color:#5d697a}.package-card .btn{margin-top:auto}.package-featured{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-8px)}.package-featured h3{color:#fff}.package-featured>small{color:#ffdf98}.package-featured p,.package-featured .package-copy{color:#c9d7f5}
/* Inquiry */
.inquiry-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,5fr);gap:28px}.inquiry-panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px;box-shadow:var(--shadow-md)}.inquiry-panel h2{margin-bottom:10px}.nara-whatsapp-form{display:flex;flex-direction:column;gap:15px;margin-top:24px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.nara-whatsapp-form label{display:flex;flex-direction:column;gap:6px;color:#334155;font-weight:700;font-size:13px}.nara-whatsapp-form input,.nara-whatsapp-form select,.nara-whatsapp-form textarea{width:100%;border:1px solid var(--line-strong);background:#fff;border-radius:5px;padding:11px 12px;color:var(--text);outline:0}.nara-whatsapp-form input:focus,.nara-whatsapp-form select:focus,.nara-whatsapp-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,43,92,.1)}.form-note{font-size:11px;color:#7c8795;margin:0}.contact-panel{background:var(--primary);color:#fff;border-radius:10px;padding:32px;box-shadow:var(--shadow-md)}.contact-panel h3{color:#fff;font-size:27px}.contact-panel ul{list-style:none;margin:24px 0 28px;padding:0;display:flex;flex-direction:column;gap:16px}.contact-panel li{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(175,198,255,.16)}.contact-panel li>.material-symbols-outlined{color:#ffdf98;margin-top:3px}.contact-panel li div{display:flex;flex-direction:column}.contact-panel li small{color:#afc6ff;font-size:10px;text-transform:uppercase;letter-spacing:.07em}.contact-panel li strong{color:#fff;font-size:14px}
/* Generic content */
.page-main{padding:68px 0 90px;min-height:60vh}.content-shell{max-width:1180px}.page-reading-width{max-width:900px}.page-hero-small{padding:30px 0 34px;border-bottom:1px solid var(--line);margin-bottom:32px}.page-hero-small h1{font-size:clamp(36px,5vw,58px)}.page-featured{margin-bottom:34px;border-radius:9px;overflow:hidden}.page-featured img{width:100%;max-height:620px;object-fit:cover}.prose{font-size:17px;line-height:1.75}.prose h2{margin-top:1.6em}.prose h3{margin-top:1.5em}.prose a{color:var(--secondary);text-decoration:underline}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.content-card h2{font-size:20px}.archive-head{max-width:760px}.not-found{text-align:center;padding:80px 0}.not-found .btn{margin-top:12px}.nav-links{display:flex;justify-content:center;gap:8px;margin-top:35px}.nav-links .page-numbers{padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:4px}.nav-links .current{background:var(--primary);color:#fff}
/* Footer */
.site-footer{background:#f0f4fd;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;gap:42px;padding-top:54px;padding-bottom:44px}.footer-brand img{max-width:180px;height:auto;margin-bottom:15px}.footer-brand p{color:#637084;max-width:360px}.footer-wa{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-weight:800}.footer-wa .material-symbols-outlined{color:var(--green)}.site-footer h3{font-size:14px;letter-spacing:.01em;margin-bottom:14px}.footer-menu,.footer-list,.site-footer .nara-menu{display:flex;flex-direction:column;align-items:flex-start;gap:8px;list-style:none;margin:0;padding:0}.footer-menu a,.footer-list a,.site-footer .nara-menu a{padding:0;color:#5c687a;font-size:13px;font-weight:500}.footer-menu a:hover,.footer-list a:hover{color:var(--secondary)}.footer-contact li{display:flex;align-items:flex-start;gap:8px;color:#5c687a;font-size:13px}.footer-contact .material-symbols-outlined{font-size:17px;color:var(--secondary);margin-top:3px}.footer-bottom{border-top:1px solid var(--line);background:#e8effc}.footer-bottom-inner{min-height:56px;display:flex;justify-content:space-between;align-items:center;color:#6f7b8b;font-size:11px}
@media (max-width:1180px){.primary-nav{position:fixed;display:none;top:108px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:18px 20px}.primary-nav.is-open{display:block}.nara-menu{flex-direction:column;align-items:stretch;gap:0}.nara-menu a{padding:11px 0;border-bottom:1px solid #f1f3f7}.menu-toggle{display:flex}.header-whatsapp{display:none}.hero-grid{grid-template-columns:1fr 430px;gap:36px}.services-grid{grid-template-columns:repeat(2,1fr)}.steps-grid{grid-template-columns:repeat(2,1fr)}.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.header-topbar{display:none}.site-header{top:0}.header-main{min-height:70px}.primary-nav{top:70px}.brand-copy small{display:none}.header-quote span:last-child{display:none}.header-quote{width:42px;padding:0}.hero-section{padding:56px 0 72px}.hero-grid{grid-template-columns:1fr;gap:44px}.hero-copy{max-width:none}.hero-visual{min-height:520px;max-width:620px;width:100%;margin-inline:auto}.metrics-grid{grid-template-columns:repeat(2,1fr)}.metrics-grid>div:nth-child(3){border-left:0}.projects-grid,.testimonials-grid,.packages-grid{grid-template-columns:1fr 1fr}.package-card:last-child{grid-column:1/-1}.package-featured{transform:none}.mission-grid,.inquiry-grid{grid-template-columns:1fr}.mission-visual{min-height:360px}.footer-grid{grid-template-columns:1fr 1fr}.content-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.container{width:min(100% - 30px,var(--container))}.section{padding:62px 0}.brand-copy{display:none}.brand img,.brand .custom-logo{height:32px}.header-actions{margin-left:auto}.hero-section{padding-top:44px}.authority-badge{font-size:9px;max-width:100%}.hero-copy h1{font-size:38px}.hero-lead{font-size:16px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%}.hero-trust-grid{grid-template-columns:1fr}.hero-visual{min-height:400px}.hero-main-image{inset:0 0 28px 28px}.hero-secondary-image{width:46%;height:40%}.experience-card{right:-5px;top:16px;padding:9px}.experience-card strong{font-size:14px}.metrics-grid{gap:0}.metrics-grid>div{padding:14px 12px;border-left:0;border-bottom:1px solid rgba(175,198,255,.18)}.metrics-grid strong{font-size:21px}.split-head{align-items:flex-start;flex-direction:column}.steps-grid,.services-grid,.projects-grid,.testimonials-grid,.team-grid,.packages-grid,.content-grid{grid-template-columns:1fr}.step-featured,.package-card:last-child{grid-column:auto}.mission-section{padding:64px 0}.mission-grid{gap:32px}.mission-visual,.mission-visual img{min-height:300px}.form-row{grid-template-columns:1fr}.inquiry-panel,.contact-panel{padding:24px 20px}.footer-grid{grid-template-columns:1fr;gap:28px}.footer-bottom-inner{padding:15px 0;flex-direction:column;align-items:flex-start;gap:5px}.page-main{padding-top:42px}}
.testimonial-quote p{margin:12px 0;color:#465266;font-style:italic}.empty-state{text-align:center;background:#fff;border:1px dashed var(--line-strong);padding:70px 25px;border-radius:8px}.empty-state .material-symbols-outlined{font-size:46px;color:var(--secondary)}.empty-state h2{font-size:26px;margin:14px 0 8px}.empty-state p{color:var(--muted)}.page-numbers{list-style:none;display:flex;justify-content:center;gap:7px;margin:32px 0 0;padding:0}.page-numbers a,.page-numbers span{display:block;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:4px}.page-numbers .current{background:var(--primary);color:#fff}
/* =========================================
   V4 - WHY CHOOSE NARA
========================================= */

.why-nara-section{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(55,85,195,.18), transparent 32%),
        radial-gradient(circle at 85% 85%, rgba(197,155,39,.08), transparent 28%),
        #00163d;
    color:#fff;
    padding:92px 0;
}

.why-nara-section .section-head{
    max-width:820px;
}

.why-nara-section .section-head h2{
    color:#fff;
}

.why-nara-section .section-head > p:last-child{
    color:#cbd8f1;
}

.why-nara-section .eyebrow{
    color:#ffdf98;
}

.why-nara-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
    margin-top:42px;
}

.why-card{
    position:relative;
    min-height:210px;
    padding:24px 20px;
    border:1px solid rgba(175,198,255,.16);
    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            rgba(15,43,92,.88),
            rgba(15,43,92,.66)
        );

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.why-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,223,152,.34);

    background:
        linear-gradient(
            180deg,
            rgba(24,55,109,.96),
            rgba(15,43,92,.78)
        );

    box-shadow:0 16px 34px rgba(0,0,0,.14);
}

.why-card .material-symbols-outlined{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    margin-bottom:17px;

    border-radius:9px;

    background:rgba(255,255,255,.08);

    color:#ffdf98;

    font-size:27px;
}

.why-card h3{
    color:#fff;
    font-size:18px;
    line-height:1.3;
    margin:0 0 9px;
}

.why-card p{
    color:#cbd8f1;
    font-size:13px;
    line-height:1.65;
    margin:0;
}


/* TABLET */

@media (max-width:1180px){

    .why-nara-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


/* SMALL TABLET */

@media (max-width:900px){

    .why-nara-section{
        padding:76px 0;
    }

    .why-nara-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* MOBILE */

@media (max-width:640px){

    .why-nara-section{
        padding:62px 0;
    }

    .why-nara-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .why-card{
        min-height:0;
        padding:20px 18px;
    }

}
/* GOOGLE REVIEWS BUTTON */

.google-reviews-cta{
    display:flex;
    justify-content:center;
    margin-top:36px;
}

.google-review-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:50px;
    padding:12px 22px;

    background:#fff;
    color:#00163d;

    border:1px solid #d7e0ee;
    border-radius:8px;

    font-family:Manrope,sans-serif;
    font-size:14px;
    font-weight:700;

    box-shadow:
        0 6px 20px rgba(15,43,92,.08);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.google-review-btn:hover{
    transform:translateY(-2px);
    border-color:#3755c3;

    box-shadow:
        0 12px 28px rgba(15,43,92,.14);
}

.google-g{
    display:grid;
    place-items:center;

    width:30px;
    height:30px;

    border-radius:50%;

    background:#f8f9ff;

    color:#4285f4;

    font-family:Arial,sans-serif;
    font-size:21px;
    font-weight:700;
}

.google-review-btn .material-symbols-outlined{
    font-size:18px;
    color:#64748b;
}

@media(max-width:640px){

    .google-review-btn{
        width:100%;
        max-width:350px;
    }

}
/* =========================================
   V4 TEAM SLIDER
========================================= */

.team-home-section{
    overflow:hidden;
}

.team-slider-wrap{
    position:relative;
    padding:0 52px;
}

.team-slider{
    display:grid;
    grid-auto-flow:column;

    grid-auto-columns:
        calc((100% - 54px) / 4);

    gap:18px;

    overflow-x:auto;

    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    padding:4px 2px 18px;
}

.team-slider::-webkit-scrollbar{
    display:none;
}


/* TEAM CARD */

.team-slider .team-card{
    scroll-snap-align:start;

    padding:0;

    text-align:left;

    overflow:hidden;

    background:#fff;

    border:1px solid var(--line);
    border-radius:10px;

    box-shadow:var(--shadow-sm);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.team-slider .team-card:hover{
    transform:translateY(-4px);

    border-color:var(--line-strong);

    box-shadow:var(--shadow-md);
}


/* STAFF PHOTO */

.team-slider .team-photo{
    width:100%;
    aspect-ratio:1 / 1;
    margin:0;
    border-radius:0;
    background:#e8eef9;
    overflow:hidden;
}

.team-slider .team-photo img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center top;

    transition:transform .45s ease;
}

.team-slider .team-card:hover .team-photo img{
    transform:scale(1.025);
}

.team-slider .team-photo
.material-symbols-outlined{
    width:100%;
    height:100%;

    display:grid;
    place-items:center;

    font-size:60px;

    color:#3755c3;
}


/* MEMBER DETAILS */

.team-member-content{
    padding:18px 18px 20px;
}

.team-member-content small{
    display:block;

    color:var(--secondary);

    font-family:Manrope,sans-serif;

    font-size:10px;
    font-weight:800;

    line-height:1.4;

    letter-spacing:.07em;
    text-transform:uppercase;
}

.team-member-content h3{
    margin:7px 0 6px;

    font-size:18px;
    line-height:1.3;
}

.team-member-content p{
    margin:0;

    color:var(--muted);

    font-size:13px;
    line-height:1.55;
}


/* SLIDER ARROWS */

.team-slider-arrow{
    position:absolute;

    top:42%;

    z-index:5;

    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:1px solid var(--line);

    border-radius:50%;

    background:#fff;
    color:var(--primary);

    box-shadow:var(--shadow-md);

    cursor:pointer;

    transition:.2s ease;
}

.team-slider-arrow:hover{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.team-slider-prev{
    left:0;
}

.team-slider-next{
    right:0;
}


/* DOTS */

.team-slider-dots{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:7px;

    margin-top:12px;
}

.team-slider-dot{
    width:7px;
    height:7px;

    padding:0;

    border:0;
    border-radius:50%;

    background:#cbd5e1;

    cursor:pointer;

    transition:.2s ease;
}

.team-slider-dot.active{
    width:22px;

    border-radius:20px;

    background:var(--secondary);
}


/* VIEW FULL TEAM */

.team-section-actions{
    display:flex;
    justify-content:center;

    margin-top:30px;
}


/* TABLET */

@media(max-width:900px){

    .team-slider{
        grid-auto-columns:
            calc((100% - 18px) / 2);
    }

}


/* MOBILE */

@media(max-width:640px){

    .team-slider-wrap{
        padding:0 8px;
    }

    .team-slider{
        grid-auto-columns:100%;
        gap:14px;
    }

    .team-slider-arrow{
        width:38px;
        height:38px;

        top:40%;
    }

    .team-slider-prev{
        left:-5px;
    }

    .team-slider-next{
        right:-5px;
    }

}
/* FIX TEAM PHOTOS - SQUARE */

.team-slider .team-photo{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;

    margin:0;
    border-radius:0;

    background:#e8eef9;
    overflow:hidden;
}

.team-slider .team-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center top;
}
/* =========================================
   V4 PACKAGES
========================================= */

.package-inclusions{
    list-style:none;
    margin:18px 0 28px;
    padding:0;

    display:flex;
    flex-direction:column;
    gap:10px;
}

.package-inclusions li{
    display:flex;
    align-items:flex-start;
    gap:9px;

    color:#526074;

    font-size:13px;
    line-height:1.45;
}

.package-inclusions .material-symbols-outlined{
    flex:0 0 auto;

    color:var(--secondary);

    font-size:18px;

    margin-top:1px;
}


/* FEATURED PACKAGE */

.package-featured{
    position:relative;
}

.package-featured .package-inclusions li{
    color:#d3def6;
}

.package-featured
.package-inclusions
.material-symbols-outlined{
    color:#ffdf98;
}


.package-badge{
    position:absolute;

    top:-13px;
    right:20px;

    padding:6px 11px;

    border-radius:20px;

    background:#ffdf98;
    color:#251a00;

    font-family:Manrope,sans-serif;

    font-size:9px;
    font-weight:800;

    letter-spacing:.08em;
}


/* BOTTOM LINK */

.packages-footer{
    display:flex;
    justify-content:center;

    margin-top:34px;
}


/* MOBILE */

@media(max-width:900px){

    .package-card{
        padding:24px;
    }

}

@media(max-width:640px){

    .package-card{
        padding:24px 20px;
    }

    .package-badge{
        right:15px;
    }

}.package-inclusions{
    list-style:none;
    margin:18px 0 28px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.package-inclusions li{
    display:flex;
    align-items:flex-start;
    gap:9px;
    font-size:13px;
    line-height:1.45;
}

.package-inclusions li span{
    flex:0 0 auto;
    width:20px;
    font-size:16px;
    font-weight:800;
    line-height:1.2;
}

.package-inclusions .included{
    color:#526074;
}

.package-inclusions .included span{
    color:#18864b;
}

.package-inclusions .not-included{
    color:#9aa4b2;
}

.package-inclusions .not-included span{
    color:#c62828;
}


/* FEATURED PACKAGE C */

.package-featured .package-inclusions .included{
    color:#d3def6;
}

.package-featured .package-inclusions .included span{
    color:#ffdf98;
}

.package-featured .package-inclusions .not-included{
    color:#8fa1c3;
}

.package-featured .package-inclusions .not-included span{
    color:#ff8d8d;
}
/* =========================================
   V4 EDITORIAL SERVICES
========================================= */

.services-editorial{
    position:relative;
    overflow:hidden;
    background:#f8f9ff;
}

.services-editorial::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.025;

    background-image:
        linear-gradient(
            to right,
            #00163d 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            #00163d 1px,
            transparent 1px
        );

    background-size:42px 42px;
}


.services-editorial-grid{
    position:relative;

    display:grid;

    grid-template-columns:
        minmax(300px,.8fr)
        minmax(0,1.7fr);

    gap:80px;

    align-items:start;
}


/* LEFT */

.services-editorial-intro{
    position:sticky;
    top:150px;
}

.services-editorial-intro h2{
    max-width:430px;
    margin-bottom:20px;
}

.services-editorial-lead{
    max-width:450px;

    margin-bottom:28px;

    color:#596679;

    font-size:16px;
    line-height:1.75;
}


/* RIGHT */

.services-editorial-list{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    column-gap:40px;
}


.service-editorial-item{
    position:relative;

    display:grid;

    grid-template-columns:48px 1fr;

    gap:17px;

    min-height:205px;

    padding:28px 6px 28px 0;

    border-top:1px solid var(--line);

    transition:
        border-color .25s ease;
}


.service-editorial-item:hover{
    border-color:var(--secondary);
}


/* NUMBER */

.service-editorial-number{
    padding-top:3px;

    color:#9aa8ba;

    font-family:Manrope,sans-serif;

    font-size:12px;
    font-weight:800;

    letter-spacing:.08em;

    transition:
        color .25s ease;
}


.service-editorial-item:hover
.service-editorial-number{
    color:var(--secondary);
}


/* TEXT */

.service-editorial-content h3{
    margin:0 0 9px;

    font-size:20px;
    line-height:1.3;
}


.service-editorial-content h3 a{
    transition:color .2s ease;
}


.service-editorial-content h3 a:hover{
    color:var(--secondary);
}


.service-editorial-content p{
    max-width:430px;

    margin:0 0 17px;

    color:#667386;

    font-size:14px;
    line-height:1.65;
}


/* LINK */

.service-editorial-link{
    display:inline-flex;

    align-items:center;

    gap:6px;

    color:var(--secondary);

    font-family:Manrope,sans-serif;

    font-size:12px;
    font-weight:800;

    transition:
        gap .2s ease,
        color .2s ease;
}


.service-editorial-link
.material-symbols-outlined{
    font-size:17px;
}


.service-editorial-link:hover{
    gap:10px;

    color:var(--primary);
}


/* TABLET */

@media(max-width:1000px){

    .services-editorial-grid{
        grid-template-columns:1fr;

        gap:45px;
    }

    .services-editorial-intro{
        position:static;

        max-width:700px;
    }

}


/* MOBILE */

@media(max-width:700px){

    .services-editorial-list{
        grid-template-columns:1fr;
    }

    .service-editorial-item{
        min-height:0;

        padding:23px 0;

        grid-template-columns:38px 1fr;
    }

    .services-editorial-intro h2{
        max-width:none;
    }

}
/* =========================================
   V4 HEADER
========================================= */

.header-topbar{
    background:#00163d;
    color:#fff;
    font-size:10px;
}

.topbar-inner{
    min-height:28px;
}

.header-main{
    min-height:82px;
    gap:24px;
}


/* BRAND */

.header-brand{
    display:flex;
    align-items:center;
    gap:11px;
    flex:0 0 auto;
}

.brand-logo{
    display:flex;
    align-items:center;
}

.nara-header-logo{
    display:block;
    width:auto;
    height:46px;
    max-width:155px;
    object-fit:contain;
}

.brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.brand-copy strong{
    color:#00163d;
    font-family:Manrope,sans-serif;
    font-size:14px;
    font-weight:800;
}

.brand-copy small{
    margin-top:4px;

    color:#64748b;

    font-family:Manrope,sans-serif;

    font-size:9px;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;
}


/* NAV */

.primary-nav{
    margin-left:auto;
}

.nara-menu{
    display:flex;
    align-items:center;
    gap:22px;

    margin:0;
    padding:0;

    list-style:none;
}

.nara-menu > li{
    position:relative;
}

.nara-menu > li > a{
    display:flex;
    align-items:center;

    min-height:82px;

    padding:0;

    color:#445066;

    font-family:Manrope,sans-serif;

    font-size:13px;
    font-weight:700;

    white-space:nowrap;
}

.nara-menu > li > a:hover,
.nara-menu > .current-menu-item > a,
.nara-menu > .current-menu-ancestor > a{
    color:#3755c3;
}


/* DROPDOWN */

.nara-menu .sub-menu{
    position:absolute;

    top:calc(100% - 8px);
    left:-18px;

    z-index:200;

    min-width:245px;

    margin:0;
    padding:10px;

    list-style:none;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:8px;

    box-shadow:
        0 18px 40px rgba(15,43,92,.14);

    opacity:0;
    visibility:hidden;

    transform:translateY(7px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

.nara-menu li:hover > .sub-menu,
.nara-menu li:focus-within > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.nara-menu .sub-menu a{
    display:block;

    padding:10px 12px;

    border-radius:5px;

    color:#475569;

    font-size:13px;
    font-weight:600;
}

.nara-menu .sub-menu a:hover{
    background:#f1f5ff;
    color:#3755c3;
}


/* ACTIONS */

.header-actions{
    display:flex;
    align-items:center;
    gap:9px;

    flex:0 0 auto;
}

.header-whatsapp{
    display:flex;
    align-items:center;
    gap:7px;

    min-height:42px;

    padding:0 13px;

    background:#f0f5ff;

    border:1px solid #e2e8f0;
    border-radius:6px;

    color:#00163d;

    font-size:12px;
    font-weight:800;
}

.header-whatsapp
.material-symbols-outlined{
    color:#25d366;
    font-size:19px;
}

.header-quote{
    min-height:42px;

    padding:0 15px;

    white-space:nowrap;

    font-size:12px;
}


/* TABLET / SMALL LAPTOP */

@media(max-width:1250px){

    .brand-copy{
        display:none;
    }

    .nara-menu{
        gap:16px;
    }

    .nara-menu > li > a{
        font-size:12px;
    }

    .header-whatsapp span:last-child{
        display:none;
    }

    .header-whatsapp{
        width:42px;
        padding:0;
        justify-content:center;
    }

}


/* MOBILE NAV */

@media(max-width:1050px){

    .menu-toggle{
        display:flex;
    }

    .primary-nav{
        position:fixed;

        display:none;

        top:110px;
        left:0;
        right:0;

        background:#fff;

        border-bottom:1px solid var(--line);

        box-shadow:var(--shadow-lg);

        padding:16px 20px;
    }

    .primary-nav.is-open{
        display:block;
    }

    .nara-menu{
        flex-direction:column;
        align-items:stretch;

        gap:0;
    }

    .nara-menu > li > a{
        min-height:auto;

        padding:12px 0;

        border-bottom:1px solid #eef2f7;
    }

    .nara-menu .sub-menu{
        position:static;

        display:block;

        min-width:0;

        padding:0 0 5px 15px;

        border:0;
        box-shadow:none;

        opacity:1;
        visibility:visible;

        transform:none;
    }

    .nara-menu .sub-menu a{
        padding:9px 0;
    }

}


/* MOBILE */

@media(max-width:640px){

    .header-topbar{
        display:none;
    }

    .header-main{
        min-height:68px;
    }

    .nara-header-logo{
        height:38px;
    }

    .header-quote span:last-child{
        display:none;
    }

    .header-quote{
        width:42px;

        padding:0;

        justify-content:center;
    }

    .header-whatsapp{
        display:none;
    }

    .primary-nav{
        top:68px;
    }

}
/* PROJECT VIDEO LINK */

.project-video-link{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-top:17px;

    color:#3755c3;

    font-family:Manrope,sans-serif;
    font-size:12px;
    font-weight:800;

    transition:
        gap .2s ease,
        color .2s ease;
}

.project-video-link .material-symbols-outlined{
    font-size:20px;
}

.project-video-link:hover{
    gap:10px;
    color:#00163d;
}
.project-video-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    margin-top:15px;
    padding:11px 14px;

    background:#00163d;
    border-radius:5px;

    color:#fff;
    font-family:Manrope,sans-serif;
    font-size:12px;
    font-weight:800;

    transition:.2s ease;
}

.project-video-link .material-symbols-outlined{
    font-size:19px;
}

.project-video-link:hover{
    background:#3755c3;
    color:#fff;
    transform:translateY(-1px);
}

/* =========================================================
   NARA MISSION & VISION
========================================================= */

.mission-vision-section{
    padding:70px 0;
    background:#f8f9ff;
}

.mission-vision-header{
    max-width:760px;
    margin-bottom:32px;
}

.mission-vision-header .eyebrow{
    margin-bottom:10px;
}

.mission-vision-header h2{
    margin:0;
    color:#00163d;
    font-size:clamp(32px,3.5vw,48px);
    line-height:1.08;
}

.mission-vision-subtitle{
    margin-top:16px;
    color:#667085;
    font-size:16px;
    font-weight:600;
}

.mission-vision-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.mission-vision-card{
    position:relative;
    padding:34px 38px;

    background:#fff;
    border:1px solid #e2e8f3;
    border-radius:10px;

    box-shadow:0 12px 35px rgba(0,22,61,.06);
}

.mv-icon{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin-bottom:25px;

    background:#00163d;
    color:#ffdf98;

    border-radius:8px;
}

.mv-icon .material-symbols-outlined{
    font-size:30px;
}

.mv-label{
    display:block;

    margin-bottom:8px;

    color:#3755c3;
    font-family:Manrope,sans-serif;
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
}

.mission-vision-card h3{
    margin:0 0 18px;

    color:#00163d;
    font-size:27px;
}

.mission-vision-card h4{
    margin:0 0 12px;

    color:#00163d;
    font-size:20px;
}

.mv-english,
.mv-sinhala{
    margin:0;

    color:#4f5d73;
    font-size:15px;
    line-height:1.9;
}

.mv-english strong,
.mv-sinhala strong{
    color:#0f2b5c;
}

.mv-divider{
    width:100%;
    height:1px;

    margin:24px 0;

    background:#e5eaf3;
}

@media(max-width:850px){

    .mission-vision-section{
        padding:65px 0;
    }

    .mission-vision-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .mission-vision-header{
        margin-bottom:32px;
    }

}

@media(max-width:600px){

    .mission-vision-section{
        padding:48px 0;
    }

    .mission-vision-card{
        padding:28px 24px;
    }

    .mission-vision-header h2{
        font-size:34px;
    }

}
/* =========================================================
   FIX TEAM → PACKAGES SPACING
========================================================= */

#team,
.team-section{
    padding-bottom:45px !important;
    margin-bottom:0 !important;
    min-height:auto !important;
}

#packages,
.packages-section{
    padding-top:55px !important;
    margin-top:0 !important;
}

.team-section + .packages-section,
#team + #packages{
    margin-top:0 !important;
}

@media(max-width:768px){

    #team,
    .team-section{
        padding-bottom:32px !important;
    }

    #packages,
    .packages-section{
        padding-top:40px !important;
    }

}

/* =========================================================
   TEAM / PACKAGES COLOUR SEPARATION
========================================================= */

/* Team section */
#team,
.team-section{
    background:#ffffff !important;
    padding-bottom:48px !important;
}

/* Packages section */
#packages,
.packages-section{
    background:#f3f6fc !important;
    padding-top:58px !important;

    border-top:1px solid #e1e7f0;
}

/* Optional subtle architectural accent */
#packages,
.packages-section{
    position:relative;
}

#packages::before,
.packages-section::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);

    width:72px;
    height:3px;

    background:#3755c3;
    border-radius:0 0 3px 3px;
}

@media(max-width:768px){

    #team,
    .team-section{
        padding-bottom:34px !important;
    }

    #packages,
    .packages-section{
        padding-top:44px !important;
    }

}
/* =========================================================
   CONTACT SIDE + MAP
========================================================= */

.contact-side{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-map-card{
    position:relative;
    width:100%;
    height:235px;

    overflow:hidden;

    background:#fff;
    border:1px solid #dce3ef;
    border-radius:9px;

    box-shadow:0 8px 25px rgba(0,22,61,.06);
}

.contact-map-card iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}

.contact-map-caption{
    position:absolute;

    left:14px;
    right:14px;
    bottom:14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    padding:12px 15px;

    background:rgba(0,22,61,.94);

    border:1px solid rgba(255,255,255,.14);
    border-radius:6px;

    color:#fff;

    box-shadow:0 8px 22px rgba(0,0,0,.15);
}

.contact-map-caption:hover{
    color:#fff;
    background:#0f2b5c;
}

.contact-map-caption small{
    display:block;

    margin-bottom:3px;

    color:#ffdf98;

    font-family:Manrope,sans-serif;
    font-size:8px;
    font-weight:800;
    letter-spacing:.11em;
}

.contact-map-caption strong{
    display:block;

    color:#fff;

    font-family:Manrope,sans-serif;
    font-size:12px;
    font-weight:700;
}

.contact-map-caption > .material-symbols-outlined{
    flex:0 0 auto;
    color:#ffdf98;
    font-size:20px;
}

@media(max-width:850px){

    .contact-map-card{
        height:280px;
    }

}

/* =========================================================
   SERVICES SECTION COLOUR SEPARATION
========================================================= */

#services,
.services-section{
    position:relative;
    margin-top:0 !important;
    padding-top:65px !important;
    padding-bottom:70px !important;

    background:#f4f7fc !important;
    border-top:1px solid #e3e9f2;
}

/* subtle blue accent at the top */
#services::before,
.services-section::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);

    width:90px;
    height:3px;

    background:#3755c3;
}

/* keep the grid visible but subtle */
#services,
.services-section{
    background-image:
        linear-gradient(rgba(55,85,195,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55,85,195,.035) 1px, transparent 1px);

    background-size:34px 34px;
    background-color:#f4f7fc !important;
}
/* SERVICES - LEFT INTRO PANEL */

#services .services-intro,
.services-section .services-intro{
    background:#ffffff;
    border:1px solid #e1e7f0;
    border-radius:8px;

    padding:34px 32px;

    box-shadow:0 8px 28px rgba(0,22,61,.05);
}

/* keep service list clean */
#services .services-list,
.services-section .services-list{
    background:transparent;
}

/* slightly stronger service dividers */
#services .service-item,
.services-section .service-item{
    border-top-color:#d9e1ec;
}
/* =========================================================
   SERVICES EDITORIAL - COLOUR SEPARATION
========================================================= */

.services-editorial{
    position:relative;
    background:#f4f7fc !important;
    border-top:1px solid #e1e7f0;

    padding-top:65px !important;
    padding-bottom:70px !important;
}

/* subtle architectural grid */
.services-editorial{
    background-image:
        linear-gradient(rgba(55,85,195,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55,85,195,.035) 1px, transparent 1px);

    background-size:34px 34px;
}

/* small blue accent at top */
.services-editorial::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);

    width:85px;
    height:3px;

    background:#3755c3;
}


/* LEFT INTRO PANEL */

.services-editorial-intro{
    align-self:start;

    background:#ffffff;

    border:1px solid #dfe6f0;
    border-radius:9px;

    padding:36px 34px;

    box-shadow:0 10px 30px rgba(0,22,61,.06);
}

.services-editorial-intro h2{
    color:#00163d;
}

.services-editorial-lead{
    color:#5d6879;
}


/* RIGHT SERVICE LIST */

.services-editorial-list{
    background:transparent;
}

.service-editorial-item{
    border-top:1px solid #d9e1ec;
    padding-top:26px;
    padding-bottom:26px;
}

.service-editorial-item:nth-last-child(-n+2){
    border-bottom:1px solid #d9e1ec;
}

.service-editorial-number{
    color:#91a2bf;
}

.service-editorial-content h3 a{
    color:#00163d;
}

.service-editorial-content h3 a:hover{
    color:#3755c3;
}

.service-editorial-content p{
    color:#667085;
}

.service-editorial-link{
    color:#3755c3;
    font-weight:700;
}


/* MOBILE */

@media(max-width:850px){

    .services-editorial{
        padding-top:48px !important;
        padding-bottom:50px !important;
    }

    .services-editorial-intro{
        padding:28px 24px;
        margin-bottom:14px;
    }

}
/* SERVICES - BALANCE LEFT / RIGHT COLUMNS */

.services-editorial-grid{
    grid-template-columns:minmax(380px, .9fr) 2fr;
    gap:58px;
    align-items:start;
}

.services-editorial-intro{
    padding:38px 36px;
}

.services-editorial-intro h2{
    font-size:42px;
    line-height:1.08;
    letter-spacing:-.03em;
}

@media(max-width:1000px){
    .services-editorial-grid{
        grid-template-columns:1fr;
        gap:34px;
    }

    .services-editorial-intro{
        max-width:none;
    }
}
/* SERVICES LEFT VISUAL */

.services-feature-visual{
    position:relative;
    height:180px;
    margin-bottom:18px;

    overflow:hidden;
    border-radius:9px;

    background:#dfe7f4;
    box-shadow:0 10px 28px rgba(0,22,61,.08);
}

.services-feature-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    transition:transform .6s ease;
}

.services-feature-visual:hover img{
    transform:scale(1.035);
}

.services-feature-visual::after{
    content:"";
    position:absolute;
    inset:35% 0 0;

    background:
        linear-gradient(
            transparent,
            rgba(0,22,61,.88)
        );
}

.services-feature-caption{
    position:absolute;
    z-index:2;

    left:20px;
    right:20px;
    bottom:17px;

    display:flex;
    flex-direction:column;
}

.services-feature-caption small{
    color:#ffdf98;

    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}

.services-feature-caption strong{
    margin-top:3px;

    color:#fff;
    font-family:Manrope,sans-serif;
    font-size:15px;
}

@media(max-width:1000px){

    .services-feature-visual{
        height:230px;
    }

}
.services-feature-visual{
    height:190px;
    margin:-12px -12px 20px;
    border-radius:8px;
}

.services-feature-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================================================
   NARA ARCHITECTURAL SERVICES
========================================================= */

.arch-services{
    position:relative;
    overflow:hidden;

    padding:90px 0;

    background:#f4f6fa;
    border-top:1px solid #dfe5ef;
    border-bottom:1px solid #dfe5ef;
}


/* architectural grid background */

.arch-services::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(0,22,61,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,22,61,.035) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    opacity:.75;
}


.arch-services .container{
    position:relative;
    z-index:2;
}


/* HEADING */

.arch-services-heading{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:70px;

    align-items:end;

    margin-bottom:48px;
}


.arch-services-heading h2{
    margin:8px 0 0;

    max-width:720px;

    color:#00163d;

    font-size:clamp(
        38px,
        4vw,
        58px
    );

    line-height:1.05;

    letter-spacing:-.035em;
}


.arch-services-intro{
    margin:0;

    color:#5f6b7d;

    font-size:15px;
    line-height:1.8;
}


/* MAIN BOARD */

.arch-services-board{
    display:grid;

    grid-template-columns:
        minmax(310px, .75fr)
        minmax(0, 1.7fr);

    min-height:610px;

    background:#fff;

    border:1px solid #ccd6e4;

    box-shadow:
        0 20px 55px
        rgba(0,22,61,.08);
}


/* LEFT INDEX */

.arch-service-index{
    position:relative;

    display:flex;
    flex-direction:column;

    background:#00163d;

    color:#fff;

    border-right:1px solid #203b68;
}


.arch-index-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:22px 26px;

    border-bottom:
        1px solid
        rgba(255,255,255,.13);
}


.arch-index-top span{
    color:#ffdf98;

    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
}


.arch-index-top strong{
    color:#8fa7d5;

    font-size:10px;
    letter-spacing:.12em;
}


/* SERVICE TAB */

.arch-service-tab{
    appearance:none;

    width:100%;

    display:grid;

    grid-template-columns:
        38px
        1fr
        24px;

    gap:12px;

    align-items:center;

    padding:22px 25px;

    text-align:left;

    background:transparent;

    border:0;

    border-bottom:
        1px solid
        rgba(255,255,255,.1);

    cursor:pointer;

    transition:
        background .25s ease,
        padding .25s ease;
}


.arch-service-tab:hover{
    background:
        rgba(255,255,255,.055);
}


.arch-service-tab.is-active{
    background:#0f2b5c;

    box-shadow:
        inset 4px 0 0
        #ffdf98;

    padding-left:30px;
}


.arch-tab-number{
    color:#ffdf98;

    font-family:Manrope,sans-serif;

    font-size:10px;
    font-weight:800;
}


.arch-tab-title{
    color:#fff;

    font-family:Manrope,sans-serif;

    font-size:15px;
    font-weight:700;

    line-height:1.3;
}


.arch-service-tab
.material-symbols-outlined{
    color:#8097c7;

    font-size:18px;

    transition:.2s ease;
}


.arch-service-tab.is-active
.material-symbols-outlined{
    color:#ffdf98;

    transform:translateX(3px);
}


/* INDEX FOOTER */

.arch-index-footer{
    margin-top:auto;

    padding:21px 26px;

    display:flex;
    flex-direction:column;
    gap:5px;

    border-top:
        1px solid
        rgba(255,255,255,.12);
}


.arch-index-footer span:first-child{
    color:#ffdf98;

    font-size:9px;
    font-weight:800;

    letter-spacing:.12em;
}


.arch-index-footer span:last-child{
    color:#90a5cc;

    font-size:8px;

    letter-spacing:.08em;
}


/* RIGHT DESIGN STAGE */

.arch-service-stage{
    position:relative;

    min-width:0;

    overflow:hidden;

    background:#eef3f9;
}


/* blueprint grid */

.arch-stage-grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(55,85,195,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(55,85,195,.06) 1px,
            transparent 1px
        );

    background-size:32px 32px;
}


/* coordinates */

.arch-coordinate{
    position:absolute;

    z-index:8;

    display:grid;
    place-items:center;

    width:28px;
    height:28px;

    background:#fff;

    border:1px solid #cbd5e3;

    color:#3755c3;

    font-size:9px;
    font-weight:800;
}


.arch-coordinate-top{
    top:14px;
    right:14px;
}


.arch-coordinate-side{
    bottom:14px;
    left:14px;
}


/* PANEL */

.arch-service-panel{
    position:absolute;

    inset:0;

    display:grid;

    grid-template-rows:
        minmax(320px,1fr)
        auto
        auto;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.arch-service-panel.is-active{
    position:relative;

    opacity:1;
    visibility:visible;

    transform:none;
}


/* IMAGE */

.arch-service-image{
    position:relative;

    min-height:340px;

    overflow:hidden;

    background:#dce4ef;
}


.arch-service-image img{
    width:100%;
    height:100%;

    min-height:340px;

    display:block;

    object-fit:cover;

    transition:
        transform .8s ease;
}


.arch-service-panel.is-active
.arch-service-image img{
    transform:scale(1.02);
}


.arch-image-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,22,61,.03),
            rgba(0,22,61,.5)
        );
}


.arch-image-label{
    position:absolute;

    left:28px;
    bottom:24px;

    display:flex;
    flex-direction:column;

    padding-left:13px;

    border-left:2px solid #ffdf98;
}


.arch-image-label small{
    color:#ffdf98;

    font-size:8px;
    font-weight:800;

    letter-spacing:.14em;
}


.arch-image-label strong{
    margin-top:3px;

    color:#fff;

    font-family:Manrope,sans-serif;

    font-size:14px;
}


/* DETAIL AREA */

.arch-service-detail{
    position:relative;

    display:grid;

    grid-template-columns:
        105px
        1fr;

    gap:28px;

    padding:30px 34px;

    background:#fff;

    border-top:1px solid #d7dfeb;
}


.arch-detail-code{
    border-right:1px solid #dce3ec;
}


.arch-detail-code span{
    display:block;

    color:#3755c3;

    font-family:Manrope,sans-serif;

    font-size:35px;

    font-weight:700;

    line-height:1;
}


.arch-detail-code small{
    display:block;

    margin-top:9px;

    color:#8b98aa;

    font-size:8px;

    font-weight:800;

    letter-spacing:.1em;
}


.arch-detail-content h3{
    margin:0 0 8px;

    color:#00163d;

    font-size:27px;
}


.arch-detail-content p{
    max-width:650px;

    margin:0 0 17px;

    color:#5f6c7d;

    font-size:14px;

    line-height:1.75;
}


.arch-service-link{
    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#3755c3;

    font-size:12px;
    font-weight:800;
}


.arch-service-link
.material-symbols-outlined{
    font-size:18px;
}


/* TECHNICAL STRIP */

.arch-drawing-strip{
    display:flex;
    flex-wrap:wrap;

    gap:0;

    background:#00163d;

    border-top:1px solid #20365f;
}


.arch-drawing-strip span{
    flex:1;

    min-width:100px;

    padding:11px 10px;

    text-align:center;

    color:#8fa6cf;

    font-size:8px;

    font-weight:800;

    letter-spacing:.09em;

    border-right:
        1px solid
        rgba(255,255,255,.08);
}


.arch-drawing-strip span:last-child{
    border-right:0;
}


/* TABLET */

@media(max-width:1000px){

    .arch-services-heading{
        grid-template-columns:1fr;

        gap:20px;
    }

    .arch-services-intro{
        max-width:700px;
    }


    .arch-services-board{
        grid-template-columns:1fr;
    }


    .arch-service-index{
        display:block;

        overflow-x:auto;

        white-space:nowrap;
    }


    .arch-index-top,
    .arch-index-footer{
        display:none;
    }


    .arch-service-tab{
        width:auto;

        display:inline-grid;

        grid-template-columns:32px auto;

        min-width:220px;

        border-right:
            1px solid
            rgba(255,255,255,.1);

        border-bottom:0;
    }


    .arch-service-tab
    .material-symbols-outlined{
        display:none;
    }


    .arch-service-tab.is-active{
        box-shadow:
            inset 0 -3px 0
            #ffdf98;
    }

}


/* MOBILE */

@media(max-width:650px){

    .arch-services{
        padding:55px 0;
    }


    .arch-services-heading{
        margin-bottom:28px;
    }


    .arch-services-heading h2{
        font-size:36px;
    }


    .arch-service-image,
    .arch-service-image img{
        min-height:260px;
    }


    .arch-service-detail{
        grid-template-columns:1fr;

        gap:16px;

        padding:24px 22px;
    }


    .arch-detail-code{
        display:flex;

        align-items:center;

        gap:12px;

        padding-bottom:14px;

        border-right:0;

        border-bottom:1px solid #dce3ec;
    }


    .arch-detail-code span{
        font-size:27px;
    }


    .arch-detail-code small{
        margin:0;
    }


    .arch-detail-content h3{
        font-size:23px;
    }


    .arch-drawing-strip{
        display:none;
    }

}

/* =========================================================
   SERVICES BOARD - COMPACT DESKTOP HEIGHT
========================================================= */

.arch-services{
    padding:55px 0 !important;
}

.arch-services-heading{
    margin-bottom:30px !important;
}

.arch-services-board{
    min-height:0 !important;
}

.arch-service-tab{
    padding:15px 22px !important;
}

.arch-service-image{
    min-height:260px !important;
}

.arch-service-image img{
    min-height:260px !important;
    height:260px !important;
}

.arch-service-detail{
    padding:20px 28px !important;
}

.arch-detail-content h3{
    font-size:23px !important;
}

.arch-detail-content p{
    margin-bottom:12px !important;
    line-height:1.6 !important;
}

.arch-drawing-strip span{
    padding:8px 8px !important;
}

.arch-index-top{
    padding:16px 22px !important;
}

.arch-index-footer{
    padding:14px 22px !important;
}
.arch-services-heading h2{
    font-size:clamp(34px,3.4vw,50px) !important;
}
/* =========================================================
   SERVICES - ARCHITECTURAL MAGIC
========================================================= */

/* Remove the parts making it feel busy */
.arch-coordinate,
.arch-drawing-strip,
.arch-index-footer{
    display:none !important;
}


/* Cleaner left panel */
.arch-service-index{
    background:#00163d;
}

.arch-service-tab{
    position:relative;
    padding:18px 22px !important;

    transition:
        background .3s ease,
        padding-left .3s ease;
}


/* Active service */
.arch-service-tab.is-active{
    background:#102e61;
    padding-left:30px !important;

    box-shadow:none;
}


/* animated gold blueprint rail */
.arch-service-tab::before{
    content:"";

    position:absolute;
    left:0;
    top:50%;

    width:3px;
    height:0;

    transform:translateY(-50%);

    background:#ffdf98;

    transition:height .35s ease;
}

.arch-service-tab.is-active::before{
    height:62%;
}


/* number */
.arch-tab-number{
    transition:
        color .3s ease,
        transform .3s ease;
}

.arch-service-tab.is-active .arch-tab-number{
    color:#ffdf98;
    transform:translateX(3px);
}


/* arrow animation */
.arch-service-tab .material-symbols-outlined{
    transition:
        transform .3s ease,
        color .3s ease;
}

.arch-service-tab:hover .material-symbols-outlined,
.arch-service-tab.is-active .material-symbols-outlined{
    transform:translateX(5px);
    color:#ffdf98;
}


/* =========================================================
   RIGHT PANEL REVEAL
========================================================= */

.arch-service-stage{
    position:relative;
    overflow:hidden;
}


/* animated architectural sweep line */
.arch-service-stage::after{
    content:"";

    position:absolute;
    z-index:20;

    top:0;
    bottom:0;
    left:-2px;

    width:2px;

    opacity:0;

    pointer-events:none;

    background:linear-gradient(
        to bottom,
        transparent,
        #ffdf98 30%,
        #3755c3 65%,
        transparent
    );
}


/* Triggered by JavaScript */
.arch-service-stage.is-switching::after{
    animation:serviceBlueprintSweep .65s ease;
}

@keyframes serviceBlueprintSweep{

    0%{
        left:0;
        opacity:0;
    }

    15%{
        opacity:.9;
    }

    85%{
        opacity:.65;
    }

    100%{
        left:100%;
        opacity:0;
    }

}


/* panel fade */
.arch-service-panel{
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.arch-service-panel.is-active{
    animation:servicePanelReveal .45s ease both;
}

@keyframes servicePanelReveal{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


/* image reveal */
.arch-service-panel.is-active .arch-service-image img{
    animation:serviceImageReveal .9s ease both;
}

@keyframes serviceImageReveal{

    from{
        opacity:.65;
        transform:scale(1.045);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}


/* Detail area cleaner */
.arch-service-detail{
    padding:20px 28px !important;
}

.arch-detail-code span{
    color:#3755c3;
}

.arch-service-link{
    position:relative;
}

.arch-service-link::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-4px;

    width:0;
    height:1px;

    background:#3755c3;

    transition:width .3s ease;
}

.arch-service-link:hover::after{
    width:100%;
}


/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){

    .arch-service-stage::after,
    .arch-service-panel.is-active,
    .arch-service-panel.is-active .arch-service-image img{
        animation:none !important;
    }

}

/* =========================================================
   SERVICES - MOBILE SIMPLE MODE
========================================================= */

.arch-service-mobile-select{
    display:none;
}

@media(max-width:768px){

    .arch-services{
        padding:42px 0 !important;
    }

    .arch-services-heading{
        display:block !important;
        margin-bottom:24px !important;
    }

    .arch-services-heading h2{
        font-size:34px !important;
        line-height:1.08 !important;
    }

    .arch-services-intro{
        margin-top:14px;
        font-size:14px;
        line-height:1.65;
    }


    /* Mobile selector */

    .arch-service-mobile-select{
        display:block;
        margin-bottom:14px;

        padding:15px 16px;

        background:#00163d;

        border-radius:7px 7px 0 0;
    }

    .arch-service-mobile-select label{
        display:block;

        margin-bottom:8px;

        color:#ffdf98;

        font-family:Manrope,sans-serif;
        font-size:9px;
        font-weight:800;
        letter-spacing:.12em;
    }

    .arch-service-mobile-select select{
        width:100%;

        padding:12px 40px 12px 13px;

        background:#fff;
        color:#00163d;

        border:0;
        border-radius:5px;

        font-family:Manrope,sans-serif;
        font-size:14px;
        font-weight:700;
    }


    /* Hide desktop service index */

    .arch-service-index{
        display:none !important;
    }


    /* Single column */

    .arch-services-board{
        display:block !important;
        min-height:0 !important;

        border-radius:0 0 7px 7px;
        overflow:hidden;
    }

    .arch-service-stage{
        width:100%;
    }


    /* Smaller image */

    .arch-service-image,
    .arch-service-image img{
        height:220px !important;
        min-height:220px !important;
    }


    /* Cleaner description */

    .arch-service-detail{
        display:block !important;

        padding:22px 20px !important;
    }

    .arch-detail-code{
        display:flex !important;
        align-items:center;
        gap:10px;

        margin-bottom:14px;
        padding-bottom:12px;

        border-right:0 !important;
        border-bottom:1px solid #dce3ec;
    }

    .arch-detail-code span{
        font-size:25px !important;
    }

    .arch-detail-code small{
        margin:0 !important;
    }

    .arch-detail-content h3{
        font-size:22px !important;
    }

    .arch-detail-content p{
        font-size:13px;
        line-height:1.65 !important;
    }


    /* Remove unnecessary technical elements */

    .arch-coordinate,
    .arch-drawing-strip,
    .arch-index-footer{
        display:none !important;
    }

}

/* =========================================================
   SERVICES MOBILE - REMOVE EMPTY GAP
========================================================= */

@media(max-width:768px){

    .arch-service-stage{
        min-height:0 !important;
    }

    .arch-service-panel,
    .arch-service-panel.is-active{
        grid-template-rows:auto auto !important;
        min-height:0 !important;
    }

    .arch-service-image{
        height:220px !important;
        min-height:220px !important;
    }

    .arch-service-image img{
        height:220px !important;
        min-height:220px !important;
        object-fit:cover;
    }

    /* blueprint grid not needed on mobile */
    .arch-stage-grid{
        display:none !important;
    }

    .arch-service-detail{
        margin:0 !important;
        padding:22px 20px !important;
    }

}

/* =========================================================
   FIX SERVICES → PROJECTS GAP
========================================================= */

.arch-services{
    padding-bottom:40px !important;
    margin-bottom:0 !important;
}

#projects{
    margin-top:0 !important;
    padding-top:55px !important;
}

/* remove any extra gap between consecutive sections */
.arch-services + #projects{
    margin-top:0 !important;
}

@media(max-width:768px){

    .arch-services{
        padding-bottom:30px !important;
    }

    #projects{
        padding-top:40px !important;
    }

}

/* =========================================================
   NARA 7 STEP ZIG-ZAG PROCESS
========================================================= */

.zigzag-process{
    position:relative;
    overflow:hidden;

    padding:90px 0;

    background:#f5f7fb;
}


/* subtle architectural grid */

.zigzag-process::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(0,22,61,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,22,61,.05) 1px,
            transparent 1px
        );

    background-size:40px 40px;
    opacity:.85;
}

.zigzag-process::after{
    content:"";
    position:absolute;

    width:520px;
    height:520px;

    right:-210px;
    top:120px;

    border:1px solid rgba(55,85,195,.07);

    transform:rotate(45deg);

    box-shadow:
        65px 65px 0 rgba(55,85,195,.022),
        -65px -65px 0 rgba(55,85,195,.022);

    pointer-events:none;
}


/* HEADER */

.zigzag-process-head{
    max-width:900px;
    margin-bottom:65px;
}


.zigzag-process-head h2{
    margin:8px 0 18px;

    color:#00163d;

    font-size:clamp(36px,4vw,54px);
    line-height:1.1;
    letter-spacing:-.03em;
}


.zigzag-process-head h2 span{
    color:#3755c3;
}


.zigzag-process-head > p:last-child{
    max-width:720px;

    color:#5e6a7b;
    font-size:15px;
    line-height:1.8;
}


/* TIMELINE */

.zigzag-timeline{
    position:relative;

    max-width:1050px;

    margin:0 auto;
}


/* main vertical architectural line */

.zigzag-timeline::before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:2px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            #3755c3,
            #bfcbe0,
            #c59b27
        );
}


/* STEP */

.zigzag-step{
    position:relative;

    display:grid;
    grid-template-columns:1fr 70px 1fr;

    align-items:center;

    margin-bottom:34px;
}


/* left card */

.zigzag-left .zigzag-card{
    grid-column:1;
}


/* left node */

.zigzag-left .zigzag-node{
    grid-column:2;
}


/* right node */

.zigzag-right .zigzag-node{
    grid-column:2;
}


/* right card */

.zigzag-right .zigzag-card{
    grid-column:3;
}


/* CARD */

.zigzag-card{
    position:relative;

    padding:28px 30px;

    background:#fff;

    border:1px solid #dfe6ef;

    border-radius:8px;

    box-shadow:
        0 10px 30px
        rgba(0,22,61,.055);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.zigzag-card:hover{
    transform:translateY(-4px);

    border-color:#cbd6e8;

    box-shadow:
        0 18px 38px
        rgba(0,22,61,.09);
}


/* connecting line from card to node */

.zigzag-left .zigzag-card::after{
    content:"";

    position:absolute;

    right:-36px;
    top:50%;

    width:36px;
    height:1px;

    background:#bfcbe0;
}


.zigzag-right .zigzag-card::before{
    content:"";

    position:absolute;

    left:-36px;
    top:50%;

    width:36px;
    height:1px;

    background:#bfcbe0;
}


/* NODE */

.zigzag-node{
    position:relative;

    z-index:3;

    justify-self:center;

    width:17px;
    height:17px;

    background:#fff;

    border:4px solid #3755c3;

    border-radius:50%;

    box-shadow:
    0 0 0 6px
    rgba(244,247,251,.95);
}


/* CARD TOP */

.zigzag-top{
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-bottom:18px;
}


.zigzag-number{
    display:grid;
    place-items:center;

    width:43px;
    height:43px;

    background:#e8efff;

    border-radius:5px;

    color:#00163d;

    font-family:Manrope,sans-serif;
    font-size:14px;
    font-weight:800;
}


.zigzag-top
.material-symbols-outlined{
    color:#8fa1bd;

    font-size:22px;
}


/* TEXT */

.zigzag-card h3{
    margin:0 0 10px;

    color:#00163d;

    font-size:21px;
}


.zigzag-card p{
    margin:0 0 20px;

    color:#5d697b;

    font-size:14px;
    line-height:1.75;
}


.zigzag-card small{
    display:block;

    padding-top:13px;

    border-top:1px solid #e1e7ef;

    color:#8a97aa;

    font-family:Manrope,sans-serif;
    font-size:8px;
    font-weight:800;

    letter-spacing:.12em;
}


/* FINAL STEP */

.zigzag-final .zigzag-card{
    background:#00163d;

    border-color:#00163d;

    box-shadow:
        0 18px 40px
        rgba(0,22,61,.16);
}


.zigzag-final .zigzag-number{
    background:#ffdf98;
}


.zigzag-final .zigzag-top
.material-symbols-outlined{
    color:#ffdf98;
}


.zigzag-final h3{
    color:#fff;
}


.zigzag-final p{
    color:#cad7ef;
}


.zigzag-final small{
    color:#ffdf98;

    border-color:
        rgba(255,255,255,.15);
}


.zigzag-final .zigzag-node{
    border-color:#c59b27;
}


/* CTA */

.zigzag-cta{
    margin-top:45px;

    text-align:center;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .zigzag-process{
        padding:55px 0;
    }


    .zigzag-process-head{
        margin-bottom:40px;
    }


    .zigzag-process-head h2{
        font-size:34px;
    }


    .zigzag-timeline{
        padding-left:32px;
    }


    .zigzag-timeline::before{
        left:8px;

        transform:none;
    }


    .zigzag-step{
        display:block;

        margin-bottom:20px;
    }


    .zigzag-card{
        padding:23px 21px;
    }


    .zigzag-left .zigzag-card::after,
    .zigzag-right .zigzag-card::before{
        display:none;
    }


    .zigzag-node{
        position:absolute;

        left:-32px;
        top:31px;

        width:15px;
        height:15px;
    }


    .zigzag-card h3{
        font-size:19px;
    }


    .zigzag-card p{
        font-size:13px;
    }


    .zigzag-cta{
        margin-top:32px;

        text-align:left;
    }

}
/* =========================================================
   NARA PROCESS - PREMIUM ARCHITECTURAL PALETTE
========================================================= */

.zigzag-process{
    background:
        linear-gradient(
            135deg,
            rgba(55,85,195,.10) 0%,
            rgba(255,255,255,.94) 35%,
            rgba(255,255,255,.96) 70%,
            rgba(197,155,39,.10) 100%
        ),
        #f4f7fb;
}

/* All normal cards */
.zigzag-step:not(.zigzag-final) .zigzag-card{
    background:#ffffff;
    border:1px solid #dbe3ed;
    border-left:4px solid #3755c3;
    border-top:1px solid #dbe3ed;
}

/* Alternate card tone */
.zigzag-step:nth-child(even):not(.zigzag-final) .zigzag-card{
    background:#f8faff;
}

/* Numbers */
.zigzag-step:not(.zigzag-final) .zigzag-number{
    background:#00163d;
    color:#ffffff;
}

/* Icons */
.zigzag-step:not(.zigzag-final)
.zigzag-top .material-symbols-outlined{
    color:#3755c3;
}

/* Main process line */
.zigzag-timeline::before{
    background:
        linear-gradient(
            to bottom,
            #3755c3 0%,
            #3755c3 78%,
            #c59b27 100%
        );
}

/* Timeline nodes */
.zigzag-step:not(.zigzag-final) .zigzag-node{
    background:#ffffff;
    border-color:#3755c3;
}

/* Card connecting lines */
.zigzag-left .zigzag-card::after,
.zigzag-right .zigzag-card::before{
    background:#9fb0c8;
}

/* Hover */
.zigzag-step:not(.zigzag-final) .zigzag-card:hover{
    border-color:#3755c3;
    box-shadow:0 18px 40px rgba(0,22,61,.10);
}

/* Phase label */
.zigzag-step:not(.zigzag-final) .zigzag-card small{
    color:#3755c3;
}

/* FINAL STEP */
.zigzag-final .zigzag-card{
    background:#00163d;
    border:1px solid #00163d;
    border-left:4px solid #c59b27;
}

.zigzag-final .zigzag-number{
    background:#ffdf98;
    color:#00163d;
}

.zigzag-final .zigzag-node{
    background:#00163d;
    border-color:#c59b27;
}

.zigzag-final .zigzag-top .material-symbols-outlined{
    color:#ffdf98;
}

.zigzag-final small{
    color:#ffdf98;
}/* =========================================================
   NARA ZIG-ZAG PROCESS - HOVER EFFECT
========================================================= */

@media (hover:hover){

    .zigzag-card{
        transition:
            transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease,
            background .3s ease;
    }

    .zigzag-number{
        transition:
            transform .3s ease,
            background .3s ease,
            color .3s ease;
    }

    .zigzag-top .material-symbols-outlined{
        transition:
            transform .3s ease,
            color .3s ease;
    }

    .zigzag-node{
        transition:
            transform .3s ease,
            border-color .3s ease,
            box-shadow .3s ease;
    }


    /* CARD HOVER */
    .zigzag-step:not(.zigzag-final) .zigzag-card:hover{
        transform:translateY(-6px);

        border-color:#3755c3;

        box-shadow:
            0 18px 42px
            rgba(0,22,61,.12);
    }


    /* NUMBER EFFECT */
    .zigzag-step:not(.zigzag-final)
    .zigzag-card:hover .zigzag-number{
        transform:translateY(-3px) scale(1.04);

        background:#3755c3;
        color:#fff;
    }


    /* ICON EFFECT */
    .zigzag-step:not(.zigzag-final)
    .zigzag-card:hover
    .zigzag-top .material-symbols-outlined{
        transform:translateX(4px);
        color:#00163d;
    }


    /* TIMELINE NODE */
    .zigzag-step:hover .zigzag-node{
        transform:scale(1.18);

        box-shadow:
            0 0 0 7px
            rgba(55,85,195,.10);
    }


    /* FINAL STEP */
    .zigzag-final .zigzag-card:hover{
        transform:translateY(-6px);

        border-color:#c59b27;

        box-shadow:
            0 22px 48px
            rgba(0,22,61,.24);
    }

    .zigzag-final
    .zigzag-card:hover .zigzag-number{
        transform:translateY(-3px) scale(1.05);

        background:#c59b27;
        color:#00163d;
    }

    .zigzag-final
    .zigzag-card:hover
    .zigzag-top .material-symbols-outlined{
        transform:translateX(4px);
        color:#ffdf98;
    }

}
/* =========================================================
   7 STEP - SCROLL REVEAL TRANSITION
========================================================= */

.zigzag-step{
    opacity:0;
    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22,.61,.36,1);
}

/* left steps slide from left */
.zigzag-step.zigzag-left{
    transform:translateX(-35px);
}

/* right steps slide from right */
.zigzag-step.zigzag-right{
    transform:translateX(35px);
}

/* visible state */
.zigzag-step.is-visible{
    opacity:1;
    transform:translateX(0);
}

/* stagger effect */
.zigzag-step:nth-child(1){ transition-delay:.05s; }
.zigzag-step:nth-child(2){ transition-delay:.10s; }
.zigzag-step:nth-child(3){ transition-delay:.15s; }
.zigzag-step:nth-child(4){ transition-delay:.20s; }
.zigzag-step:nth-child(5){ transition-delay:.25s; }
.zigzag-step:nth-child(6){ transition-delay:.30s; }
.zigzag-step:nth-child(7){ transition-delay:.35s; }


/* Mobile - softer movement */
@media(max-width:768px){

    .zigzag-step.zigzag-left,
    .zigzag-step.zigzag-right{
        transform:translateY(22px);
    }

    .zigzag-step.is-visible{
        transform:translateY(0);
    }

}


/* Accessibility */
@media(prefers-reduced-motion:reduce){

    .zigzag-step{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

}
/* Mission & Vision - final compact refinement */

.mission-vision-section{
    padding:70px 0 65px;
}

.mission-vision-header{
    margin-bottom:30px;
}

.mission-vision-card{
    padding:30px 32px;
}

.mv-divider{
    margin:22px 0;
}

.mv-english,
.mv-sinhala{
    font-size:14px;
    line-height:1.75;
}

.mission-vision-card h3{
    font-size:24px;
    margin-bottom:14px;
}

.mission-vision-card h4{
    font-size:18px;
    margin-bottom:10px;
}
.mv-sinhala{
    color:#46546a;
    font-weight:400;
}

/* =========================================================
   MISSION & VISION - HOVER + TRANSITION
========================================================= */

.mission-vision-card{
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.mv-icon{
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.mission-vision-card h3{
    transition:
        color .3s ease,
        transform .3s ease;
}


/* Desktop hover only */

@media (hover:hover){

    .mission-vision-card:hover{
        transform:translateY(-7px);

        border-color:#cbd7e8;

        box-shadow:
            0 20px 45px
            rgba(0,22,61,.12);

        background:#ffffff;
    }


    /* icon animation */

    .mission-vision-card:hover .mv-icon{
        transform:translateY(-3px) scale(1.06);

        background:#0f2b5c;
        color:#ffdf98;
    }


    /* heading subtle movement */

    .mission-vision-card:hover h3{
        transform:translateX(4px);
        color:#3755c3;
    }


    /* Mission card blue accent */

    .mission-vision-card:first-child:hover{
        border-top:3px solid #3755c3;
    }


    /* Vision card gold accent */

    .mission-vision-card:last-child:hover{
        border-top:3px solid #c59b27;
    }

}

/* =========================================================
   MISSION & VISION - SCROLL TRANSITION
========================================================= */

.mission-vision-card{
    opacity:0;
    transform:translateY(28px);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22,.61,.36,1);
}

.mission-vision-card.is-visible{
    opacity:1;
    transform:translateY(0);
}

/* small stagger */
.mission-vision-card:nth-child(1){
    transition-delay:.08s;
}

.mission-vision-card:nth-child(2){
    transition-delay:.20s;
}

@media(prefers-reduced-motion:reduce){

    .mission-vision-card{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

}

/* =========================================================
   TESTIMONIALS - ARCHITECTURAL BACKGROUND
========================================================= */

.testimonials-section,
#testimonials{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 12% 22%,
            rgba(55,85,195,.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(197,155,39,.06),
            transparent 26%
        ),
        #fbfcff;

    border-top:1px solid #e4e9f1;
    border-bottom:1px solid #e4e9f1;
}


/* subtle blueprint grid */
.testimonials-section::before,
#testimonials::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(0,22,61,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,22,61,.025) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    opacity:.15;
}


/* subtle quote decoration */
.testimonials-section::after,
#testimonials::after{
    content:"“";

    position:absolute;

    right:5%;
    top:8%;

    font-family:Georgia,serif;
    font-size:220px;
    line-height:1;

    color:rgba(55,85,195,.035);

    pointer-events:none;
}


/* keep content above background */
.testimonials-section .container,
#testimonials .container{
    position:relative;
    z-index:2;
}

/* =========================================================
   NARA TESTIMONIAL MOSAIC
========================================================= */

#testimonials.nara-testimonials{
    position:relative;
    overflow:hidden;
    padding:85px 0;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(55,85,195,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(197,155,39,.08),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #eef3fa 0%,
            #f7f9fd 48%,
            #eef2f8 100%
        ) !important;
}


/* architectural grid */

#testimonials.nara-testimonials::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(0,22,61,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,22,61,.03) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    pointer-events:none;
}


#testimonials .container{
    position:relative;
    z-index:2;
}


/* heading */

.testimonials-heading{
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:45px;
}


/* =========================================================
   MOSAIC GRID
========================================================= */

.testimonial-mosaic{
    display:grid;

    grid-template-columns:
        repeat(12, minmax(0,1fr));

    gap:22px;

    align-items:start;
}


/* BASE CARD */

.mosaic-review{
    position:relative;

    background:#ffffff;

    border:
        1px solid
        rgba(55,85,195,.30);

    border-radius:20px;

    padding:28px;

    overflow:visible;

    box-shadow:
        0 12px 35px
        rgba(0,22,61,.07);

    transition:
        transform .35s
        cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


/* different shapes / positions */

.mosaic-review-1{
    grid-column:span 4;
    min-height:320px;
}

.mosaic-review-2{
    grid-column:span 4;
    margin-top:32px;
}

.mosaic-review-3{
    grid-column:span 4;
    min-height:300px;
}

.mosaic-review-4{
    grid-column:2 / span 5;
}

.mosaic-review-5{
    grid-column:7 / span 3;
    margin-top:-18px;
}

.mosaic-review-6{
    grid-column:10 / span 3;
}


/* quotation mark */

.review-quote-mark{
    position:absolute;
    top:16px;
    right:22px;

    font-family:Georgia,serif;

    font-size:70px;
    line-height:1;

    color:
        rgba(55,85,195,.12);

    pointer-events:none;
}


/* stars */

.review-stars{
    position:relative;
    z-index:2;

    color:#c59b27;

    font-size:17px;

    letter-spacing:3px;

    margin-bottom:18px;
}


/* text */

.review-message{
    position:relative;
    z-index:2;

    color:#35445a;

    font-size:15px;
    line-height:1.72;
}

.review-message p{
    margin:
        0 0 12px;
}


/* client information */

.review-client{
    display:flex;
    align-items:center;
    gap:12px;

    margin-top:22px;
    padding-top:18px;

    border-top:
        1px solid #e2e8f1;
}


.review-avatar{
    width:50px;
    height:50px;

    flex:0 0 50px;

    border-radius:50%;

    overflow:hidden;

    border:
        3px solid #ffffff;

    box-shadow:
        0 0 0 2px
        #3755c3;
}


.review-avatar img{
    width:100%;
    height:100%;

    object-fit:cover;
}


.review-avatar-fallback{
    display:flex;
    align-items:center;
    justify-content:center;

    background:#00163d;

    color:#ffdf98;
}


.review-client-info{
    display:flex;
    flex-direction:column;
    gap:2px;
}


.review-client-info strong{
    color:#00163d;

    font-size:14px;
    font-weight:800;
}


.review-client-info span{
    color:#66758a;

    font-size:12px;
}


/* =========================================================
   SPECIAL CARD STYLING
========================================================= */

.mosaic-review-1 .review-client{
    background:#00163d;

    margin:
        24px -28px -28px;

    padding:18px 28px;

    border:0;

    border-radius:
        0 0 19px 19px;
}


.mosaic-review-1
.review-client-info strong{
    color:#ffffff;
}


.mosaic-review-1
.review-client-info span{
    color:
        rgba(255,255,255,.72);
}


.mosaic-review-3{
    border-top:
        4px solid #3755c3;
}


.mosaic-review-4{
    background:
        linear-gradient(
            135deg,
            #00163d,
            #0f2b5c
        );

    border-color:#00163d;
}


.mosaic-review-4
.review-message,
.mosaic-review-4
.review-client-info strong{
    color:#ffffff;
}


.mosaic-review-4
.review-client-info span{
    color:
        rgba(255,255,255,.68);
}


.mosaic-review-4
.review-client{
    border-color:
        rgba(255,255,255,.15);
}


.mosaic-review-4
.review-quote-mark{
    color:
        rgba(255,223,152,.16);
}


.mosaic-review-5{
    border-top:
        4px solid #c59b27;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover:hover){

    .mosaic-review:hover{
        transform:
            translateY(-8px);

        border-color:
            rgba(55,85,195,.55);

        box-shadow:
            0 22px 50px
            rgba(0,22,61,.14);
    }

    .mosaic-review:hover
    .review-avatar{
        transform:
            scale(1.06);
    }

}


.review-avatar{
    transition:
        transform .35s ease;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1024px){

    .testimonial-mosaic{
        grid-template-columns:
            repeat(2,1fr);
    }

    .mosaic-review,
    .mosaic-review-1,
    .mosaic-review-2,
    .mosaic-review-3,
    .mosaic-review-4,
    .mosaic-review-5,
    .mosaic-review-6{
        grid-column:auto;
        margin-top:0;
        min-height:0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:640px){

    #testimonials.nara-testimonials{
        padding:60px 0;
    }

    .testimonial-mosaic{
        grid-template-columns:1fr;
        gap:18px;
    }

    .mosaic-review{
        padding:23px 20px;
        border-radius:16px;
    }

    .mosaic-review-1
    .review-client{
        margin:
            22px -20px -23px;

        padding:
            17px 20px;

        border-radius:
            0 0 15px 15px;
    }

}
/* =========================================================
   TESTIMONIAL MOSAIC - WIDER / MORE DYNAMIC
========================================================= */

#testimonials .container{
    max-width:1280px;
}

.testimonials-heading{
    max-width:760px;
    margin-bottom:50px;
}

/* Wider canvas */
.testimonial-mosaic{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:24px;
    max-width:1180px;
    margin:0 auto;
    align-items:start;
}

/* Card sizes / arrangement */

.mosaic-review-1{
    grid-column:1 / span 3;
    margin-top:25px;
}

.mosaic-review-2{
    grid-column:4 / span 3;
    margin-top:0;
}

.mosaic-review-3{
    grid-column:7 / span 4;
    margin-top:22px;
}

.mosaic-review-4{
    grid-column:2 / span 4;
    margin-top:-5px;
}

.mosaic-review-5{
    grid-column:6 / span 3;
    margin-top:18px;
}

.mosaic-review-6{
    grid-column:9 / span 3;
    margin-top:-5px;
}


/* make cards feel stronger */

.mosaic-review{
    padding:26px 25px;
    border-radius:18px;

    box-shadow:
        0 14px 32px
        rgba(0,22,61,.08);
}


/* improve readable card text */

.review-message{
    font-size:14px;
    line-height:1.65;
}


/* Don't let long reviews dominate too much */

.mosaic-review-4 .review-message,
.mosaic-review-6 .review-message{
    font-size:13px;
    line-height:1.58;
}


/* More visible quote symbol */

.review-quote-mark{
    font-size:82px;
    top:12px;
    right:18px;
}


/* Bigger client identity area */

.review-avatar{
    width:54px;
    height:54px;
    flex-basis:54px;
}

.review-client-info strong{
    font-size:14px;
}


/* Google button spacing */

.google-reviews-cta{
    margin-top:42px;
}


/* TABLET */

@media(max-width:1024px){

    .testimonial-mosaic{
        grid-template-columns:repeat(2,1fr);
        max-width:760px;
    }

    .mosaic-review,
    .mosaic-review-1,
    .mosaic-review-2,
    .mosaic-review-3,
    .mosaic-review-4,
    .mosaic-review-5,
    .mosaic-review-6{
        grid-column:auto;
        margin-top:0;
    }
}


/* MOBILE */

@media(max-width:640px){

    .testimonial-mosaic{
        grid-template-columns:1fr;
        max-width:100%;
    }

}
/* =========================================================
   TESTIMONIALS - FINAL 6 CARD ALIGNMENT
========================================================= */

.testimonial-mosaic{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:24px;

    max-width:1180px;
    margin:0 auto;

    align-items:start;
}


/* ---------- TOP ROW ---------- */

/* Review 01 */
.mosaic-review-1{
    grid-column:1 / span 3;
    margin:0;
}

/* Review 02 */
.mosaic-review-2{
    grid-column:4 / span 4;
    margin:0;
}

/* Review 03 */
.mosaic-review-3{
    grid-column:8 / span 5;
    margin:0;
}


/* ---------- BOTTOM ROW ---------- */

/* Long review - give more width */
.mosaic-review-4{
    grid-column:1 / span 5;
    margin:0;
}

/* Short review */
.mosaic-review-5{
    grid-column:6 / span 3;
    margin:0;
}

/* Long review - give more width */
.mosaic-review-6{
    grid-column:9 / span 4;
    margin:0;
}


/* Card structure */

.mosaic-review{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;

    padding:26px;
}


/* Keep client details at bottom */

.mosaic-review .review-client{
    margin-top:auto;
}


/* Long reviews slightly smaller text */

.mosaic-review-4 .review-message,
.mosaic-review-6 .review-message{
    font-size:13px;
    line-height:1.58;
}


/* Normal reviews */

.mosaic-review-1 .review-message,
.mosaic-review-2 .review-message,
.mosaic-review-3 .review-message,
.mosaic-review-5 .review-message{
    font-size:14px;
    line-height:1.65;
}


/* TABLET */

@media(max-width:1024px){

    .testimonial-mosaic{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .mosaic-review-1,
    .mosaic-review-2,
    .mosaic-review-3,
    .mosaic-review-4,
    .mosaic-review-5,
    .mosaic-review-6{
        grid-column:auto;
        margin:0;
    }

}


/* MOBILE */

@media(max-width:640px){

    .testimonial-mosaic{
        grid-template-columns:1fr;
        gap:18px;
    }

}
/* =========================================================
   SERVICES SECTION – COLOR REFRESH ONLY
========================================================= */

.arch-services{
    background: #f5f7fb;
}

.arch-services-heading h2{
    color: #0d2244;
}

.arch-services-intro{
    color: #5f6f86;
}

/* LEFT INDEX PANEL */
.arch-service-index{
    background: #0b1f44;
    border: 1px solid #18315f;
}

.arch-index-top{
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #c9d4e8;
}

.arch-index-top strong{
    color: #f1d48a;
}

.arch-service-tab{
    background: transparent;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background .35s ease, color .35s ease, padding-left .35s ease;
}

.arch-service-tab:hover{
    background: #132d61;
    color: #ffffff;
    padding-left: 1.2rem;
}

.arch-service-tab .arch-tab-number{
    color: #f1d48a;
}

.arch-service-tab .material-symbols-outlined{
    color: #9eb4dc;
    transition: transform .35s ease, color .35s ease;
}

.arch-service-tab:hover .material-symbols-outlined,
.arch-service-tab.is-active .material-symbols-outlined{
    color: #f1d48a;
    transform: translateX(4px);
}

.arch-service-tab.is-active{
    background: linear-gradient(90deg, #17366f 0%, #1d427f 100%);
    color: #ffffff;
    box-shadow: inset 4px 0 0 #f1d48a;
}

.arch-index-footer{
    border-top: 1px solid rgba(255,255,255,0.08);
    color: #8ea4ca;
}

.arch-index-footer span:first-child{
    color: #f1d48a;
}

/* RIGHT PANEL */
.arch-service-stage{
    background: #ffffff;
    border: 1px solid #dbe3ef;
    box-shadow: 0 12px 30px rgba(13, 34, 68, 0.08);
}

.arch-stage-grid{
    opacity: .08;
}

/* IMAGE LABEL */
.arch-image-label{
    background: linear-gradient(to top, rgba(11,31,68,.82), rgba(11,31,68,.12));
    color: #ffffff;
}

.arch-image-label small{
    color: #f1d48a;
}

.arch-image-overlay{
    background: linear-gradient(to top, rgba(8,20,43,.30), rgba(8,20,43,.05));
}

/* DETAIL AREA */
.arch-service-detail{
    background: #ffffff;
}

.arch-detail-code{
    border-right: 1px solid #e3eaf4;
}

.arch-detail-code span{
    color: #4567d8;
}

.arch-detail-code small{
    color: #7e8da5;
}

.arch-detail-content h3{
    color: #0d2244;
}

.arch-detail-content p{
    color: #607086;
}

.arch-service-link{
    color: #3755c3;
    transition: color .3s ease;
}

.arch-service-link:hover{
    color: #0d2244;
}

/* BOTTOM STRIP */
.arch-drawing-strip{
    background: #0b1f44;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.arch-drawing-strip span{
    color: #d4def0;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.arch-drawing-strip span:last-child{
    border-right: none;
}

/* COORDINATE LABELS */
.arch-coordinate{
    background: #ffffff;
    color: #3755c3;
    border: 1px solid #dbe3ef;
}

/* OPTIONAL: overall softer section feeling */
.arch-services .eyebrow{
    color: #4567d8;
}
/* =========================================================
   SERVICES - REMOVE EXTRA LABELS
========================================================= */

/* 1. Remove "SERVICE INDEX" only */
.arch-index-top > *:first-child{
    display:none !important;
}

/* Keep A / 01—06 aligned right */
.arch-index-top{
    justify-content:flex-end !important;
}


/* 2. Remove image overlay service label */
.arch-image-label{
    display:none !important;
}


/* 3. Remove 05 / DESIGN SERVICE block */
.arch-detail-code{
    display:none !important;
}


/* Let service title/description use full width */
.arch-service-detail{
    grid-template-columns:1fr !important;
}


/* remove unnecessary left divider/gap */
.arch-detail-content{
    padding-left:0 !important;
    margin-left:0 !important;
}
/* Remove empty grey strip between image and service content */
.arch-service-stage::after,
.arch-service-image::after{
    display:none !important;
}

.arch-service-detail{
    margin-top:0 !important;
    border-top:1px solid #dbe3ef;
}

/* =========================================================
   SERVICES - FIX GREY GAP BELOW IMAGE
========================================================= */

@media (min-width:769px){

    .arch-service-panel{
        height:100% !important;
        grid-template-rows:minmax(0,1fr) auto !important;
    }

    .arch-service-image{
        height:100% !important;
        min-height:0 !important;
    }

    .arch-service-image img{
        display:block !important;
        width:100% !important;

        height:100% !important;
        min-height:0 !important;

        object-fit:cover !important;
    }

}/* =========================================================
   SERVICES - KEEP 260PX IMAGE HEIGHT / REMOVE GREY GAP
========================================================= */

@media (min-width:769px){

    .arch-service-image{
        height:260px !important;
        min-height:260px !important;
        overflow:hidden !important;
        background:transparent !important;
    }

    .arch-service-image img{
        display:block !important;
        width:100% !important;
        height:260px !important;
        min-height:260px !important;
        object-fit:cover !important;
    }

    .arch-service-panel{
        grid-template-rows:260px auto !important;
        min-height:0 !important;
    }

    .arch-service-detail{
        margin-top:0 !important;
    }

}
/* =========================================================
   SERVICES - HIGHLIGHT EXPLORE BUTTON
========================================================= */

.arch-service-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:8px;

    padding:10px 16px;

    background:#3755c3;
    color:#ffffff !important;

    border:1px solid #3755c3;
    border-radius:6px;

    font-size:13px;
    font-weight:700;

    text-decoration:none;

    box-shadow:
        0 6px 16px rgba(55,85,195,.18);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.arch-service-link .material-symbols-outlined{
    font-size:17px;
    transition:transform .3s ease;
}

@media (hover:hover){

    .arch-service-link:hover{
        background:#00163d;
        border-color:#00163d;

        transform:translateY(-2px);

        box-shadow:
            0 10px 22px rgba(0,22,61,.20);
    }

    .arch-service-link:hover .material-symbols-outlined{
        transform:translateX(3px);
    }
}
/* =========================================================
   SERVICES - SHOW MORE IMAGE WITHOUT INCREASING SECTION HEIGHT
========================================================= */

@media (min-width:769px){

    /* save vertical space from section */
    .arch-services{
        padding-top:35px !important;
        padding-bottom:35px !important;
    }

    .arch-services-heading{
        margin-bottom:18px !important;
    }

    /* show more image */
    .arch-service-image{
        height:300px !important;
        min-height:300px !important;
        overflow:hidden !important;
    }

    .arch-service-image img{
        width:100% !important;
        height:300px !important;
        min-height:300px !important;

        object-fit:cover !important;
        object-position:center center !important;
    }

    /* panel follows same image height */
    .arch-service-panel{
        grid-template-rows:300px auto !important;
        min-height:0 !important;
    }
}
/* =========================================================
   SERVICES - BIGGER IMAGE / SAME TOTAL HEIGHT
========================================================= */

@media (min-width:769px){

    /* active panel only */
    .arch-service-stage .arch-service-panel.is-active{
        grid-template-rows:300px auto !important;
        min-height:0 !important;
    }

    /* image area */
    .arch-service-stage
    .arch-service-panel.is-active
    .arch-service-image{
        height:300px !important;
        min-height:300px !important;
        max-height:300px !important;
        overflow:hidden !important;
    }

    .arch-service-stage
    .arch-service-panel.is-active
    .arch-service-image img{
        display:block !important;
        width:100% !important;

        height:300px !important;
        min-height:300px !important;
        max-height:300px !important;

        object-fit:cover !important;
        object-position:center 45% !important;
    }

    /* reduce white information area to compensate */
    .arch-service-stage
    .arch-service-panel.is-active
    .arch-service-detail{
        padding:14px 26px !important;
        min-height:0 !important;
    }

    .arch-service-detail h3{
        margin-bottom:4px !important;
        font-size:21px !important;
    }

    .arch-service-detail p{
        margin-bottom:7px !important;
        line-height:1.45 !important;
    }

    .arch-service-link{
        margin-top:2px !important;
        padding:8px 14px !important;
    }
}