/* ===================================================================== Amigos Media — site.css One stylesheet, no framework. The previous build shipped Bootstrap, Font Awesome Pro, Swiper, Slick, Magnific and a 1.1 MB template sheet — 1.7 MB of CSS to render a page whose visible design uses almost none of it. PALETTE ink #16141C near-black with a violet undertone, from the logo violet #6D4AFF the logo's lavender pushed to a working saturation lift #FFCF2D highlighter yellow — the signature (see .mark) mist #F4F3F7 cool section ground TYPE display: Plus Jakarta Sans / body: Inter, self-hosted, 147 KB total body: system stack — zero bytes, zero FOUT, instant paint ===================================================================== */ /* ---------- type ------------------------------------------------------ Plus Jakarta Sans for display, Inter for body. Both self-hosted and subset to latin plus the rupee sign, 147 KB for the whole family set. The previous body stack was the system UI font, which renders as Segoe UI on most Indian office machines and Roboto on Android — different on every device, and on Windows indistinguishable from an unstyled page. That was the main reason the site read as unfinished. font-display:swap so text paints immediately in the fallback rather than holding the page blank while the font downloads. */ @font-face{ font-family:'Jakarta';src:url('/assets/fonts/PlusJakartaSans-600.woff2?v=2.3.0') format('woff2'); font-weight:600;font-style:normal;font-display:swap; } @font-face{ font-family:'Jakarta';src:url('/assets/fonts/PlusJakartaSans-700.woff2?v=2.3.0') format('woff2'); font-weight:700;font-style:normal;font-display:swap; } @font-face{ font-family:'InterVar';src:url('/assets/fonts/Inter-400.woff2?v=2.3.0') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'InterVar';src:url('/assets/fonts/Inter-500.woff2?v=2.3.0') format('woff2'); font-weight:500;font-style:normal;font-display:swap; } @font-face{ font-family:'InterVar';src:url('/assets/fonts/Inter-600.woff2?v=2.3.0') format('woff2'); font-weight:600;font-style:normal;font-display:swap; } @font-face{ font-family:'InterVar';src:url('/assets/fonts/Inter-700.woff2?v=2.3.0') format('woff2'); font-weight:700;font-style:normal;font-display:swap; } /* ---------- tokens ---------------------------------------------------- NOTE: this :root block and the colour tokens below were missing from the previous build. Without the opening selector the browser treated every declaration here as a malformed rule and discarded it — along with the `*{box-sizing:border-box}` rule immediately after, which the parser swallowed while hunting for the block it never found. That is what broke the live site: no colours, no fonts, no gutters, and padding adding to element widths. Do not remove the `:root{`. */ :root{ --ink:#16141C; --paper:#FFFFFF; --mist:#F4F3F7; --violet:#6D4AFF; --violet-dark:#5A32E0; --brand:#5A32E0; --lift:#FFCF2D; --line:#E5E3EB; --body:#4B4757; --muted:#6E6979; /* Must stay identical to GROUND in the portrait render script — the team photos are flattened onto this exact value so the image has no visible edge inside its frame. Change one, change both. */ --portrait:#E4E1EE; --display:'Jakarta','Segoe UI',system-ui,sans-serif; --sans:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --wrap:1180px; --pad:24px; --r:14px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--body); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:var(--violet-dark)} h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;letter-spacing:-.018em} p{margin:0 0 1em} ul{margin:0;padding:0} :focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px} .skip{ position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff; padding:12px 18px;z-index:200;border-radius:0 0 8px 0; } .skip:focus{left:0} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .center{text-align:center} /* ---------- type scale --------------------------------------------- */ .h1{font-size:clamp(40px,7vw,78px);line-height:1.02;font-weight:700} .h2{font-size:clamp(30px,4.4vw,50px);line-height:1.08;font-weight:600} .h3{font-size:clamp(21px,2.2vw,27px);line-height:1.2;font-weight:600} .lede{font-size:clamp(17px,1.7vw,20px);line-height:1.6;color:var(--body);max-width:60ch} .eyebrow{ font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase; color:var(--violet);margin:0 0 16px; } .eyebrow--on-ink{color:var(--lift)} .note{font-size:14.5px;color:var(--muted)} /* ---------- THE SIGNATURE: the highlighter mark --------------------- Indian PR's most-circulated artifact is a screenshot of a clipping with the client's name marked in yellow — it is what gets forwarded to the family WhatsApp group when a business gets covered. The mark is that gesture, used on the one phrase per page that matters, and nowhere else. It is drawn slightly off-square because a real marker never is. */ .mark{ position:relative;display:inline;color:var(--ink); background-image:linear-gradient(104deg, rgba(255,207,45,0) .5%, rgba(255,207,45,.92) 2%, rgba(255,207,45,.82) 96%, rgba(255,207,45,0) 99.5%); /* The band is sized and placed explicitly rather than left to grow with the font's content box. An inline background fills ascent+descent — roughly 1.2em — which on a display line set at 1.02 spilled over and painted across the line above. Constraining it to .82em keeps the marker stroke behind its own words at every size in the clamp. */ background-repeat:no-repeat; background-size:100% .82em; background-position:0 .30em; padding:.08em .18em;margin:0 -.06em; border-radius:.4em .9em .5em .8em; -webkit-box-decoration-break:clone;box-decoration-break:clone; } .mark--on-ink{color:var(--ink)} /* ---------- buttons -------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font:600 15.5px/1 var(--sans);text-decoration:none; padding:16px 26px;border-radius:999px;border:2px solid transparent; transition:transform .14s ease,background .18s ease,color .18s ease,border-color .18s ease; white-space:nowrap; } .btn:hover{transform:translateY(-2px)} .btn--ink{background:var(--ink);color:#fff} .btn--ink:hover{background:var(--violet)} .btn--lift{background:var(--lift);color:var(--ink)} .btn--lift:hover{background:#ffdd66} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--ink)} .btn--on-ink{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .btn--on-ink:hover{background:#fff;color:var(--ink);border-color:#fff} .btn--sm{padding:12px 20px;font-size:14.5px} .btn--lg{padding:19px 34px;font-size:17px} .btns{display:flex;flex-wrap:wrap;gap:12px} /* ---------- header --------------------------------------------------- */ .hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .hdr__in{display:flex;align-items:center;gap:28px;height:74px} .hdr__logo{flex:0 0 auto;display:block} .hdr__logo img{width:150px;height:auto} .hdr__nav{margin-left:auto} .hdr__nav ul{display:flex;gap:30px;list-style:none} .hdr__nav a{ font:500 15.5px/1 var(--sans);color:var(--ink);text-decoration:none; padding:6px 0;border-bottom:2px solid transparent; } .hdr__nav a:hover,.hdr__nav a[aria-current]{border-bottom-color:var(--violet)} .hdr__cta{flex:0 0 auto} .hdr__burger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0; } /* CSS-only mobile menu: the checkbox is the state, so the nav opens with JavaScript disabled or blocked. */ .mnav{display:none} .hdr__toggle:checked ~ .mnav{display:block} .hdr__burger span{display:block;height:2px;width:22px;background:var(--ink);margin:0 auto;transition:transform .2s ease,opacity .2s ease} .hdr__toggle:checked ~ .hdr__in .hdr__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hdr__toggle:checked ~ .hdr__in .hdr__burger span:nth-child(2){opacity:0} .hdr__toggle:checked ~ .hdr__in .hdr__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .hdr__toggle:focus-visible ~ .hdr__in .hdr__burger{outline:3px solid var(--violet);outline-offset:3px} .mnav{border-top:1px solid var(--line);background:#fff} .mnav ul{list-style:none;padding:8px var(--pad) 20px} .mnav a{ display:block;padding:14px 0;font:600 19px/1 var(--display); color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line); } /* ---------- hero ----------------------------------------------------- */ .hero{padding:76px 0 60px;background:var(--paper)} .hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center} .hero .h1{margin-bottom:22px} .hero__sub{font-size:clamp(17px,1.8vw,20.5px);line-height:1.6;color:var(--body);max-width:52ch;margin-bottom:30px} .hero__proof{margin-top:34px;font-size:14.5px;color:var(--muted)} /* the hero side card — what you get, priced in plain language */ .card-ask{ background:var(--ink);color:#fff;border-radius:22px;padding:32px 30px; border-top-right-radius:56px; } .card-ask h2{color:#fff;font-size:24px;font-weight:600;margin-bottom:6px} .card-ask p{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.78);margin-bottom:20px} .card-ask ul{list-style:none;display:grid;gap:12px;margin-bottom:24px} .card-ask li{display:flex;gap:11px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.9)} .card-ask li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--lift);margin-top:7px} /* ---------- sections ------------------------------------------------- */ .sec{padding:84px 0} .sec--mist{background:var(--mist)} .sec--ink{background:var(--ink)} .sec--ink h2,.sec--ink h3{color:#fff} .sec--ink .lede{color:rgba(255,255,255,.8)} .sec__head{max-width:64ch;margin-bottom:46px} /* ---------- masthead wall (proof, above the fold) -------------------- */ .wall{padding:30px 0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)} .wall__label{font:600 12px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:22px} /* The masthead files are square app-icon crops with solid backgrounds, not transparent wordmarks — desaturating them at 30px turned the row into a line of grey chips. Shown at their real proportion instead. */ .wall__strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px} .wall__strip img{ width:56px;height:56px;border-radius:12px;object-fit:cover; border:1px solid var(--line); transition:transform .18s ease; } .wall__strip img:hover{transform:translateY(-3px)} /* ---------- service cards -------------------------------------------- */ .svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:22px} .svc{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:30px 26px 28px;display:flex;flex-direction:column; transition:border-color .18s ease,transform .18s ease; } .svc:hover{border-color:var(--ink);transform:translateY(-3px)} .svc__n{font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--violet);margin-bottom:16px} .svc h3{margin-bottom:10px} .svc p{font-size:15.5px;line-height:1.58;flex:1 1 auto;margin-bottom:18px} .svc a{font:600 14.5px/1 var(--sans);color:var(--ink);text-decoration:none;display:inline-flex;gap:7px;align-items:center} .svc a:hover{color:var(--violet)} /* ---------- process -------------------------------------------------- */ /* Numbered because it genuinely is a sequence — a client moves through these four in order, and the order is the reassurance. */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px;counter-reset:s} .step{counter-increment:s} .step::before{ content:counter(s,decimal-leading-zero); display:block;font:700 15px/1 var(--display);color:var(--lift); margin-bottom:14px;letter-spacing:.08em; } .step h3{color:#fff;font-size:20px;margin-bottom:8px} .step p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);margin:0} /* ---------- work ----------------------------------------------------- */ .work{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px} .work__item{ border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--paper);text-decoration:none;display:block; transition:transform .18s ease,box-shadow .18s ease; } .work__item:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(22,20,28,.10)} .work__item img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--mist)} .work__body{padding:22px 22px 24px} .work__body h3{font-size:20px;margin-bottom:6px} .work__body p{font-size:15px;line-height:1.55;color:var(--body);margin:0} .tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px} .tag{ font:600 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase; color:var(--violet-dark);background:rgba(109,74,255,.09); padding:6px 10px;border-radius:999px; } /* ---------- team ----------------------------------------------------- This block is a switchboard, not a "meet the team" grid. Every person carries a 'Handles' line and a number that rings a desk, so the card is laid out as a directory entry: portrait, name, what they own, how to reach them — in that order of decreasing size. The portraits are duotone cut-outs rendered onto --portrait. The frame uses the same value, so the JPEG has no visible edge and the subject appears to stand in the card and dissolve into it. That is what hides six different source crops: there is no photo boundary to compare. */ .team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .person{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column; transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; } .person:hover{ border-color:var(--ink);transform:translateY(-3px); box-shadow:0 18px 38px rgba(22,20,28,.09); } .person__frame{ background:var(--portrait);position:relative; display:flex;align-items:flex-end;justify-content:center; } .person__photo{ width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top; display:block; } /* Initials fallback fills the same frame, so a card without a portrait still holds its place in the row instead of collapsing. */ .person__ini{ aspect-ratio:1/1;width:100%; display:flex;align-items:center;justify-content:center; font:600 clamp(34px,4vw,46px)/1 var(--display); color:var(--violet-dark);letter-spacing:.02em; } .person__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1 1 auto} .person__name{font-size:19.5px;line-height:1.2;font-weight:600;margin:0 0 5px} .person__role{ font:600 11.5px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase; color:var(--violet-dark);margin:0 0 14px; } .person__bio{font-size:14.5px;line-height:1.62;color:var(--body);margin:0 0 16px} /* 'Handles' is the whole reason this block exists — it is the routing instruction, so it gets the label and the rule above it. */ .person__want{ font-size:14.5px;line-height:1.55;color:var(--ink); margin:0 0 18px;padding-top:14px;border-top:1px solid var(--line); flex:1 1 auto; } .person__want-l{ display:block;font:600 10.5px/1 var(--sans);letter-spacing:.15em; text-transform:uppercase;color:var(--muted);margin-bottom:7px; } .person__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .person__links a{ font:600 13.5px/1 var(--sans);text-decoration:none; padding:11px 15px;border-radius:999px;transition:all .16s ease; } .person__wa{background:var(--lift);color:var(--ink)} .person__wa:hover{background:#ffdd66} /* Tabular figures so six numbers of the same length line up down a column rather than shimmering against each other. */ .person__tel{ border:1px solid var(--line);color:var(--ink); font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; } .person__tel:hover{border-color:var(--ink)} .person__li{color:var(--violet-dark);padding:11px 6px!important} .person__li:hover{text-decoration:underline} /* Email, on its own line under the pill row. It is set quieter than the buttons on purpose: WhatsApp is the action we want on a phone, email is the one we want on a desktop, and the hierarchy should say so. An address is also the one string here that cannot be shortened, so it is allowed to break mid-word rather than push the card wider than its grid column. */ .person__mail{ display:inline-block;margin-top:12px;max-width:100%; font:500 13.5px/1.4 var(--sans);color:var(--violet-dark);text-decoration:none; overflow-wrap:anywhere; } .person__mail:hover{text-decoration:underline} .person--lead .person__mail{color:var(--lift)} /* ---------- the founder card ------------------------------------------ The founder is marked by treatment, not by size. An earlier version spanned two columns and two rows, but a double-height cell is sized by the two cards stacked beside it, and no amount of portrait and bio filled 1,600px — it left a dead column of empty ground. Inverting one cell to ink gives the same "start here" signal, costs no layout, and keeps six equal portraits reading as one set. */ .person--lead{background:var(--ink);border-color:var(--ink)} .person--lead .person__name{color:#fff} .person--lead .person__role{color:var(--lift)} .person--lead .person__bio{color:rgba(255,255,255,.78)} .person--lead .person__want{color:#fff;border-top-color:rgba(255,255,255,.16)} .person--lead .person__want-l{color:rgba(255,255,255,.55)} .person--lead .person__tel{border-color:rgba(255,255,255,.32);color:#fff} .person--lead .person__tel:hover{border-color:#fff} .person--lead .person__li{color:var(--lift)} .person--lead:hover{border-color:var(--ink);box-shadow:0 18px 38px rgba(22,20,28,.22)} @media (max-width:1000px){ .team{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .team{grid-template-columns:minmax(0,1fr);gap:18px} } /* ---------- faq ------------------------------------------------------ */ .faq{max-width:820px;margin:0 auto} .faq details{border-bottom:1px solid var(--line);padding:4px 0} .faq summary{ cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative; font:600 18px/1.35 var(--display);color:var(--ink); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";position:absolute;right:6px;top:17px; font:400 26px/1 var(--sans);color:var(--violet); } .faq details[open] summary::after{content:"\2212"} .faq p{font-size:16px;line-height:1.62;padding:0 40px 20px 0;margin:0} /* ---------- CTA band -------------------------------------------------- */ .cta{background:var(--violet);border-radius:26px;padding:52px 46px;color:#fff} .cta h2{color:#fff;margin-bottom:12px} .cta p{color:rgba(255,255,255,.9);max-width:52ch;margin-bottom:26px} .cta .btn--lift:hover{background:#fff} /* ---------- form ------------------------------------------------------ */ .form{display:grid;gap:18px;max-width:560px} .field label{display:block;font:600 14px/1 var(--sans);color:var(--ink);margin-bottom:7px} .field input,.field select,.field textarea{ width:100%;font:400 16px/1.4 var(--sans);color:var(--ink); padding:14px 15px;border:1px solid var(--line);border-radius:10px;background:#fff; } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);outline:none;box-shadow:0 0 0 3px rgba(109,74,255,.14)} .field textarea{min-height:120px;resize:vertical} .form__note{font-size:13.5px;color:var(--muted)} .form__msg{padding:14px 16px;border-radius:10px;font-size:15px} .form__msg--ok{background:#E8F7EE;color:#175C33} .form__msg--err{background:#FDECEC;color:#8A1F1F} /* ---------- prose (legal, articles) ----------------------------------- */ .prose{max-width:70ch} .prose h2{font-size:26px;margin:38px 0 12px} .prose h3{font-size:20px;margin:28px 0 10px} .prose ul{padding-left:20px;margin:0 0 1em} .prose li{margin-bottom:8px} /* ---------- footer ---------------------------------------------------- */ .ftr{background:var(--ink);color:rgba(255,255,255,.72);padding:72px 0 30px;margin-top:0} .ftr h2{color:#fff;font-size:14px;font-family:var(--sans);font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px} .ftr a{color:rgba(255,255,255,.72);text-decoration:none} .ftr a:hover{color:#fff} .ftr__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)} .ftr__brand p{font-size:15px;line-height:1.6;margin:18px 0 0;max-width:36ch} .ftr__addr{font-size:14px;color:rgba(255,255,255,.55)} .ftr__col{min-width:0} .ftr__col ul{list-style:none;display:grid;gap:11px;font-size:15px} .ftr__lead{font-size:15px;line-height:1.55;margin-bottom:18px} .ftr__tel{display:block;margin-top:14px;font:600 16px/1 var(--sans);color:var(--lift)!important} /* Direct lines. Scoped under .ftr throughout so that a later stylesheet cannot win on load order and flatten each entry into one unwrappable row — the failure that broke the footer on the previous build's inner pages. */ .ftr .ftr__lines{padding:30px 0 8px;border-bottom:1px solid rgba(255,255,255,.12)} .ftr .ftr__lines ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:20px 28px} .ftr .ftr__lines li{display:block;min-width:0;padding:0;border:0} .ftr .ftr__lines .ftr__name{display:block;font:600 15px/1.3 var(--sans);color:#fff;overflow-wrap:anywhere} .ftr .ftr__lines .ftr__role{display:block;font-size:12.5px;color:rgba(255,255,255,.5);margin:2px 0 6px} .ftr .ftr__lines a{display:block;font:600 15px/1 var(--sans);color:var(--lift);white-space:nowrap} .ftr .ftr__lines a:hover{color:#fff} /* Addresses are far longer than the numbers this grid was built for, so they get to wrap. nowrap at 15px overflowed a 196px column and pushed a horizontal scrollbar onto the whole footer. */ .ftr .ftr__lines a[href^="mailto:"]{ margin-top:4px;font:500 12.5px/1.45 var(--sans); white-space:normal;overflow-wrap:anywhere; } .ftr__base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-top:24px;font-size:14px} .ftr__base p{margin:0} .ftr__social{list-style:none;display:flex;gap:20px;font-size:14px} /* ---------- sticky mobile contact bar --------------------------------- */ .sticky{display:none} /* ---------- responsive ------------------------------------------------- */ @media (min-width:1041px){ .mnav{display:none!important} } @media (max-width:1040px){ .hdr__nav,.hdr__cta{display:none} .hdr__burger{display:flex;margin-left:auto} .hero__grid{grid-template-columns:1fr;gap:38px} .ftr__top{grid-template-columns:1fr 1fr;gap:34px} .ftr__brand{grid-column:1 / -1} } @media (max-width:640px){ body{font-size:16.5px} .sec{padding:58px 0} .hero{padding:44px 0 40px} .cta{padding:34px 26px;border-radius:20px} .ftr{padding:52px 0 96px} .ftr__top{grid-template-columns:1fr;gap:32px} .wall__strip{gap:14px 26px} .wall__strip img{height:24px} .btns .btn{flex:1 1 auto} .sticky{ display:grid;grid-template-columns:1fr 1fr;gap:10px; position:fixed;left:0;right:0;bottom:0;z-index:90; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);border-top:1px solid var(--line); } .sticky a{ display:flex;align-items:center;justify-content:center; font:600 15.5px/1 var(--sans);text-decoration:none; padding:15px;border-radius:999px; } .sticky__wa{background:var(--lift);color:var(--ink)} .sticky__call{background:var(--ink);color:#fff} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .btn:hover,.work__item:hover,.svc:hover{transform:none} } /* ---------- clientele wall ------------------------------------------- Each card carries its client's own brand colour as --brand, extracted from the logo itself rather than picked by hand. That is where the vibrancy comes from: twenty-one real brand colours doing the work, instead of one accent repeated twenty-one times. */ .clientele{background:linear-gradient(180deg,#fff 0%,var(--mist) 100%)} .cgroup{margin-bottom:44px} .cgroup__h{ display:flex;align-items:center;gap:10px; font:600 12px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase; color:var(--ink);margin:0 0 18px;padding-bottom:12px;border-bottom:2px solid var(--line); } .cgroup__h span{ font-size:11px;letter-spacing:0;color:var(--muted);background:#fff; border:1px solid var(--line);border-radius:999px;padding:3px 9px; } .clogos{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px} .clogo{ position:relative;display:flex;flex-direction:column;height:100%; background:#fff;border:1px solid var(--line);border-radius:16px; overflow:hidden;text-decoration:none;color:inherit; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } /* the brand stripe */ .clogo::before{ content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--brand); } .clogo__plate{ display:flex;align-items:center;justify-content:center; height:104px;padding:22px 20px 14px;background:#fff; } .clogo__plate img{max-height:58px;max-width:100%;width:auto;object-fit:contain} .clogo__ini{ width:52px;height:52px;border-radius:13px;color:#fff; display:flex;align-items:center;justify-content:center;font:700 17px/1 var(--sans); } .clogo__foot{ margin-top:auto;padding:12px 16px 16px;border-top:1px solid var(--line); background:color-mix(in srgb, var(--brand) 6%, #fff); } .clogo__name{display:block;font:600 14.5px/1.35 var(--sans);color:var(--ink);overflow-wrap:anywhere} .clogo__cta{ display:block;margin-top:5px;font:600 11.5px/1 var(--sans); letter-spacing:.08em;text-transform:uppercase;color:var(--brand); } .clogo--link:hover{ transform:translateY(-4px);border-color:var(--brand); box-shadow:0 14px 30px color-mix(in srgb, var(--brand) 26%, transparent); } .clogo--link:focus-visible{outline:3px solid var(--brand);outline-offset:3px} /* ---------- client coverage page --------------------------------------- */ .chero{ padding:52px 0;border-bottom:1px solid var(--line); background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, #fff) 0%, #fff 100%); } .chero__in{display:flex;align-items:center;gap:38px;flex-wrap:wrap} .chero__logo{ flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:250px;min-height:130px;background:#fff;border:1px solid var(--line); border-radius:18px;padding:22px;border-top:5px solid var(--brand); } .chero__logo img{max-height:82px;width:auto;object-fit:contain} .chero__ini{ width:80px;height:80px;border-radius:20px;color:#fff;display:flex; align-items:center;justify-content:center;font:700 27px/1 var(--sans); } .chero__count{ display:inline-block;margin-top:16px;font:600 13px/1 var(--sans); letter-spacing:.06em;text-transform:uppercase;color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, #fff);padding:9px 14px;border-radius:999px; } .cov{list-style:none;display:grid;gap:14px;max-width:840px} .cov__item > a,.cov__item > div{ display:block;background:#fff;border:1px solid var(--line);border-radius:14px; padding:22px 24px;text-decoration:none;color:inherit; transition:border-color .18s ease,transform .18s ease; } .cov__item > a:hover{border-color:var(--brand);transform:translateX(4px)} .cov__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px} .cov__pub{ font:600 11.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase; padding:6px 11px;border-radius:999px; } .cov__meta time{font-size:13px;color:var(--muted)} .cov__head{font-size:19px;line-height:1.35;margin:0} .cov__note{font-size:14.5px;line-height:1.55;color:var(--muted);margin:8px 0 0} .cov__link{ display:inline-block;margin-top:12px;font:600 12.5px/1 var(--sans); letter-spacing:.08em;text-transform:uppercase;color:var(--brand); } .empty-state{ text-align:center;max-width:620px;margin:0 auto;padding:48px 28px; background:var(--mist);border:1px dashed var(--line);border-radius:18px; } /* work placeholder when a campaign has no image yet */ .work__ph{ aspect-ratio:3/2;display:flex;align-items:center;justify-content:center; background:var(--ink);color:var(--lift);font:700 40px/1 var(--display);letter-spacing:.04em; } .work__cat{ font:600 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase; color:var(--violet);margin:0 0 8px; } /* ---------- testimonials ---------------------------------------------- */ .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} .quote{ margin:0;background:#fff;border-radius:18px;padding:28px 26px 24px; display:flex;flex-direction:column;gap:20px; } .quote blockquote{margin:0;font-size:16.5px;line-height:1.62;color:var(--body);flex:1 1 auto} .quote blockquote::before{ content:"\201C";display:block;font-family:var(--display); font-size:50px;line-height:.6;color:var(--violet);margin-bottom:12px; } .quote figcaption{display:flex;align-items:center;gap:12px;min-width:0} .quote__ini{ flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--violet);color:#fff; display:flex;align-items:center;justify-content:center;font:600 14.5px/1 var(--sans); } .quote cite{display:block;font:600 15.5px/1.3 var(--sans);font-style:normal;color:var(--ink)} .quote__role{display:block;font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:2px} /* ---------- read next (article internal links) ------------------------ */ .readnext{list-style:none;display:grid;gap:12px} .readnext a{ display:block;padding:18px 20px;border:1px solid var(--line);border-radius:12px; text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease; } .readnext a:hover{border-color:var(--violet);transform:translateX(4px)} .readnext__t{display:block;font:600 17px/1.35 var(--display);color:var(--ink)} .readnext__x{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--muted)} /* ---------- footer service-area line ---------------------------------- */ .ftr__areas{ margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12); font-size:14px;line-height:1.6;color:rgba(255,255,255,.6); } .ftr__areas a{color:rgba(255,255,255,.86);text-decoration:none} .ftr__areas a:hover{color:#fff;text-decoration:underline} /* ---------- utilities ------------------------------------------------- Visually hidden but still announced. Six cards each carrying a link that only says "WhatsApp" is ambiguous on a screen reader, so the name rides inside the link and each one announces who it actually messages. */ .u-sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* Anyone who has asked their system to calm down gets the layout without the movement. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .person:hover,.svc:hover,.btn:hover,.wall__strip img:hover{transform:none} } /* ---------- contact page ---------------------------------------------- Most of the traffic here is bought, so the layout answers one question first: where do I enquire. Headline and form share the opening screen, the way the city landing pages do, and the team directory moves below the fold where it reassures rather than obstructs. */ .ct-hero{padding-bottom:56px} .ct-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-areas:"head form" "pitch form"; /* The form spans both rows and is the tallest thing here. Left to auto rows, its extra height gets shared out between them and opens a gap between the headline and the list below it. Pinning the first row to its content and giving the slack to the second keeps the left column reading as one block. */ grid-template-rows:min-content 1fr; column-gap:56px;row-gap:30px;align-items:start; } .ct-head{grid-area:head} .ct-pitch{grid-area:pitch;align-self:start} .ct-form{grid-area:form} .ct-head .h1{font-size:clamp(34px,4.3vw,54px);line-height:1.06;max-width:17ch} .ct-ticks{list-style:none;margin:0;padding:0;display:grid;gap:11px} .ct-ticks li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:var(--body)} .ct-ticks li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;background:var(--violet)} .ct-floor{ margin-top:24px;padding:16px 18px;border-left:3px solid var(--violet); background:var(--mist);border-radius:0 var(--r) var(--r) 0; font-size:15px;line-height:1.58;color:var(--body); } .ct-floor strong{color:var(--ink)} .ct-alt{margin-top:32px;padding-top:26px;border-top:1px solid var(--line)} .ct-alt__h{font:600 15px/1.4 var(--sans);color:var(--ink);margin:0 0 14px} .ct-alt__row{display:flex;flex-wrap:wrap;gap:12px} .ct-alt__note{margin:16px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted)} .ct-alt__note a{overflow-wrap:anywhere} .ct-form{ border:1px solid var(--line);border-radius:var(--r);padding:28px; background:var(--paper);box-shadow:0 18px 46px rgba(22,20,28,.07); } .ct-form__h{font:600 22px/1.25 var(--display);color:var(--ink);margin:0 0 8px} .ct-form__sub{font-size:15px;line-height:1.55;color:var(--muted);margin:0 0 22px} /* .form caps at 560px for the standalone version of this form. Inside a card that is already width-constrained, the cap only leaves a gutter. */ .ct-form__form{max-width:none} .ct-form .form__msg{margin-bottom:20px} .ct-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px} /* Service chips. A native