/* ==========================================================================
   WEBZELIA: Custom Websites page styles
   Every class here starts with "cw-" so nothing can clash with web.css.
   Load order: web.css first (header, footer, colour variables), then this file.
   ========================================================================== */

.cw-wrap{ max-width:1220px; margin:0 auto; padding:0 24px; }
.cw-block{ padding:96px 0; background:var(--bg); }
.cw-block--white{ background:var(--paper); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cw-head{ max-width:680px; margin-bottom:48px; }
.cw-tag{ display:inline-block; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--blue); margin-bottom:14px; }
.cw-h2{ font-family:var(--font-display); font-size:var(--fs-section); font-weight:600; color:var(--navy); line-height:1.15; }
.cw-sub{ font-size:var(--fs-md); color:var(--text-soft); line-height:var(--lh-loose); margin-top:16px; }

.cw-btn{
    display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:700; font-size:var(--fs-sm);
    padding:14px 28px; border-radius:40px; border:2px solid transparent; cursor:pointer;
    transition:transform .25s ease, background .25s ease, color .25s ease;
}
.cw-btn--solid{ background:#1746A2; color:#fff; }
.cw-btn--solid:hover{ background:var(--navy); transform:translateY(-3px); }
.cw-btn--line{ border-color:var(--navy); color:var(--navy); }
.cw-btn--line:hover{ background:var(--navy); color:#fff; transform:translateY(-3px); }
.cw-btn--light{ border-color:rgba(255,255,255,.5); color:#fff; }
.cw-btn--light:hover{ background:#fff; color:var(--navy); transform:translateY(-3px); }

/* ---------- Hero ---------- */
.cw-hero{ padding:72px 0 64px; background:var(--bg); }
.cw-hero .cw-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.cw-crumbs{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-soft); margin-bottom:22px; }
.cw-crumbs a{ color:var(--blue); }
.cw-crumbs a:hover{ text-decoration:underline; }
.cw-hero h1{ font-family:var(--font-display); font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:600; color:var(--navy); line-height:1.1; margin-bottom:22px; }
.cw-lead{ font-size:var(--fs-md); color:var(--text-soft); line-height:var(--lh-loose); max-width:540px; margin-bottom:30px; }
.cw-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.cw-trust{ display:flex; flex-wrap:wrap; gap:10px 24px; }
.cw-trust span{ font-size:var(--fs-xs); color:var(--text-soft); display:flex; align-items:center; gap:8px; }
.cw-trust i{ color:var(--blue); }
.cw-hero-media{ position:relative; }
.cw-hero-media img{ width:100%; aspect-ratio:4/3; object-fit: contain; border-radius:var(--radius-md); box-shadow:0 30px 60px rgba(10,42,92,.25); }
.cw-hero-badge{
    position:absolute; left:-18px; bottom:28px; background:var(--navy); color:#fff; padding:16px 20px; border-radius:var(--radius-md);
    box-shadow:var(--shadow); max-width:210px;
}
.cw-hero-badge strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--sky); line-height:1.1; }
.cw-hero-badge span{ font-size:var(--fs-xs); color:rgba(255,255,255,.8); }

/* ---------- Intro split ---------- */
.cw-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.cw-split--flip .cw-split-media{ order:2; }
.cw-split-media img{ width:100%; aspect-ratio:4/3; object-fit: contain; border-radius:var(--radius-md); border:1px solid var(--border); box-shadow:var(--shadow); }
.cw-split p{ font-size:var(--fs-md); color:var(--text-soft); line-height:var(--lh-loose); margin-top:18px; }
.cw-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.cw-chips span{ font-family:var(--font-mono); font-size:.78rem; background:var(--tint); border:1px solid var(--border); color:var(--navy); padding:7px 14px; border-radius:20px; }

/* ---------- Features ---------- */
.cw-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cw-feature{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; transition:transform .3s ease, box-shadow .3s ease; }
.cw-feature:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.cw-feature-icon{ width:46px; height:46px; border-radius:12px; background:var(--tint); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:18px; }
.cw-feature h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); margin-bottom:8px; font-weight:600; }
.cw-feature p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-normal); }

/* ---------- Comparison table ---------- */
.cw-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--paper); }
.cw-table{ width:100%; border-collapse:collapse; min-width:620px; }
.cw-table th, .cw-table td{ padding:18px 22px; text-align:left; font-size:var(--fs-sm); border-bottom:1px solid var(--border); vertical-align:top; }
.cw-table thead th{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); background:var(--tint); }
.cw-table thead th.cw-us{ background:var(--navy); color:#fff; }
.cw-table tbody th{ color:var(--navy); font-weight:700; width:22%; }
.cw-table td{ color:var(--text-soft); line-height:1.6; }
.cw-table td.cw-us{ color:var(--navy); font-weight:600; background:#f4f8ff; }
.cw-table tr:last-child th, .cw-table tr:last-child td{ border-bottom:none; }

/* ---------- Included list ---------- */
.cw-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 36px; margin-top:28px; }
.cw-list div{ display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm); color:var(--text); line-height:1.55; }
.cw-list i{ color:var(--blue); margin-top:4px; }

/* ---------- Portfolio ---------- */
.cw-work{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.cw-work-card{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.cw-work-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.cw-work-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.cw-work-body{ padding:20px 22px 24px; }
.cw-work-body small{ display:block; font-family:var(--font-mono); font-size:.72rem; color:var(--blue); margin-bottom:6px; }
.cw-work-body h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); margin-bottom:6px; font-weight:600; }
.cw-work-body p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-normal); }

