:root{--navy:#171c35;--navy-2:#252b49;--orange:#ff8a2a;--orange-2:#ffb55c;--purple:#8b79c9;--purple-2:#b4a5e1;--ink:#20243a;--muted:#73768a;--line:#ececf1;--soft:#fbfaf8;--white:#fff;--radius:26px;--shadow:0 20px 60px rgba(27,29,55,.08);--container:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;background:#fff;line-height:1.65}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");z-index:20}.site-noise{position:fixed;inset:0;pointer-events:none;z-index:19}.container{width:min(var(--container),calc(100% - 48px));margin:auto}.section{padding:110px 0}.section-sm{padding:76px 0}.site-header{position:relative;z-index:30;background:rgba(255,255,255,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(30,34,60,.05)}.nav-wrap{height:82px;display:flex;align-items:center;gap:42px}.brand{display:block;width:128px}.brand img{display:block;width:100%;height:auto}.main-nav{display:flex;gap:30px;align-items:center;margin-left:auto}.main-nav a{position:relative;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;padding:30px 0}.main-nav a:after{content:"";position:absolute;left:50%;bottom:20px;width:5px;height:5px;border-radius:50%;background:var(--orange);transform:translateX(-50%) scale(0);transition:.25s}.main-nav a:hover:after,.main-nav a.active:after{transform:translateX(-50%) scale(1)}.nav-cta{margin-left:4px}.nav-toggle{display:none;background:none;border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.25s ease}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(255,138,42,.2)}.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}.btn-outline{background:transparent;color:var(--navy);border-color:#dfe0e8}.hero{position:relative;overflow:hidden;padding:95px 0 75px}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}.hero-copy{position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:#7e8193}.eyebrow i{display:block;width:8px;height:8px;border-radius:50%;background:var(--orange)}h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif;color:var(--navy);line-height:1.08;letter-spacing:-.045em;margin:0 0 20px}h1{font-size:clamp(50px,6vw,78px);font-weight:800}h2{font-size:clamp(36px,4vw,54px)}h3{font-size:20px;letter-spacing:-.025em}

/* =========================================================
   EMPHASIS TYPOGRAPHY
   Orange emphasis by default; decorative underline optional.
   ========================================================= */

em {
    font-style: normal;
    color: var(--orange);
    position: relative;
}

/* Underline is applied only when explicitly requested. */
em.underline::after {
    content: "";
    position: absolute;
    height: 7px;
    width: 90%;
    left: 5%;
    bottom: -6px;
    background: rgba(255, 138, 42, 0.18);
    border-radius: 50%;
    transform: rotate(-2deg);
    pointer-events: none;
}

/* Slightly more subtle underline for smaller text. */
em.underline-subtle::after {
    content: "";
    position: absolute;
    height: 4px;
    width: 90%;
    left: 5%;
    bottom: -4px;
    background: rgba(255, 138, 42, 0.16);
    border-radius: 50%;
    transform: rotate(-2deg);
    pointer-events: none;
}
     .lead{font-size:18px;max-width:610px;color:#676a7d;margin:0 0 30px}
     
     .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
     
     .trust-line{display:flex;align-items:center;gap:12px;color:#7c7f90;font-size:12px;margin-top:28px}.avatar-stack{display:flex}
     
     .avatar-stack span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f2f1f4;border:2px solid #fff;margin-left:-7px;font-size:8px;font-weight:800;color:var(--navy)}
     
     .avatar-stack span:first-child{margin-left:0;background:#ffd9bd}.avatar-stack span:nth-child(2){background:#ddd6f2}.avatar-stack span:nth-child(3){background:#d8e7dc}.avatar-stack span:last-child{background:var(--navy);color:#fff}.hero-visual{height:550px;position:relative}.hero-wash,.cta-wash,.visual-wash{position:absolute;border-radius:50%;filter:blur(25px);opacity:.72;mix-blend-mode:multiply}.wash-orange{background:radial-gradient(circle,#ffd9b3 0,#ffb66b 32%,transparent 70%);width:520px;height:400px;right:-130px;top:-80px}.wash-purple{background:radial-gradient(circle,#d8cff1 0,#a99ad8 35%,transparent 70%);width:450px;height:420px;right:70px;top:50px}.visual-wash{inset:50px -20px 10px 10px;background:radial-gradient(circle at 40% 35%,rgba(255,174,99,.62),transparent 35%),radial-gradient(circle at 68% 64%,rgba(150,132,206,.62),transparent 42%);filter:blur(35px)}.browser-card{position:absolute;width:78%;height:390px;top:65px;right:8%;background:#fff;border:7px solid #f4f3f4;border-radius:22px;box-shadow:0 35px 70px rgba(30,35,70,.16);transform:rotate(-5deg)}.browser-bar{height:35px;background:#f6f5f5;border-radius:12px 12px 0 0;display:flex;align-items:center;padding:0 14px;gap:6px}.browser-bar span{width:7px;height:7px;border-radius:50%;background:#ddd}.browser-bar small{margin-left:auto;color:#aaa;font-size:8px}.browser-screen{height:calc(100% - 35px);position:relative;padding:38px;background:linear-gradient(135deg,#fff 20%,#faf6ef)}.mini-brand{font-size:8px;font-weight:800;color:var(--orange);letter-spacing:.12em}.mini-title{font-family:'Plus Jakarta Sans';font-size:30px;line-height:1.1;color:var(--navy);margin-top:50px}.mini-title b{color:var(--orange)}.mini-lines{margin-top:22px;display:grid;gap:8px}.mini-lines i{height:7px;border-radius:10px;background:#e5e5ea;width:70%}.mini-lines i:nth-child(2){width:55%}.mini-lines i:nth-child(3){width:42%}.mini-button{width:90px;height:30px;background:var(--orange);border-radius:20px;margin-top:22px}.mini-orb{position:absolute;right:20px;bottom:30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#fff,#ffd6b0 40%,rgba(255,255,255,0) 70%)}.phone-card{position:absolute;right:0;bottom:35px;width:150px;height:285px;border:7px solid #222842;background:#fff;border-radius:28px;box-shadow:0 25px 55px rgba(30,35,70,.2);transform:rotate(7deg);padding:35px 16px 20px}.phone-notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:55px;height:12px;background:#222842;border-radius:0 0 10px 10px}.phone-content{height:100%;background:linear-gradient(160deg,#fff6ed,#f4f0fb);border-radius:14px;padding:24px 12px;display:flex;flex-direction:column;gap:8px}.phone-content b{font-family:'Plus Jakarta Sans';font-size:18px}.phone-content span{color:var(--orange);font-size:16px;font-weight:700}.phone-content i{display:block;height:8px;background:#dddde6;border-radius:5px;width:100%}.phone-content i:last-child{width:60%}.floating-tag{position:absolute;padding:12px 16px;background:#fff;border-radius:999px;box-shadow:var(--shadow);font-size:11px;font-weight:800}.tag-orange{left:0;bottom:95px;color:var(--orange);transform:rotate(-4deg)}.tag-purple{right:30px;top:30px;color:#7565b5;transform:rotate(5deg)}.hero-doodle{position:absolute;right:3%;top:18%;color:var(--orange);font-size:45px}.logo-strip{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.logo-strip p{text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#999ba7;margin:0 0 22px}.client-logos{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;color:#747684}.client-logos span{font-family:'Plus Jakarta Sans';font-weight:800;font-size:16px;opacity:.75}.section-heading.center{text-align:center;max-width:720px;margin:0 auto 52px}.section-heading p,.split-heading p{color:var(--muted);max-width:650px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{padding:30px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;box-shadow:0 10px 30px rgba(30,34,60,.025);transition:.3s}.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}.icon-bubble,.service-row-icon{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;margin-bottom:22px}.icon-bubble.orange,.service-row-icon.orange{background:#fff0e2;color:var(--orange)}.icon-bubble.purple,.service-row-icon.purple{background:#f0ecfa;color:#7967bc}.icon{width:24px;height:24px}.service-card p{color:var(--muted);font-size:14px;margin:0 0 24px}.card-link{color:var(--orange);font-size:13px;font-weight:800;display:flex;align-items:center;gap:7px}.card-link .icon{width:16px}.split-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:40px}.split-heading>div:first-child{max-width:730px}.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.work-card{text-decoration:none;color:inherit;display:block}.work-image{height:260px;border-radius:24px;overflow:hidden;background:#f1f0f2}.work-image.large{height:330px}.placeholder-art{height:100%;position:relative;overflow:hidden;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(135deg,#f7f5f2,#e9e4f2)}.placeholder-art:before{content:"";position:absolute;width:240px;height:240px;right:-70px;top:-60px;border-radius:50%;background:var(--accent,#ff8a2a);opacity:.28;filter:blur(3px)}.placeholder-art:after{content:"";position:absolute;width:200px;height:200px;left:-70px;bottom:-90px;border-radius:50%;background:#8f7dcc;opacity:.25;filter:blur(3px)}.placeholder-art span,.placeholder-art b{position:relative;z-index:2}.placeholder-art span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#666a7c;margin-bottom:8px}.placeholder-art b{font-family:'Plus Jakarta Sans';font-size:22px;line-height:1.1;color:var(--navy);max-width:85%}.placeholder-art i{position:absolute;right:20px;top:40px;width:110px;height:75px;border:3px solid rgba(255,255,255,.85);border-radius:12px;transform:rotate(-8deg);box-shadow:10px 12px 0 rgba(255,255,255,.4)}.work-meta{padding:15px 4px}.work-meta h3{font-size:15px;margin:0 0 4px}.work-meta span{font-size:12px;color:#888b99}.process-panel{padding:55px;border-radius:34px;background:linear-gradient(135deg,#fff8f0,#f7f4fc);position:relative;overflow:hidden;display:grid;grid-template-columns:280px 1fr;gap:60px}.process-panel:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-120px;top:-120px;background:rgba(255,180,104,.16);filter:blur(20px)}.process-intro p{color:var(--muted)}.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}.process-step{position:relative}.process-step:after{content:"→";position:absolute;right:-12px;top:0;color:#aaa}.process-step:last-child:after{display:none}.process-step>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 7px 20px rgba(30,34,60,.07);color:var(--orange);font-size:11px;font-weight:800;margin-bottom:18px}.process-step h3{font-size:16px;margin-bottom:8px}.process-step p{font-size:12px;color:var(--muted);margin:0}.rating{font-size:14px;color:#ffad35;white-space:nowrap}.rating small{display:block;color:var(--muted);font-size:11px;margin-top:6px}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.testimonial-grid article{border:1px solid var(--line);border-radius:26px;padding:30px;position:relative}.quote-mark{font-family:Georgia;font-size:54px;color:var(--purple);line-height:.7}.testimonial-grid p{color:#626577;min-height:110px}.testimonial-grid strong,.testimonial-grid span{display:block;font-size:12px}.testimonial-grid span{color:#999baa;margin-top:3px}.cta-section{position:relative;overflow:hidden}.cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:50px;padding:58px 70px;border-radius:34px;background:#faf8f6;border:1px solid #f1ece8}.cta-inner h2{margin-bottom:12px}.cta-inner p{color:var(--muted);max-width:650px;margin:0}.cta-actions{display:flex;gap:10px;flex-shrink:0}.cta-wash{width:340px;height:280px}.cta-section .wash-orange{left:-80px;top:-70px}.cta-section .wash-purple{right:-60px;bottom:-80px;top:auto}.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.post-card{text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:25px;overflow:hidden;background:#fff;transition:.25s}.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.post-art{height:190px;background:linear-gradient(135deg,#f8efe7,#eee9fa);padding:24px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden}.post-art:after{content:"";position:absolute;width:180px;height:180px;right:-30px;top:-60px;border-radius:50%;background:rgba(255,139,42,.28);filter:blur(5px)}.post-art span,.post-art b{position:relative;z-index:2}.post-art span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#666a7c}.post-art b{font-family:'Plus Jakarta Sans';font-size:20px;line-height:1.15;max-width:85%;margin-top:10px}.post-copy{padding:22px}.post-copy small{color:#989ba9;font-size:10px}.post-copy h3,.post-copy h2{font-size:19px;margin:9px 0 16px}.post-copy p{color:var(--muted);font-size:13px}.post-copy>span{color:var(--orange);font-size:12px;font-weight:800}.site-footer{position:relative;overflow:hidden;padding:75px 0 25px;background:#171c35;color:#e9eaf0}.site-footer a{display:block;color:#bfc2d0;text-decoration:none;font-size:13px;margin:10px 0}.footer-grid{display:grid;grid-template-columns:1.6fr .8fr .9fr 1fr;gap:60px;position:relative;z-index:2}.footer-brand img{width:135px;background:#fff;border-radius:8px;padding:3px}.footer-brand p{max-width:290px;color:#aeb1c1;font-size:13px;margin:20px 0}.site-footer h3{font-size:12px;color:#fff;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}.socials{display:flex;gap:8px}.socials a{width:32px;height:32px;border:1px solid #343b5d;border-radius:50%;display:grid;place-items:center;margin:0;color:#fff;font-size:11px}.footer-contact span{display:block;color:#bfc2d0;font-size:13px;margin:10px 0}.footer-pill{display:inline-flex!important;border:1px solid #48506e;padding:10px 14px;border-radius:999px;margin-top:18px!important;color:#fff!important}.footer-bottom{border-top:1px solid #2d3453;margin-top:55px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#8e92a6;font-size:11px;position:relative;z-index:2}.footer-bottom a{font-size:11px;margin:0}.footer-bottom b{color:var(--orange)}.footer-glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.25;width:350px;height:300px}.footer-glow-orange{background:#ff8a2a;left:-180px;top:0}.footer-glow-purple{background:#8672c8;right:-180px;bottom:0}.page-hero{position:relative;overflow:hidden;background:#fff}.page-hero .container{position:relative;z-index:2}.page-hero h1{max-width:850px;margin-top:18px}.page-hero p{font-size:18px;color:var(--muted);max-width:700px}.about-grid,.detail-grid,.case-content{display:grid;grid-template-columns:1fr 1.3fr;gap:100px}.prose{color:#626577;font-size:16px}.prose p{margin:0 0 20px}.prose h2,.prose h3{margin-top:36px}.prose li{margin:10px 0}.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.value-grid>div{border-top:2px solid #ececf1;padding-top:18px}.value-grid b{color:var(--orange);font-size:12px}.value-grid p{color:var(--muted);font-size:13px}.story-panel{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.story-art{height:480px;border-radius:35px;background:linear-gradient(145deg,#fff2e2,#e9e3f7);position:relative;overflow:hidden;display:grid;place-items:center}.story-orb{width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#ffbd7e 35%,#907dca 75%);filter:blur(2px);opacity:.85}.story-art span{position:absolute;font-family:'Plus Jakarta Sans';font-weight:800;font-size:60px;line-height:.85;color:#fff;text-align:center;text-shadow:0 8px 25px rgba(45,36,75,.12)}.service-list{display:grid;gap:12px}.service-row{display:grid;grid-template-columns:50px 60px 1fr 50px;align-items:center;gap:22px;padding:30px;border:1px solid var(--line);border-radius:26px}.service-number{font-size:12px;color:#9a9daa}.service-row-icon{margin:0}.service-row-copy h2{font-size:25px;margin-bottom:7px}.service-row-copy p{margin:0;color:var(--muted);font-size:14px;max-width:650px}.service-row-copy ul{display:flex;gap:18px;list-style:none;padding:0;margin:15px 0 0;flex-wrap:wrap}.service-row-copy li{font-size:11px;color:#777a89}.service-row-copy li:before{content:"✓";color:var(--orange);font-weight:800;margin-right:5px}.round-arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#f6f4fb;color:#7868b7;text-decoration:none}.detail-grid{align-items:start}.big-check-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}.big-check-list li{display:flex;align-items:center;gap:13px;font-family:'Plus Jakarta Sans';font-size:17px;color:var(--navy)}.big-check-list .icon{color:var(--orange);width:21px}.detail-band{background:#faf9f7}.band-card{max-width:900px;margin:auto;text-align:center;padding:70px 30px}.band-card p{color:var(--muted);max-width:650px;margin:0 auto 28px}.case-hero{padding-top:80px;position:relative;overflow:hidden}.case-label{display:flex;gap:12px;margin-bottom:25px}.case-label span{padding:7px 12px;border-radius:999px;background:#f5f3fa;color:#7769ae;font-size:11px;font-weight:800}.case-hero h1{max-width:900px}.case-hero> .container>p{font-size:19px;color:var(--muted);max-width:760px}.case-meta{display:flex;gap:60px;margin-top:45px}.case-meta span{display:flex;flex-direction:column;color:var(--muted);font-size:13px}.case-meta b{text-transform:uppercase;font-size:9px;letter-spacing:.12em;color:#999baa;margin-bottom:4px}.case-art{height:620px}.placeholder-art.case{border-radius:32px}.placeholder-art.case b{font-size:52px;max-width:70%}.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:35px}.filter{border:1px solid var(--line);background:#fff;padding:10px 17px;border-radius:999px;color:#77798a;font-weight:700;cursor:pointer}.filter.active,.filter:hover{background:var(--navy);color:#fff;border-color:var(--navy)}.portfolio-all-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:42px 20px}.article-narrow{max-width:850px}.article-header{text-align:center;position:relative;overflow:hidden}.article-header h1{font-size:clamp(42px,5vw,66px);margin:20px auto}.article-header p{font-size:18px;color:var(--muted);max-width:750px;margin:0 auto 20px}.article-header small{color:#999baa}.article-body{padding-top:40px}.article-art{height:430px;margin-bottom:55px}.article-art .placeholder-art{border-radius:32px}.article-body .prose{font-size:17px;line-height:1.8}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}.contact-info h2{margin-top:20px}.contact-info>p{color:var(--muted)}.contact-details{margin-top:35px;display:grid;gap:16px}.contact-details a,.contact-details span{display:flex;flex-direction:column;text-decoration:none;color:var(--navy);font-weight:700}.contact-details small{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#999baa;margin-bottom:3px}.contact-form{border:1px solid var(--line);border-radius:30px;padding:32px;box-shadow:var(--shadow)}.contact-form label{display:block;font-size:12px;font-weight:800;color:var(--navy);margin-bottom:18px}.contact-form label span{font-weight:400;color:#aaa}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form input,.contact-form textarea,.contact-form select{display:block;width:100%;border:1px solid #e4e4ea;border-radius:13px;background:#fff;padding:13px 14px;margin-top:8px;font:inherit;font-size:13px;color:var(--navy);outline:none}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#a696d5;box-shadow:0 0 0 4px #f2effb}.contact-form textarea{resize:vertical}.honeypot{position:absolute;left:-9999px}.form-message{padding:13px 15px;border-radius:12px;font-size:12px;margin-bottom:18px}.form-message.success{background:#edf8f0;color:#2d7a43}.form-message.error{background:#fff0ef;color:#b44337}.error-page{max-width:900px}.error-page h1{margin-top:20px}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.delay-4{transition-delay:.32s}
@media(max-width:1000px){.main-nav{gap:18px}.hero-grid{grid-template-columns:1fr}.hero-visual{height:470px}.service-grid{grid-template-columns:repeat(2,1fr)}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.process-panel{grid-template-columns:1fr}.process-steps{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.about-grid,.detail-grid,.case-content,.contact-grid,.story-panel{grid-template-columns:1fr;gap:40px}.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.container{width:min(var(--container),calc(100% - 32px))}.site-header{position:sticky;top:0}.nav-wrap{height:70px}.brand{width:110px}.nav-toggle{display:flex;flex-direction:column;gap:4px;margin-left:auto}.nav-toggle span{width:24px;height:2px;background:var(--navy)}.main-nav{display:none;position:absolute;left:16px;right:16px;top:70px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}.main-nav.open{display:flex}.main-nav a{padding:12px 14px}.main-nav a:after{display:none}.nav-cta{display:none}.section{padding:75px 0}.section-sm{padding:60px 0}.hero{padding-top:65px}.hero h1{font-size:47px}.lead{font-size:16px}.hero-visual{height:370px;margin-top:20px}.browser-card{height:270px;width:85%;right:5%;top:45px}.browser-screen{padding:25px}.mini-title{font-size:21px;margin-top:30px}.phone-card{width:110px;height:205px;right:0;bottom:15px}.phone-content{padding:20px 8px}.phone-content b{font-size:13px}.phone-content span{font-size:12px}.floating-tag{font-size:9px;padding:9px 12px}.tag-orange{left:0;bottom:55px}.tag-purple{right:0;top:5px}.client-logos{justify-content:center}.client-logos span{font-size:13px}.service-grid,.portfolio-grid,.testimonial-grid,.post-grid,.portfolio-all-grid{grid-template-columns:1fr}.process-panel{padding:30px}.process-steps{grid-template-columns:1fr 1fr}.process-step:after{display:none}.split-heading{align-items:start;flex-direction:column}.cta-inner{padding:38px 26px;flex-direction:column;align-items:start}.cta-actions{flex-wrap:wrap}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-bottom{flex-wrap:wrap}.service-row{grid-template-columns:40px 50px 1fr}.service-row-copy ul{display:none}.round-arrow{grid-column:3}.case-meta{gap:20px;flex-wrap:wrap}.case-art{height:350px}.placeholder-art.case b{font-size:32px}.form-row{grid-template-columns:1fr}.contact-form{padding:22px}}
@media(max-width:480px){h2{font-size:34px}.service-grid{grid-template-columns:1fr}.process-steps{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.hero-visual{height:320px}.browser-card{height:225px}.phone-card{height:170px;width:92px}.tag-orange{bottom:30px}.trust-line{align-items:flex-start}.cta-actions .btn{width:100%}}

/* =========================================================
   SERVICES SECTION
   Soft warm background with subtle brand-colour washes.
   ========================================================= */

.services-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 5% 20%,
            rgba(255, 177, 104, 0.13) 0%,
            transparent 36%
        ),
        radial-gradient(
            ellipse at 95% 80%,
            rgba(139, 121, 201, 0.12) 0%,
            transparent 38%
        ),
        #faf9f7;
}

/* Keep the section content above the decorative background. */
.services-section > .container {
    position: relative;
    z-index: 1;
}

/* White service cards create contrast against the section. */
.services-section .service-card {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(226, 224, 233, 0.85);
    box-shadow: 0 8px 28px rgba(27, 29, 55, 0.035);
}

/* Give the cards a little more depth on hover. */
.services-section .service-card:hover {
    background: #fff;
    border-color: rgba(255, 138, 42, 0.24);
    box-shadow: 0 18px 42px rgba(27, 29, 55, 0.085);
}

/* Keep the decorative effect subtle on smaller screens. */
@media (max-width: 760px) {
    .services-section {
        background:
            radial-gradient(
                ellipse at 0% 10%,
                rgba(255, 177, 104, 0.10),
                transparent 42%
            ),
            radial-gradient(
                ellipse at 100% 90%,
                rgba(139, 121, 201, 0.09),
                transparent 42%
            ),
            #faf9f7;
    }
}

/* =========================================================
   FEATURED PORTFOLIO
   Consolidated masonry layout, project images and cards.
   ========================================================= */

.featured-masonry {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 24px;
    align-items: stretch;
}

/* ---------------------------------------------------------
   Project cards
   --------------------------------------------------------- */

.featured-project {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 28px;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.featured-project:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 138, 42, 0.3);
    box-shadow: 0 22px 55px rgba(27, 29, 55, 0.09);
}

.featured-project:focus-visible {
    outline: 3px solid rgba(139, 121, 201, 0.65);
    outline-offset: 4px;
}

.featured-project-big,
.featured-project-small {
    min-height: 0;
}

/* Two smaller projects stacked beside the large project. */
.featured-project-stack {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 24px;
    min-height: 0;
}

/* ---------------------------------------------------------
   Project artwork and uploaded cover images
   --------------------------------------------------------- */

.featured-project-art {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 15%,
            color-mix(
                in srgb,
                var(--accent, #ff8a2a) 27%,
                white
            ),
            transparent 45%
        ),
        linear-gradient(135deg, #f8f6f3, #eeeaf8);
}

/* Desktop: shorter artwork areas. */
/* Large left project fills its available card height. */
.featured-project-big .featured-project-art {
    flex: 1 1 auto;
    height: auto;
    min-height: 290px;
}

.featured-project-small .featured-project-art {
    height: 165px;
}

/* Actual uploaded portfolio cover image. */
.featured-project-art .featured-project-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.featured-project:hover .featured-project-image {
    transform: scale(1.04);
}

/* Image overlay for improved visual depth. */
.featured-project-art.has-project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(15, 18, 40, 0.02) 45%,
        rgba(15, 18, 40, 0.48) 100%
    );
}

/* ---------------------------------------------------------
   Decorative artwork for projects without uploaded images
   --------------------------------------------------------- */

.featured-project-orb {
    position: absolute;
    z-index: -1;
    width: 340px;
    height: 340px;
    top: -100px;
    right: -80px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        color-mix(
            in srgb,
            var(--accent, #ff8a2a) 50%,
            white
        ),
        transparent 70%
    );

    filter: blur(18px);
    opacity: 0.9;
    transition: transform 0.5s ease;
}

.featured-project:hover .featured-project-orb {
    transform: scale(1.12);
}

/* ---------------------------------------------------------
   Large project browser mockup
   --------------------------------------------------------- */

.featured-project-window {
    position: absolute;
    width: 76%;
    left: 12%;
    top: 13%;
    bottom: 10%;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 25px 60px rgba(27, 29, 55, 0.12);
    transform: rotate(-4deg);
    transition: transform 0.4s ease;
}

.featured-project:hover .featured-project-window {
    transform: rotate(-2deg) translateY(-4px);
}

.featured-window-bar {
    height: 24px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    background: #f5f4f6;
}

.featured-window-bar span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d7d5dd;
}

.featured-window-content {
    height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(17px, 2.5vw, 30px);
}

.featured-window-label,
.featured-project-category {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #858697;
}

.featured-window-content strong {
    max-width: 95%;
    margin-top: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(22px, 2.5vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.045em;
    color: var(--navy);
}

.featured-window-line {
    display: block;
    width: 80%;
    height: 7px;
    margin-top: 15px;
    border-radius: 10px;
    background: #e8e6ed;
}

.featured-window-line.short {
    width: 54%;
    margin-top: 8px;
}

.featured-window-button {
    width: 95px;
    height: 28px;
    margin-top: 20px;
    border-radius: 30px;
    background: var(--accent, var(--orange));
}

/* ---------------------------------------------------------
   Smaller project browser mockups
   --------------------------------------------------------- */

.featured-small-window {
    position: absolute;
    left: 9%;
    right: 12%;
    top: 15%;
    bottom: 12%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 15px 35px rgba(27, 29, 55, 0.08);
    transform: rotate(-2deg);
    transition: transform 0.4s ease;
}

.featured-project:hover .featured-small-window {
    transform: rotate(0) translateY(-3px);
}

.featured-small-window strong {
    max-width: 95%;
    margin-top: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: var(--navy);
}

.featured-small-window .featured-window-line {
    height: 5px;
    margin-top: 10px;
}

/* Project number. */
.featured-project-art .featured-project-number {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 15px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #74768a;
}

/* ---------------------------------------------------------
   Project details below the artwork
   --------------------------------------------------------- */

.featured-project-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px;
}

.featured-project-copy h3 {
    margin: 8px 0 4px;
    font-size: 20px;
    line-height: 1.2;
}

.featured-project-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.featured-project-arrow {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--orange);
    font-size: 20px;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.featured-project:hover .featured-project-arrow {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

/* Empty state when no featured projects are available. */
.featured-empty {
    padding: 50px 25px;
    text-align: center;
    border: 1px dashed #dcd9e7;
    border-radius: 24px;
    background: #faf9fc;
}

.featured-empty p {
    color: var(--muted);
    margin: 0 0 20px;
}

/* =========================================================
   RESPONSIVE FEATURED PORTFOLIO
   ========================================================= */

/* Tablet */
@media (max-width: 1000px) {
    .featured-masonry {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: 18px;
    }

    .featured-project-stack {
        gap: 18px;
    }

    .featured-project-big .featured-project-art {
        height: 250px;
    }

    .featured-project-small .featured-project-art {
        height: 145px;
    }

    .featured-project-copy {
        padding: 17px;
    }

    .featured-project-copy h3 {
        font-size: 18px;
    }
}

/* Mobile: stack all projects vertically. */
@media (max-width: 760px) {
    .featured-masonry {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .featured-project-stack {
        grid-template-rows: auto auto;
        gap: 18px;
    }

    .featured-project-big .featured-project-art {
        height: 230px;
    }

    .featured-project-small .featured-project-art {
        height: 185px;
    }

    .featured-project-copy {
        padding: 18px;
    }

    .featured-project-copy h3 {
        font-size: 20px;
    }

    .featured-window-content {
        padding: 20px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .featured-project-big .featured-project-art {
        height: 200px;
    }

    .featured-project-small .featured-project-art {
        height: 155px;
    }

    .featured-project-window {
        width: 82%;
        left: 9%;
        border-width: 4px;
    }

    .featured-window-content {
        padding: 15px;
    }

    .featured-window-content strong {
        font-size: 22px;
    }

    .featured-small-window {
        padding: 14px;
    }

    .featured-project-copy {
        padding: 16px;
    }

    .featured-project-copy h3 {
        font-size: 18px;
    }

    .featured-project-arrow {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }
}
/* =========================================================
   CLIENT LOGO MARQUEE
   Continuous, seamless horizontal scrolling.
   ========================================================= */

.client-logos-marquee {
    --logo-width: 112px;
    --logo-height: 58px;
    --logo-gap: 30px;

    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 12px 0 18px;

    /* Fade the edges for a polished marquee effect. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 5%,
        #000 95%,
        transparent
    );

    mask-image: linear-gradient(
        to right,
        transparent,
        #000 5%,
        #000 95%,
        transparent
    );
}

/* The track contains two identical sets of logos. */
.client-logos-track {
    display: flex;
    width: max-content;
    align-items: center;

    animation: client-logo-scroll 38s linear infinite;

    will-change: transform;
}

/* Each group has exactly the same layout. */
.client-logos-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--logo-gap);

    padding-right: var(--logo-gap);
}

/* Individual client logos. */
.client-logos-group img {
    display: block;
    flex: 0 0 var(--logo-width);

    width: var(--logo-width);
    height: var(--logo-height);

    padding: 5px 8px;

    object-fit: contain;

    background: #fff;

    border: 1px solid rgba(30, 34, 60, 0.07);
    border-radius: 12px;

    box-shadow: 0 5px 16px rgba(27, 29, 55, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* Subtle interaction when inspecting a logo. */
.client-logos-group img:hover {
    transform: translateY(-3px);

    box-shadow: 0 9px 22px rgba(27, 29, 55, 0.11);
}

/* Pause animation on hover. */
.client-logos-marquee:hover .client-logos-track {
    animation-play-state: paused;
}

/* Also pause when a keyboard user focuses an element inside it. */
.client-logos-marquee:focus-within .client-logos-track {
    animation-play-state: paused;
}

/* =========================================================
   INFINITE SCROLL ANIMATION
   Move exactly one logo group's width.
   ========================================================= */

@keyframes client-logo-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .client-logos-marquee {
        --logo-width: 96px;
        --logo-height: 50px;
        --logo-gap: 18px;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            #000 3%,
            #000 97%,
            transparent
        );

        mask-image: linear-gradient(
            to right,
            transparent,
            #000 3%,
            #000 97%,
            transparent
        );
    }

    .client-logos-track {
        animation-duration: 30s;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .client-logos-track {
        animation: none;
        transform: none;
    }

    .client-logos-group[aria-hidden="true"] {
        display: none;
    }

    .client-logos-marquee {
        overflow-x: auto;

        -webkit-mask-image: none;
        mask-image: none;
    }
}

/*
 * PHEEGOH WEBSITE — DESIGN OVERRIDES
 * Only site-wide overrides that are not already defined in styles.css
 * should be placed here.
 */

/* =========================================================
   ACCESSIBILITY
   Respect reduced-motion preferences.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   HOMEPAGE PROCESS SECTION
   ========================================================= */

.process-section {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 100px;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(255, 138, 42, 0.10),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(139, 121, 201, 0.12),
            transparent 30%
        ),
        #ffffff;
}

.process-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.65fr);
    gap: 55px;
    align-items: center;
    padding: 58px;
    overflow: hidden;
    border: 1px solid rgba(139, 121, 201, 0.13);
    border-radius: 34px;
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(255, 138, 42, 0.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 100%,
            rgba(139, 121, 201, 0.16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #fffaf5 0%,
            #ffffff 48%,
            #f7f4ff 100%
        );
    box-shadow: 0 24px 70px rgba(23, 28, 53, 0.07);
}

.process-intro {
    position: relative;
    z-index: 1;
}

.process-intro .eyebrow {
    color: #8b79c9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.process-intro h2 {
    margin: 18px 0;
    color: #171c35;
    font-size: clamp(36px, 4vw, 55px);
    line-height: 1.04;
    letter-spacing: -2px;
}

.process-intro h2 em {
    color: #ff8a2a;
    font-style: normal;
}

.process-intro > p {
    max-width: 320px;
    margin: 0;
    color: #687086;
    font-size: 15px;
    line-height: 1.9;
}

.process-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    color: #171c35;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    transition: color 0.2s ease;
}

.process-link span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #ff8a2a;
    color: #ffffff;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.process-link:hover {
    color: #8b79c9;
}

