/*
Theme Name: Hackett Publishing
Author: DM Digital Marketing
Description: Publishing services homepage theme (hero + lead form, new releases, services, process, FAQ).
Version: 32.0
*/
:root{--ink:#16213a;--teal:#0f6b6b;--coral:#d6455d;--sky:#eef3f8;--line:#d9e0ea;--txt:#27303f}
*{box-sizing:border-box}
body{margin:0;font:16px/1.65 Georgia,serif;color:var(--txt)}
h1,h2,h3,h4,.btn,nav,input,textarea,button{font-family:"Helvetica Neue",Arial,sans-serif}
h1,h2,h3{color:var(--ink);line-height:1.2}
a{color:inherit}
.wrap{max-width:1180px;margin:auto;padding:0 20px}
.sec{padding:70px 0}.sec.alt{background:var(--sky)}.sec.dark{background:var(--ink);color:#fff}.sec.dark h2,.sec.dark h3{color:#fff}
.sec h2{font-size:32px;margin:0 0 12px}.center{text-align:center}
.btn{display:inline-block;padding:13px 26px;border-radius:6px;background:var(--coral);color:#fff;text-decoration:none;font-weight:700;border:0;cursor:pointer}
.btn.alt{background:var(--teal)}.btn.line{background:none;border:2px solid #fff}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
/* header */
.top{background:var(--ink);color:#fff;font:14px Arial;padding:7px 0;text-align:right}
.site-h{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-h .wrap{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{font:700 24px Georgia;text-decoration:none;color:var(--ink)}
.site-h ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.site-h li{position:relative}.site-h a{text-decoration:none;font-weight:600;color:var(--ink);font-size:15px}
.site-h li ul{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);padding:12px 18px;flex-direction:column;gap:8px;min-width:200px}
.site-h li:hover>ul{display:flex}
.burger{display:none;background:none;border:0;font-size:28px}
/* hero */
.hero{background:linear-gradient(120deg,#7b4bb0,#e86fb0);padding:70px 0;color:#fff}
.hero .wrap{display:grid;grid-template-columns:1fr 420px;gap:50px;align-items:center}
.hero h1{color:#fff;font-size:44px;margin:0 0 14px}
.hero p{font-size:18px;max-width:520px}
.lead{background:#fff;color:var(--txt);padding:28px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.lead h3{margin:0 0 14px;font-size:22px}
.lead input[type=text],.lead input[type=email],.lead input[type=tel],.lead textarea{width:100%;padding:12px;margin-bottom:10px;border:1px solid #bcc6d4;border-radius:5px;font-size:15px}
.lead small{display:block;font:12px/1.4 Arial;color:#556;margin-bottom:12px}
.lead .btn{width:100%}.hp{position:absolute;left:-9999px}
.notice{background:#d6f0e0;padding:10px;border-radius:5px;margin-bottom:12px;font-family:Arial}
/* carousel */
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 20px;scrollbar-width:thin}
.book{flex:0 0 190px;scroll-snap-align:start;text-decoration:none}
.book img,.book .ph{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.2);background:linear-gradient(160deg,var(--teal),var(--ink));display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:12px;font:700 16px Georgia}
.book h4{margin:12px 0 2px;font-size:15px;color:var(--ink)}.book span{font:14px Arial;color:#667}
.arrows{display:flex;gap:8px}.arrows button{width:40px;height:40px;border-radius:50%;border:1px solid var(--ink);background:#fff;cursor:pointer;font-size:18px}
.head-row{display:flex;justify-content:space-between;align-items:center}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split .img{min-height:320px;border-radius:10px;background:linear-gradient(135deg,var(--sky),#c9d6e6) center/cover;display:flex;align-items:center;justify-content:center;color:var(--ink);font:700 18px Arial;text-align:center;padding:20px}
/* services */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px}
.card h3{margin:0 0 8px;font-size:20px}.card a.more{color:var(--teal);font:700 14px Arial;text-decoration:none}
.chips{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:30px}
.chip{background:var(--ink);color:#fff;text-decoration:none;border-radius:8px;padding:26px 10px;text-align:center;font:600 14px Arial}
.chip:hover{background:var(--teal)}
/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.step{background:rgba(255,255,255,.08);border-radius:8px;padding:22px}
.step b{font:700 34px Arial;color:#7fd6d6}.step h4{margin:6px 0;color:#fff;font-size:18px}.step p{margin:0;font-size:15px;opacity:.9}
/* why */
.why{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.why .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.why .card h3{font-size:18px}
/* faq */
.faq{max-width:820px;margin:30px auto 0}
.faq button{width:100%;text-align:left;background:var(--ink);color:#fff;border:0;padding:16px 20px;margin-top:10px;font:600 16px Arial;cursor:pointer;display:flex;justify-content:space-between;border-radius:4px}
.faq .ans{display:none;padding:16px 20px;border:1px solid var(--line);border-top:0}
.faq .open+.ans{display:block}
/* footer */
.site-f{background:#0e1730;color:#cfd6e4;padding:50px 0 20px;font:15px/1.7 Arial}
.site-f .cols{display:grid;grid-template-columns:1.4fr 2fr;gap:40px}
.site-f ul{list-style:none;columns:3;padding:0;margin:0}.site-f a{text-decoration:none}
.site-f h4{color:#fff;margin:0 0 10px}.copy{border-top:1px solid #2a3556;margin-top:30px;padding-top:14px;text-align:center;font-size:13px}
.inner{padding:50px 20px}
@media(max-width:900px){
.hero .wrap,.split,.why,.site-f .cols{grid-template-columns:1fr}
.grid3,.steps{grid-template-columns:1fr 1fr}.chips{grid-template-columns:repeat(3,1fr)}
.burger{display:block}.site-h nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;padding:14px 20px}
.site-h nav.open{display:block}.site-h ul{flex-direction:column;gap:12px}.site-h li ul{display:flex;position:static;border:0;padding:6px 14px}
.hero h1{font-size:34px}.site-f ul{columns:2}}
@media(max-width:560px){.grid3,.steps,.why .grid2{grid-template-columns:1fr}.chips{grid-template-columns:1fr 1fr}}

/* ---- Shop and product pages ---- */
.shop{padding:40px 20px 70px}
.shop .woocommerce-breadcrumb{font:14px Arial;margin-bottom:20px;color:#667}
.shop ul.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.shop ul.products li.product{margin:0;position:relative}
.shop ul.products li.product img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.shop .woocommerce-loop-product__title{font:700 16px Arial;color:var(--ink);margin:12px 0 4px}
.shop .price{font:700 17px Arial;color:var(--ink)}.shop .price del{color:#889;font-weight:400}.shop .price ins{text-decoration:none}
.shop .button,.shop button.single_add_to_cart_button{background:var(--coral);color:#fff;border:0;border-radius:6px;padding:12px 22px;font:700 15px Arial;text-decoration:none;cursor:pointer}
.shop span.onsale{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;padding:5px 12px;font:700 13px Arial;z-index:2}
.shop div.product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:50px;align-items:start}
.shop div.product .woocommerce-product-gallery{background:#f6f6f6;padding:30px;border-radius:8px;margin:0;width:100%!important;float:none!important}
.shop div.product .woocommerce-product-gallery img{width:100%;height:auto;max-width:360px;margin:auto;display:block;border-radius:4px}
.shop div.product .summary{position:sticky;top:96px;float:none!important;width:auto!important}
.shop div.product .product_title{font-size:34px;margin:0 0 10px}
.shop div.product p.price{font-size:28px;margin:10px 0}
.shop .quantity input{width:70px;padding:11px;border:1px solid #bcc6d4;border-radius:5px;margin-right:8px}
.shop .variations td,.shop .variations th{padding:6px 10px 6px 0;text-align:left;font:15px Arial}
.shop .variations select{padding:10px;border:1px solid #bcc6d4;border-radius:5px}
.book-details{border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin:18px 0;background:var(--sky)}
.book-details h3{margin:0 0 10px;font-size:18px}
.book-details dl{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;margin:0;font:15px Arial}
.book-details dt{font-weight:700;color:var(--ink)}.book-details dd{margin:0}
.shop div.product .woocommerce-tabs,.shop div.product .related,.shop div.product .upsells{grid-column:1/-1}
.shop .woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:6px;padding:0;margin:0;border-bottom:2px solid var(--line)}
.shop .woocommerce-tabs ul.tabs li{margin:0}.shop .woocommerce-tabs ul.tabs a{display:block;padding:12px 20px;font:700 15px Arial;text-decoration:none;color:var(--ink)}
.shop .woocommerce-tabs ul.tabs li.active a{border-bottom:3px solid var(--coral)}
.shop .woocommerce-Tabs-panel{padding:24px 0}
.shop .related>h2{margin:30px 0 20px}
@media(max-width:900px){.shop ul.products{grid-template-columns:1fr 1fr}.shop div.product{grid-template-columns:1fr}.shop div.product .summary{position:static}}

/* ---- Homepage v6 (matches the reference layout) ---- */
.srch input{padding:8px 12px;border:1px solid var(--line);border-radius:20px;font:14px Arial;width:150px}
.promo{background:#fff;color:var(--txt);padding:36px;border-radius:10px;text-align:center;max-width:460px;margin:auto}
.promo h1{color:var(--ink);font-size:30px;margin:0 0 12px}.promo p{font-size:16px;margin:0 auto 18px}
.lead.dark{background:#2b1544;color:#fff}.lead.dark h3{color:#f6a23c}
.lead.dark small{color:#d8cdea}
.lead.light{background:#fff}.lead.light h3{color:#c4452d}
.banner{background:var(--sky);padding:60px 0}
.split .img.plain{background-color:transparent;background-size:contain;background-repeat:no-repeat;background-position:center;min-height:300px}
.split .img{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;min-height:320px}
.rail.cards{gap:24px}.rail.cards .card,.rail.cards .step{flex:0 0 calc(33.333% - 16px);scroll-snap-align:start}
.rail.cards .card{min-height:200px}
.tiles{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;margin-top:26px}
.tile{background:linear-gradient(160deg,var(--teal),var(--ink));color:#fff;border-radius:8px;padding:34px 6px;text-align:center;text-decoration:none;font:600 13px Arial}
.sec.dark .step{background:#fff;color:var(--txt)}.sec.dark .step h4{color:var(--ink)}.sec.dark .step b{color:#2f86c9}
.sec.dark p{color:#dfe6f2}
.why-sec{background:#1f2a44}.why-sec .card{background:#fff;color:var(--txt)}.why-sec .card h3{color:var(--ink)}
.site-f ul{columns:3}.soc a{display:inline-flex;width:36px;height:36px;border:1px solid #fff;border-radius:50%;align-items:center;justify-content:center;margin-right:8px;color:#fff;font:700 13px Arial}
@media(max-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}.rail.cards .card,.rail.cards .step{flex-basis:80%}.srch{display:none}}

/* ---- v7 fixes: card text colour on dark sections, process slider ---- */
.sec.dark .card p,.sec.dark .step p,.why-sec .card p{color:#3a4455;opacity:1}
.sec.dark .step h4,.why-sec .card h3{color:var(--ink)}
.rail.psteps{display:flex;grid-template-columns:none}


/* ================= v8: design matched to the reference sections ================= */
:root{--teal:#177a93;--coral:#d9534f;--pink:#e0707a;--gray:#f1f1f1}
body,h1,h2,h3,h4,.btn,nav,input,textarea,button{font-family:"Nunito",Arial,sans-serif}
body{font-size:15px;color:#4a4a4a}
.btn{border-radius:30px;padding:12px 30px}
.sec h2{font-size:28px;font-weight:800;color:#222}
.sub{color:#666;margin:0 0 22px}
.split .img.plain{min-height:340px}
.split .img.round{border-radius:14px;min-height:300px;background-size:cover;background-position:center;background-color:#dde6ea}
.split p{line-height:1.8}
/* intro */
.s-intro .split{grid-template-columns:1fr 1fr}.s-intro h2{font-size:24px}
/* banner */
.s-banner{background:linear-gradient(135deg,#f6f3f0,#e8e3de);padding:70px 0}
.s-banner h2{font-size:32px;font-weight:800;color:#222;margin:0 0 6px}
.s-banner h3{font-size:22px;color:#222;margin:0 0 14px}
/* services */
.s-services .card.svc{border:0;background:transparent;padding:10px 18px}
.s-services .card.svc h3{color:var(--teal);font-size:19px;display:inline-block;margin:0 0 10px 8px;vertical-align:middle}
.s-services .card.svc p{color:#666;font-size:14.5px;line-height:1.8}
.dots{display:flex;justify-content:center;gap:10px;margin-top:22px}
.dots span{width:11px;height:11px;border-radius:50%;background:#e9b4b4}.dots span.on{background:var(--coral)}
/* tiles */
.s-tiles h2{max-width:720px;margin:0 auto}
.tiles{gap:12px}
.tile{position:relative;overflow:hidden;border-radius:10px;padding:0;min-height:96px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#4f6672,#252f37) center/cover;color:#fff}
.tile::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.tile span{position:relative;padding:6px;font:700 12.5px/1.3 Nunito,Arial}
/* process */
.s-process{background:#101a2b center/cover}
.s-process h2{color:#fff}
.s-process .step{position:relative;background:#fff;border-radius:6px;padding:26px 24px;min-height:190px}
.s-process .step b{position:absolute;right:20px;top:10px;font:800 54px Nunito,Arial;color:#cfe3ec}
.s-process .step h4{color:var(--teal);font-size:18px;margin:0 0 10px;max-width:70%}
.s-process .step p{color:#555}
.s-process .step.act{background:var(--teal)}
.s-process .step.act h4,.s-process .step.act p{color:#fff}.s-process .step.act b{color:#6fb3c6}
.s-process .dots span{background:#8a6b78}.s-process .dots span.on{background:#e04b5a}
/* unleash */
.s-unleash h2{font-size:24px}
/* why */
.s-why{background:#1a2438 center/cover}
.s-why h2{color:#fff;font-size:30px}
.wcards{display:grid;gap:16px;margin-top:22px}
.s-why .card{background:#fff;border:0;border-radius:3px;padding:18px 22px;box-shadow:7px 7px 0 var(--pink)}
.s-why .card h3{color:var(--teal);font-size:17px;margin:0 0 6px}.s-why .card p{margin:0;color:#444;font-size:14px}
.lead.light{border-radius:6px;padding:28px 26px}.lead.light h3{color:#c4452d;font-size:21px;line-height:1.35}
.lead.light input[type=text],.lead.light input[type=email],.lead.light input[type=tel],.lead.light textarea{border-radius:6px;border-color:#7fb2c0}
.lead.light .btn{background:var(--teal)}
/* ideas + benefits */
.s-ideas,.s-benefits{background:var(--gray)}
.s-ideas h2,.s-benefits h2{font-size:24px}
/* faq */
.s-faq h2{margin:0}
.s-faq .faq{margin:20px 0 0;max-width:none}
.s-faq .faq button{background:var(--teal);border-radius:4px;color:#fff;font:700 14px Nunito,Arial}
.s-faq .faq .ans{background:#fff;border:1px solid var(--line)}
@media(max-width:900px){.s-intro .split{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(3,1fr)}}

/* ---- v10: mobile menu ---- */
html,body{max-width:100%;overflow-x:clip}
.burger{border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);padding:2px 12px;font-size:26px;line-height:1.3;cursor:pointer}
@media(max-width:900px){
.site-h nav{max-height:calc(100vh - 110px);overflow-y:auto;box-shadow:0 12px 20px rgba(0,0,0,.12);border-top:1px solid var(--line)}
.site-h nav ul{gap:0}
.site-h nav li{border-bottom:1px solid var(--line)}
.site-h nav li>a{display:block;padding:13px 4px;font-size:16px}
.site-h li ul{display:none;padding:0 0 8px 14px;border:0}
.site-h li.open>ul{display:block}
.site-h li ul li{border:0}.site-h li ul a{font-weight:500;padding:9px 4px;font-size:15px}
.site-h li.menu-item-has-children>a::after{content:"+";float:right;font-weight:700;color:var(--teal);padding-right:6px}
.site-h li.menu-item-has-children.open>a::after{content:"\2212"}
}


/* ---- v12: image classes for pasted page designs (change the picture with style="background-image:url(YOUR-URL)") ---- */
.split .img.i-split-1{background-image:url(assets/split-1.svg)}
.split .img.i-split-2{background-image:url(assets/split-2.svg)}
.split .img.i-split-3{background-image:url(assets/split-3.svg)}
.split .img.i-split-4{background-image:url(assets/split-4.svg)}
.split .img.i-faq{background-image:url(assets/faq.svg)}
.split .img.i-banner{background-image:url(assets/banner.svg)}
.tile.i-tile-1{background-image:url(assets/tile-1.svg)}.tile.i-tile-2{background-image:url(assets/tile-2.svg)}.tile.i-tile-3{background-image:url(assets/tile-3.svg)}
.tile.i-tile-4{background-image:url(assets/tile-4.svg)}.tile.i-tile-5{background-image:url(assets/tile-5.svg)}.tile.i-tile-6{background-image:url(assets/tile-6.svg)}
.tile.i-tile-7{background-image:url(assets/tile-7.svg)}.tile.i-tile-8{background-image:url(assets/tile-8.svg)}.tile.i-tile-9{background-image:url(assets/tile-9.svg)}
.sec.i-shelf{background-image:linear-gradient(rgba(8,14,26,.8),rgba(8,14,26,.8)),url(assets/bg-shelf.svg);background-size:cover;background-position:center}
.lead .btn{display:block;text-align:center}

/* ---- v13: Our Services cards with scrolling text, icon and dividers ---- */
.s-services .card.svc{border-radius:0;border-right:1px solid #e3e3e3;padding:6px 22px 6px 6px}
.s-services .card.svc:last-child{border-right:0}
.s-services .card.svc .ic{display:none}
.s-services .card.svc h3{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.s-services .card.svc h3::before{content:"";flex:0 0 46px;height:46px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9a78f' stroke-width='1.1'%3E%3Cpath d='M3 5h7a2 2 0 0 1 2 2v12a2 2 0 0 0-2-2H3zM21 5h-7a2 2 0 0 0-2 2v12a2 2 0 0 1 2-2h7z'/%3E%3Cpath d='M5.5 9h4M5.5 12h4M14.5 9h4M14.5 12h4'/%3E%3C/svg%3E") center/contain no-repeat}
.s-services .card.svc p{max-height:210px;overflow-y:auto;padding-right:14px;margin:0;scrollbar-width:thin;scrollbar-color:#16213a #e8e8e8}
.s-services .card.svc p::-webkit-scrollbar{width:3px}
.s-services .card.svc p::-webkit-scrollbar-track{background:#e8e8e8}
.s-services .card.svc p::-webkit-scrollbar-thumb{background:#16213a}
.dots span{cursor:pointer}


/* ================= v17: "Why choose us" and "Unleash" sections ================= */
:root{--coral:#c9534f;--teal:#0d6c84}
.s-why{isolation:isolate}
.s-why h2{font-size:34px;font-weight:800;line-height:1.25;color:#fff;text-align:left;margin:0 0 38px}
.wcards{gap:36px}
.s-why .wcards .card{position:relative;background:#fff;border:0;border-radius:2px;box-shadow:none;padding:20px 26px}
.s-why .wcards .card::before{content:"";position:absolute;left:-12px;top:-12px;width:84px;height:26px;background:var(--teal);z-index:-1}
.s-why .wcards .card::after{content:"";position:absolute;right:-14px;bottom:-14px;width:34px;height:96px;background:var(--coral);z-index:-1}
.s-why .wcards .card h3{color:var(--teal);font-size:22px;font-weight:700;margin:0 0 8px}
.s-why .wcards .card p{color:#555;font-size:15px;line-height:1.7;margin:0}
.lead.light{border-radius:6px;padding:34px 30px}
.lead.light h3{color:var(--coral);font-size:25px;font-weight:800;text-align:center;line-height:1.35;margin:0 0 26px}
.lead.light input[type=text],.lead.light input[type=email],.lead.light input[type=tel],.lead.light textarea{border:1.5px solid var(--teal);border-radius:8px;padding:14px;font-size:15px;margin-bottom:16px}
.lead.light .btn{background:var(--teal);font-weight:700}
.s-unleash .wrap{position:relative}
.s-unleash .wrap::after{content:"";position:absolute;right:-6px;bottom:-40px;width:130px;height:150px;opacity:.75;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M60 138C58 100 62 70 70 40'/%3E%3Cpath d='M70 40C40 30 12 44 6 76c22 4 44-4 58-22M70 40c28-14 52-6 60 22-20 8-40 4-52-10'/%3E%3Cpath d='M64 70C46 72 30 84 26 104c16 0 30-8 38-22M66 76c20-6 38 4 44 22-16 4-30-2-40-12'/%3E%3C/svg%3E") center/contain no-repeat}
.s-unleash .split>div:last-child p,.s-ideas .split>div:first-child p,.s-benefits .split>div:first-child p{max-height:250px;overflow-y:auto;padding-right:16px;scrollbar-width:thin;scrollbar-color:#16213a #e8e8e8}
.s-unleash p::-webkit-scrollbar,.s-ideas p::-webkit-scrollbar,.s-benefits p::-webkit-scrollbar{width:3px}
.s-unleash p::-webkit-scrollbar-track,.s-ideas p::-webkit-scrollbar-track,.s-benefits p::-webkit-scrollbar-track{background:#e8e8e8}
.s-unleash p::-webkit-scrollbar-thumb,.s-ideas p::-webkit-scrollbar-thumb,.s-benefits p::-webkit-scrollbar-thumb{background:#16213a}
ul.feather{list-style:none;padding:0;margin:14px 0}
ul.feather li{position:relative;padding:2px 0 2px 42px;margin-bottom:12px;line-height:1.7}
ul.feather li::before{content:"";position:absolute;left:0;top:4px;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9534f' stroke='%23c9534f' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cpath d='M16 8L2 22M17.5 15H9' stroke='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:900px){.s-why h2{font-size:27px}.s-why .wcards .card::before,.s-why .wcards .card::after{display:none}.s-unleash .wrap::after{display:none}}


/* ---- v18: contact page ---- */
.cinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px;text-align:center}
.ci{background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px 22px}
.ci::before{content:"";display:block;width:58px;height:58px;border-radius:50%;margin:0 auto 14px;background-color:var(--teal);background-position:center;background-repeat:no-repeat;background-size:28px}
.ci.ph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.ci.ml::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.ci.pn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.ci h3{color:var(--teal);margin:0 0 8px;font-size:20px}.ci p{margin:0 0 4px;color:#555}.ci a{color:var(--ink);font-weight:700;text-decoration:none}
.map{margin-top:30px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}.map iframe{display:block;width:100%;height:360px;border:0}
@media(max-width:900px){.cinfo{grid-template-columns:1fr}}


/* ---- v22: feature section (text left, large faded picture right, glowing buttons) ---- */
.s-feature{position:relative;background:#f4f4f4;overflow:hidden;min-height:520px;display:flex;align-items:center}
.s-feature .wrap{position:relative;z-index:2;padding-top:80px;padding-bottom:80px}
.s-feature .txt{position:relative;max-width:560px;margin-left:8%}
.s-feature .txt::before{content:"";position:absolute;left:-10px;top:-70px;width:150px;height:180px;opacity:.55;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150' fill='none' stroke='%23e8a3ab' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M104 8C60 14 24 50 14 118c14-8 28-22 36-40 10-8 22-24 30-40 8-10 16-20 24-30z' fill='%23f6d4d8' fill-opacity='.6'/%3E%3Cpath d='M104 8L10 142M70 40l-26 6M58 62l-28 6M46 84l-24 8M82 28l-4 24M66 52l-2 24M54 74l0 24'/%3E%3C/svg%3E") center/contain no-repeat}
.s-feature h2{position:relative;font-size:32px;font-weight:800;color:#2b2b2b;margin:0 0 14px;line-height:1.25}
.s-feature p{position:relative;color:#555;font-size:17px;line-height:1.85;margin:0 0 6px}
.s-feature .cta-row{gap:18px;margin-top:22px}
.s-feature .btn{box-shadow:0 0 0 9px rgba(201,83,79,.22);padding:14px 36px}
.s-feature .btn.alt{box-shadow:0 0 0 9px rgba(13,108,132,.2)}
.s-feature .feat-img{position:absolute;right:0;top:0;bottom:0;width:52%;z-index:1;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%);mask-image:linear-gradient(to right,transparent 0,#000 38%)}
.feat-img.i-feature{background-image:url(assets/feature-book.svg)}
@media(max-width:900px){.s-feature{display:block;min-height:0}.s-feature .txt{margin-left:0;max-width:none}.s-feature .txt::before{display:none}.s-feature .feat-img{position:relative;width:100%;height:280px;-webkit-mask-image:none;mask-image:none}}

/* ---- v23: feature section alignment fix ---- */
.s-feature .wrap{width:100%}
.s-feature .txt{margin-left:0;max-width:520px}
.s-feature .feat-img{width:48%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 45%);mask-image:linear-gradient(to right,transparent 0,#000 45%)}
@media(max-width:900px){.s-feature .feat-img{width:100%}}


/* ---- v24: service tiles as a slider (picture on top, readable label at the bottom) ---- */
.s-tiles.sec{padding-top:46px;padding-bottom:50px}
.tiles{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 10px;margin-top:22px;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tiles br,.tiles p{display:none}
.tile{flex:0 0 172px;height:196px;min-height:0;scroll-snap-align:start;align-items:flex-end;justify-content:center;padding:0;border-radius:12px;background-size:cover;background-position:center}
.tile::before{background:rgba(0,0,0,.10)}
.tile span{position:relative;display:block;width:100%;padding:26px 8px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72));font:700 15px/1.25 Nunito,Arial;text-align:center;color:#fff}
.rail,.rail.cards{scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
@media(max-width:560px){.tile{flex-basis:140px;height:170px}}


/* ---- v25: warmer, lighter bookshelf background ---- */
.sec.i-shelf{background-image:linear-gradient(rgba(20,12,8,.55),rgba(20,12,8,.55)),url(assets/bg-shelf.svg);background-size:cover;background-position:center}


/* ---- v26: larger red quill bullets ---- */
ul.feather{margin:18px 0}
ul.feather li{padding:4px 0 4px 54px;margin-bottom:10px;font-size:17px;line-height:1.5;color:#555;min-height:40px}
ul.feather li::before{top:0;width:40px;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 2.5C13 3 6.5 8 4.6 16.4L3 21.5l4.2-1.3C15.6 18 21 11 21.5 2.5z' fill='%23d3324a'/%3E%3Cpath d='M20 4.2L4.6 19.6' stroke='%23fff' stroke-width='.9' stroke-linecap='round' fill='none'/%3E%3Cpath d='M12.5 9.2l-4.8.4M15.6 6l-5 .2M10 13l-4.3.6' stroke='%23fff' stroke-width='.7' stroke-linecap='round' fill='none' opacity='.8'/%3E%3C/svg%3E") center/contain no-repeat}


/* ---- v27: navigation bar (top bar, dropdowns, side flyouts) ---- */
.top{text-align:left;padding:9px 0}
.top .wrap{display:flex;justify-content:flex-end;align-items:center;gap:30px}
.top a{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font:700 14px Nunito,Arial}
.top svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:901px){
.site-h nav>ul>li>a,.site-h nav>div>ul>li>a{display:inline-block;padding:26px 0}
.site-h li.menu-item-has-children>a::after{content:"";display:inline-block;margin-left:6px;vertical-align:middle;border:4px solid transparent;border-top-color:currentColor;border-bottom:0}
.site-h li ul{background:#fff;border:0;border-radius:0 0 6px 6px;padding:0;min-width:230px;box-shadow:0 10px 24px rgba(0,0,0,.18);gap:0;z-index:60}
.site-h li li{position:relative;border-bottom:1px solid #222}
.site-h li li:last-child{border-bottom:0}
.site-h li li>a{display:block;padding:12px 18px;font-weight:700;font-size:14.5px;color:#111;white-space:nowrap}
.site-h li li:hover>a,.site-h li li:focus-within>a{background:var(--teal);color:#fff}
.site-h li li>ul{top:0;left:100%;border-radius:0 6px 6px 0}
.site-h li:hover>ul,.site-h li:focus-within>ul{display:flex}
.site-h li li.menu-item-has-children>a::after{border-top-color:transparent;border-left-color:currentColor;border-right:0;border-bottom-width:4px;border-top-width:4px;float:right;margin-top:6px}
.site-h nav>ul>li:nth-last-child(-n+2) li>ul{left:auto;right:100%;border-radius:6px 0 0 6px}
}

/* ---- v30: "Why choose us" form aligned with the first card (heading stays above the cards) ---- */
@media(min-width:901px){
.s-why .why{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto 1fr;column-gap:44px;row-gap:0;align-items:start}
.s-why .why>div:first-child{display:contents}
.s-why .why>div:first-child>h2{grid-column:1;grid-row:1}
.s-why .why>div:first-child>.wcards{grid-column:1;grid-row:2}
.s-why .why>.lead{grid-column:2;grid-row:2;margin-top:8px}
}


/* ---- v31: scrolling text box (paragraphs + list scroll together, thin dark scroll line) ---- */
.scroll-block{max-height:270px;overflow-y:auto;padding-right:16px;margin-bottom:6px;scrollbar-width:thin;scrollbar-color:#16213a #e8e8e8}
.scroll-block::-webkit-scrollbar{width:3px}
.scroll-block::-webkit-scrollbar-track{background:#e8e8e8}
.scroll-block::-webkit-scrollbar-thumb{background:#16213a}
.s-unleash .split .scroll-block p,.s-ideas .split .scroll-block p,.s-benefits .split .scroll-block p{max-height:none!important;overflow:visible!important;padding-right:0!important}
.scroll-block>p:first-child{margin-top:0}