/* ---------- Who it is for ---------- */
.cw-fit{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cw-fit div{ border-left:3px solid var(--blue); padding-left:18px; }
.cw-fit h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); margin-bottom:8px; font-weight:600; }
.cw-fit p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-normal); }

/* ---------- Process ---------- */
.cw-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:cwstep; }
.cw-step{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px; counter-increment:cwstep; }
.cw-step::before{ content:counter(cwstep); display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--navy); color:var(--sky); font-family:var(--font-display); font-weight:600; margin-bottom:16px; }
.cw-step h3{ font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy); margin-bottom:8px; font-weight:600; }
.cw-step p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-normal); }

/* ---------- Reviews ---------- */
.cw-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cw-review{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; display:flex; flex-direction:column; }
.cw-stars{ color:#f2b01e; font-size:.85rem; letter-spacing:2px; margin-bottom:14px; }
.cw-review blockquote{ font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-loose); margin-bottom:22px; flex:1; }
.cw-person{ display:flex; align-items:center; gap:12px; }
.cw-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; background:var(--tint); flex-shrink:0; }
.cw-person strong{ display:block; font-family:var(--font-display); font-size:var(--fs-sm); color:var(--navy); }
.cw-person span{ font-size:.75rem; color:var(--text-soft); }

/* ---------- FAQ (native details, no JavaScript) ---------- */
.cw-faq{ display:flex; flex-direction:column; gap:10px; max-width:820px; }
.cw-faq details{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); overflow:hidden; }
.cw-faq summary{
    list-style:none; cursor:pointer; padding:20px 54px 20px 22px; position:relative;
    font-family:var(--font-display); font-size:var(--fs-md); font-weight:600; color:var(--navy);
}
.cw-faq summary::-webkit-details-marker{ display:none; }
.cw-faq summary::after{
    content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%;
    border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:1.1rem; line-height:1; color:var(--navy);
}
.cw-faq details[open] summary::after{ content:'\2212'; background:var(--blue); border-color:var(--blue); color:#fff; }
.cw-faq details p{ padding:0 22px 22px; font-size:var(--fs-sm); color:var(--text-soft); line-height:var(--lh-loose); }

/* ---------- Contact ---------- */
.cw-contact{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.cw-contact-info p{ font-size:var(--fs-md); color:var(--text-soft); line-height:var(--lh-loose); margin:16px 0 28px; max-width:480px; }
.cw-detail{ display:flex; gap:14px; margin-bottom:20px; align-items:flex-start; }
.cw-detail i{ color:var(--blue); font-size:1.05rem; margin-top:3px; width:18px; }
.cw-detail h4{ font-size:var(--fs-sm); font-weight:700; color:var(--navy); margin-bottom:3px; }
.cw-detail span, .cw-detail a{ font-size:var(--fs-sm); color:var(--text-soft); }
.cw-detail a:hover{ color:var(--blue); }
.cw-form{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:36px; box-shadow:var(--shadow); }
.cw-form h3{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--navy); margin-bottom:6px; font-weight:600; }
.cw-form-note{ display:block; font-size:var(--fs-sm); color:var(--text-soft); margin-bottom:24px; }
.cw-form form{ display:flex; flex-direction:column; gap:16px; }
.cw-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cw-form label{ display:block; font-size:var(--fs-xs); font-weight:700; color:var(--navy); margin-bottom:6px; }
.cw-form input, .cw-form select, .cw-form textarea{
    width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg);
    font-family:var(--font-body); font-size:var(--fs-sm); transition:border-color .25s, box-shadow .25s;
}
.cw-form input:focus, .cw-form select:focus, .cw-form textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(22,115,230,.15); }
.cw-form button{
    padding:14px; background:var(--blue); color:#fff; border:2px solid var(--blue); border-radius:var(--radius-sm);
    font-weight:700; font-size:var(--fs-sm); cursor:pointer; transition:all .25s;
}
.cw-form button:hover{ background:var(--navy); border-color:var(--navy); }
.cw-form button:disabled{ opacity:.7; cursor:wait; }

/* ---------- Closing call to action ---------- */
.cw-cta{ background:var(--navy); padding:84px 0; text-align:center; }
.cw-cta .cw-wrap{ max-width:760px; }
.cw-cta h2{ font-family:var(--font-display); font-size:var(--fs-section); font-weight:600; color:#fff; line-height:1.15; margin-bottom:18px; }
.cw-cta p{ font-size:var(--fs-md); color:rgba(255,255,255,.78); line-height:var(--lh-loose); max-width:540px; margin:0 auto 32px; }
.cw-cta .cw-actions{ justify-content:center; margin-bottom:0; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
    .cw-hero .cw-wrap, .cw-split, .cw-contact{ grid-template-columns:1fr; gap:36px; }
    .cw-split--flip .cw-split-media{ order:0; }
    .cw-features, .cw-work, .cw-reviews{ grid-template-columns:1fr 1fr; }
    .cw-fit, .cw-steps{ grid-template-columns:1fr 1fr; }
    .cw-hero-badge{ left:14px; }
}
@media (max-width:640px){
    .cw-block{ padding:64px 0; }
    .cw-hero{ padding:44px 0; }
    .cw-features, .cw-work, .cw-reviews, .cw-fit, .cw-steps, .cw-list, .cw-row{ grid-template-columns:1fr; }
    .cw-actions .cw-btn{ width:100%; justify-content:center; }
    .cw-form{ padding:24px; }
}