.process-link:hover span {
    transform: translate(3px, -3px);
    background: #8b79c9;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.process-step {
    --step-color: #ff8a2a;
    --step-tint: #fff0e3;

    position: relative;
    min-width: 0;
    min-height: 205px;
    padding: 25px 23px;
    overflow: hidden;
    border: 1px solid rgba(23, 28, 53, 0.06);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 24px rgba(23, 28, 53, 0.035);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.process-step:hover {
    transform: translateY(-5px);
    border-color: color-mix(
        in srgb,
        var(--step-color) 35%,
        transparent
    );
    box-shadow: 0 18px 35px rgba(23, 28, 53, 0.09);
}

.process-step-orange {
    --step-color: #ff8a2a;
    --step-tint: #fff0e3;
}

.process-step-purple {
    --step-color: #8b79c9;
    --step-tint: #f0ecff;
}

.process-step-blue {
    --step-color: #4e8fc9;
    --step-tint: #e9f4ff;
}

.process-step-pink {
    --step-color: #d96e9a;
    --step-tint: #fff0f6;
}

.process-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.process-number {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 14px;
    background: var(--step-tint);
    color: var(--step-color);
    font-size: 13px;
    font-weight: 850;
}

.process-connector {
    color: var(--step-color);
    font-size: 23px;
    font-weight: 500;
    opacity: 0.7;
}

.process-step h3 {
    margin: 0 0 9px;
    color: #171c35;
    font-size: 19px;
    font-weight: 800;
}

.process-step p {
    max-width: 260px;
    margin: 0;
    color: #697187;
    font-size: 13px;
    line-height: 1.8;
}

.process-step-accent {
    position: absolute;
    right: -23px;
    bottom: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--step-tint);
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.process-step:hover .process-step-accent {
    transform: scale(1.35);
}

.process-step > * {
    position: relative;
    z-index: 1;
}

.process-step .process-step-accent {
    z-index: 0;
}


/* =========================================================
   HOMEPAGE TESTIMONIALS
   ========================================================= */

.testimonials {
    position: relative;
    overflow: hidden;
    padding-top: 105px;
    padding-bottom: 100px;
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(139, 121, 201, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(255, 138, 42, 0.12),
            transparent 28%
        ),
        #f8f7fc;
}

.testimonials-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    gap: 60px;
    align-items: end;
    margin-bottom: 48px;
}

.testimonials-heading-copy .eyebrow {
    color: #8b79c9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.testimonials-heading h2 {
    margin: 18px 0;
    color: #171c35;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.testimonials-heading h2 em {
    color: #ff8a2a;
    font-style: normal;
}

.testimonials-heading-copy > p {
    max-width: 560px;
    margin: 0;
    color: #697187;
    font-size: 15px;
    line-height: 1.9;
}

.testimonials-highlight {
    padding: 28px;
    border: 1px solid rgba(139, 121, 201, 0.15);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(245, 241, 255, 0.94)
        );
    box-shadow: 0 12px 35px rgba(23, 28, 53, 0.05);
}

.testimonials-highlight-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #8b79c9;
    color: #ffffff;
    font-size: 22px;
}

.testimonials-highlight > strong {
    display: block;
    margin-bottom: 9px;
    color: #171c35;
    font-size: 17px;
}

.testimonials-highlight > p {
    margin: 0;
    color: #697187;
    font-size: 13px;
    line-height: 1.8;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.testimonial-card {
    --testimonial-color: #ff8a2a;
    --testimonial-tint: #fff0e3;

    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 300px;
    padding: 29px;
    overflow: hidden;
    border: 1px solid rgba(23, 28, 53, 0.06);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(23, 28, 53, 0.045);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.testimonial-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--testimonial-color);
    content: "";
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(23, 28, 53, 0.09);
}

.testimonial-card-orange {
    --testimonial-color: #ff8a2a;
    --testimonial-tint: #fff0e3;
}

.testimonial-card-purple {
    --testimonial-color: #8b79c9;
    --testimonial-tint: #f0ecff;
}

.testimonial-card-blue {
    --testimonial-color: #4e8fc9;
    --testimonial-tint: #e9f4ff;
}

.testimonial-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.testimonial-card .quote-mark {
    display: grid;
    width: 49px;
    height: 49px;
    place-items: center;
    border-radius: 16px;
    background: var(--testimonial-tint);
    color: var(--testimonial-color);
    font-family: Georgia, serif;
    font-size: 38px;
    line-height: 1;
}

.testimonial-index {
    color: #b1b5c3;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.testimonial-card > p {
    flex: 1;
    margin: 0 0 27px;
    color: #555e75;
    font-size: 14px;
    line-height: 1.95;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 19px;
    border-top: 1px solid #f0f0f5;
}

.testimonial-author-icon {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;

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

    padding: 0;
    margin: 0;
    border: none;
    border-radius: 14px;

    background: var(--testimonial-tint);
    color: var(--testimonial-color);

    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 3.5;
    text-align: center;
}
.testimonial-author > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.testimonial-author strong {
    color: #171c35;
    font-size: 13px;
}

.testimonial-author > div > span {
    color: #858a9b;
    font-size: 11px;
    line-height: 1.5;
}

.testimonials-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 42px;
    padding: 25px 29px;
    border: 1px solid rgba(139, 121, 201, 0.13);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.8);
}

.testimonials-footer > p {
    margin: 0;
    color: #171c35;
    font-size: 16px;
    font-weight: 750;
}


/* =========================================================
   RESPONSIVE LAYOUT
   ========================================================= */

@media (max-width: 1000px) {

    .process-panel {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 42px;
    }

    .process-intro > p {
        max-width: 520px;
    }

    .testimonials-heading {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .testimonials-highlight {
        max-width: 600px;
    }

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

}

@media (max-width: 640px) {

    .process-section,
    .testimonials {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .process-panel {
        gap: 30px;
        padding: 28px 20px;
        border-radius: 26px;
    }

    .process-intro h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .process-step {
        min-height: auto;
        padding: 23px;
        border-radius: 19px;
    }

    .process-step-top {
        margin-bottom: 17px;
    }

    .process-step h3 {
        font-size: 18px;
    }

    .process-step p {
        max-width: 100%;
    }

    .process-connector {
        display: none;
    }

    .testimonials-heading {
        gap: 25px;
        margin-bottom: 30px;
    }

    .testimonials-heading h2 {
        font-size: 35px;
        letter-spacing: -1.2px;
    }

    .testimonials-highlight {
        padding: 23px;
        border-radius: 20px;
    }

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

    .testimonial-card {
        min-height: 260px;
        padding: 24px;
        border-radius: 20px;
    }

    .testimonials-footer {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        margin-top: 28px;
        padding: 23px;
    }

    .testimonials-footer .btn {
        justify-content: center;
    }

}

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

    .process-step,
    .process-link,
    .process-link span,
    .process-step-accent,
    .testimonial-card {
        transition: none;
    }

    .process-step:hover,
    .testimonial-card:hover {
        transform: none;
    }

}

/* =========================================================
   HOMEPAGE MOBILE HERO
   Hide decorative mockups and keep the text area clear.
   ========================================================= */

@media (max-width: 760px) {

    .hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding-top: 58px;
        padding-bottom: 65px;

        background:
            radial-gradient(
                ellipse at 100% 0%,
                rgba(255, 174, 99, 0.23) 0%,
                rgba(255, 174, 99, 0.09) 32%,
                transparent 62%
            ),
            radial-gradient(
                ellipse at 100% 30%,
                rgba(139, 121, 201, 0.12) 0%,
                transparent 48%
            ),
            #ffffff;
    }

    /* Remove the separate desktop glow elements. */
    .hero > .hero-wash {
        display: none;
    }

    /* The browser and phone mockups are unnecessary on mobile. */
    .hero-visual {
        display: none;
    }

    /* Keep the decorative star away from the heading. */
    .hero-doodle {
        top: 18px;
        right: 20px;
        font-size: 27px;
        opacity: 0.55;
    }

    .hero-grid {
        display: block;
    }

    .hero-copy {
        max-width: 100%;
    }

    .hero h1 {
        position: relative;
        z-index: 1;
        font-size: clamp(39px, 8.5vw, 49px);
        line-height: 1.09;
        letter-spacing: -0.055em;
        margin-bottom: 22px;
    }

    .hero-copy .lead {
        max-width: 560px;
        font-size: 16px;
        line-height: 1.8;
        color: #666b7f;
        margin-bottom: 27px;
    }

    .hero-actions {
        gap: 12px;
    }

    .hero-actions .btn {
        min-height: 49px;
    }

    .trust-line {
        margin-top: 28px;
        max-width: 430px;
        line-height: 1.7;
    }
}

/* Smaller phones */
@media (max-width: 480px) {

    .hero {
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .hero h1 {
        font-size: clamp(36px, 9vw, 43px);
    }

    .hero-copy .eyebrow {
        font-size: 9px;
        letter-spacing: 0.09em;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .trust-line {
        font-size: 11px;
        gap: 10px;
    }

    .avatar-stack {
        flex-shrink: 0;
    }
}

/* =========================================================
   HOMEPAGE FEATURED PORTFOLIO
   Give project information areas more visual character.
   ========================================================= */

.portfolio-preview {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(
            ellipse at 0% 50%,
            rgba(255, 177, 104, 0.07),
            transparent 36%
        ),
        #ffffff;
}

.featured-project {
    background: #faf9f7;
    border-color: rgba(226, 224, 233, 0.9);
}

/* Warm, subtly tinted information area. */
.featured-project-copy {
    position: relative;
    background:
        linear-gradient(
            135deg,
            rgba(255, 248, 240, 0.98),
            rgba(250, 248, 253, 0.98)
        );
    border-top: 1px solid rgba(226, 224, 233, 0.7);
    transition: background 0.3s ease;
}

/* Keep the smaller cards visually consistent with the large card. */
.featured-project-small .featured-project-copy {
    background:
        linear-gradient(
            135deg,
            #fff8f0,
            #f8f6fc
        );
}

/* Clearer project category labels. */
.featured-project-category {
    color: #81739f;
    line-height: 1.6;
}

/* Improve the client-name contrast. */
.featured-project-copy p {
    color: #73768a;
}

/* Slight colour shift when a visitor hovers over a project. */
.featured-project:hover .featured-project-copy {
    background:
        linear-gradient(
            135deg,
            #fff3e5,
            #f1edfc
        );
}

/* Give the circular arrow a slightly more intentional appearance. */
.featured-project-arrow {
    background: rgba(255, 255, 255, 0.78);
}

/* =========================================================
   HOMEPAGE PROCESS
   Equal-height cards in the two-column grid.
   ========================================================= */

.process-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(205px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.process-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 205px;
}

.process-step-top {
    flex-shrink: 0;
}

.process-step h3 {
    flex-shrink: 0;
}

.process-step p {
    flex-grow: 1;
}

@media (max-width: 640px) {

    .process-steps {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 13px;
    }

    .process-step {
        height: auto;
        min-height: 175px;
    }

    .process-step p {
        flex-grow: 0;
    }
}