). Where this site uses a more meaningful tag than the template did, restore the look. */ .hero-intro p, .work-intro, .contact-intro, .footer-closing-text, .philosophy__text, .philosophy__label, .cs-label, .about-exp__text, .project-details-item-right__title, .contact-form1__note, .cs-video figcaption, .section-top__intro, .hero-availability { text-align: left; } .about1__desc h2.about-heading, .about1__desc2 h3.h4 { font-size: 60px; line-height: 70px; font-weight: 500; text-align: left; text-transform: uppercase; color: var(--white); } @media (max-width: 1399px) { .about1__desc h2.about-heading, .about1__desc2 h3.h4 { font-size: 48px; line-height: 58px; } } @media (max-width: 767px) { .about1__desc h2.about-heading, .about1__desc2 h3.h4 { font-size: 30px; line-height: 45px; } } h3.h6, h2.h6 { font-size: 30px; line-height: 40px; font-weight: 600; text-align: inherit; } @media (max-width: 1500px) { h3.h6, h2.h6 { font-size: 24px; line-height: 32px; } } .hero3-numbArea-item-content h3.h6 { color: var(--theme-color1); } .service2-item__title, .work-process1-card-content__title, .project1-card-content__title, .award1-content__title, .award1__title, .service-page-item__title, .about2-tab-details-exp__title, .project-details-item-left__title, .contact-form1__title { text-align: left; } .service2-item__title, .work-process1-card-content__title { text-transform: none; } .section-top p.section-top__title2:not(.section-top__intro) { font-family: var(--title-font); font-size: 140px; line-height: 1; font-weight: 400; text-transform: uppercase; text-align: end; } @media (max-width: 1500px) { .section-top p.section-top__title2:not(.section-top__intro) { font-size: 100px; } } @media (max-width: 991px) { .section-top p.section-top__title2:not(.section-top__intro) { font-size: 60px; } } @media (max-width: 575px) { .section-top p.section-top__title2:not(.section-top__intro) { font-size: 40px; } } /* About hero image sizes (template expects small fixed thumbs) */ .hero3-content__thumb { flex-shrink: 0; width: 250px; } .hero3-content__thumb img { width: 250px; height: 165px; object-fit: cover; display: block; } .hero3-numbArea__thumb { width: 479px; max-width: 100%; } .hero3-numbArea__thumb img { width: 100%; height: auto; aspect-ratio: 479 / 733; object-fit: cover; display: block; } @media (max-width: 991px) { .hero3-content__thumb, .hero3-content__thumb img { width: 180px; height: 120px; } .hero3-numbArea__thumb { width: 320px; } } .hero3-content__title > span { display: block; color: var(--white); font-family: var(--title-font); font-weight: 800; font-size: 112px; line-height: 1; text-transform: uppercase; text-align: left; } @media (max-width: 1599px) { .hero3-content__title > span { font-size: 92px; } } @media (max-width: 1199px) { .hero3-content__title > span { font-size: 64px; } } @media (max-width: 767px) { .hero3-content__title > span { font-size: 38px; } } @media (max-width: 767px) { .contact-info__text { font-size: 18px; line-height: 1.5; word-break: break-word; } .contact-intro, .work-intro { font-size: 18px; } } /* About hero legibility over the light end of the gradient */ .hero3-content__desc span { color: var(--theme-color1); font-size: 20px; line-height: 1.5; padding-left: 0; display: block; text-align: left; font-weight: 600; } .hero3-content__desc { max-width: 520px; } .hero3-content__title2 { color: var(--theme-color1) !important; } /* ---------- Social film grid (reels) ---------- */ .cs-reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 50px; align-items: start; } .cs-reel { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 4 / 5; } .cs-reel video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } .cs-reel__dur { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 20px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; } @media (max-width: 575px) { .cs-reels { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* ========================================================================== LAYOUT SYSTEM — one set of gutters, section spacing and type scaling for every page. Loaded last so it settles conflicts from the template. ========================================================================== */ :root { --gutter: clamp(20px, 4vw, 40px); --section-y: clamp(72px, 9vw, 130px); --block-gap: clamp(28px, 4vw, 56px); } /* Gutters: containers own the side spacing; rows/cols keep Bootstrap's math */ .container { padding-left: var(--gutter); padding-right: var(--gutter); } @media (min-width: 1400px) { .container { max-width: calc(1320px + 2 * var(--gutter)); } } @media (min-width: 1800px) { .container { max-width: 1794px; } } .section-padding { padding-top: var(--section-y); padding-bottom: var(--section-y); } .section-padding.pt-0 { padding-top: 0; } .section-padding.pb-0 { padding-bottom: 0; } /* Text: left-aligned and allowed to wrap everywhere (template centres
) */ p { text-align: left; } h1, h2, h3, h4, h5, h6, p, a, span, div { overflow-wrap: break-word; } h1, h2, h3, .section-top__title1, .section-top__title5, .section-top__title6, .breadcumb1-title__one, .breadcumb1-title__two, .breadcumb1-title__three, .service2-item__title, .service-page-item__title, .project-details-item-right__title { text-wrap: balance; } .about2__text2 { text-align: left; margin-left: 0; } .contact-form1__note { overflow-wrap: anywhere; } /* Display type scales with the screen instead of jumping at breakpoints */ .breadcumb1-title__one, .breadcumb1-title__two { font-size: clamp(34px, 8.2vw, 140px); line-height: 1; } .breadcumb1-title__three { font-size: clamp(34px, 8.2vw, 140px); line-height: 1.05; flex-wrap: wrap; row-gap: 14px; } .breadcumb1-title { padding-bottom: clamp(56px, 7vw, 130px); } .section-top__title1, .section-top__title5, .section-top__title6 { font-size: clamp(40px, 7.4vw, 140px); line-height: 1; } .about1__desc h2.about-heading, .about1__desc2 h3.h4 { font-size: clamp(24px, 3.6vw, 60px); line-height: 1.2; } .about1__desc2-lowercase { padding-right: clamp(16px, 8vw, 240px); font-size: clamp(16px, 1.6vw, 26px); } .about2__text1 { font-size: clamp(26px, 3.8vw, 59px); line-height: 1.2; } .about2__text2 { font-size: clamp(17px, 1.6vw, 26px); line-height: 1.55; } .award1__title { font-size: clamp(30px, 5.4vw, 100px); line-height: 1.1; } .service2-item__title { font-size: clamp(26px, 3vw, 52px); line-height: 1.1; } .service-page-item__title { font-size: clamp(28px, 3.6vw, 60px); line-height: 1.1; } .service-page-item__number { font-size: clamp(90px, 15vw, 300px); line-height: .9; } .project-details-item-right__title { font-size: clamp(22px, 2.2vw, 36px); line-height: 1.3; } .project-details-item-left__title { font-size: clamp(22px, 2.2vw, 36px); line-height: 1.25; } .footer1-content__title1, .footer1-content__title2 { font-size: clamp(48px, 11vw, 216px); line-height: 1; } .cs-next__link strong { font-size: clamp(26px, 3.2vw, 44px); } .hero-intro .hero-headline { font-size: clamp(30px, 2.8vw, 44px); } /* Counters: labels size to their text instead of a fixed pill width */ .counter1-item { gap: clamp(24px, 4vw, 48px); } .counter1-item-box__label { width: auto !important; max-width: 100%; height: auto; padding: 14px 26px; font-size: clamp(15px, 1.4vw, 22px); line-height: 1.3; gap: 12px; white-space: nowrap; } @media (max-width: 575px) { .counter1-item-box__label { white-space: normal; } } /* Homepage list of disciplines and About values: a real three-column grid */ .service2-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(20px, 3vw, 48px); padding-block: clamp(24px, 3vw, 42px); } .service2-item__text { max-width: 46ch; } @media (max-width: 767px) { .service2-item { grid-template-columns: 56px minmax(0, 1fr); row-gap: 12px; padding-block: 24px; } .service2-item__text { grid-column: 1 / -1; } } /* Portfolio cards: even gutters, pills that never spill off the card */ .project1-padding { padding: clamp(16px, 4.5vw, 75px); } @media (max-width: 767px) { .project1-padding { padding: 14px var(--gutter); } } .project1-card-meta { flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 1399px) { .project1-card-meta__item:nth-child(n+3) { display: none; } } @media (max-width: 575px) { .project1-card-meta__item:nth-child(n+2) { display: none; } .project1-card-meta__item { padding: 6px 14px; font-size: 13px; } } .project1-card-content { align-items: center; gap: 16px; } .project1-card-content > a { min-width: 0; } .project1-card-content__title { font-size: clamp(17px, 1.6vw, 24px); line-height: 1.25; } @media (max-width: 575px) { .project1-card-content { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; } } .project1-card__thumb img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; } /* Marquee images: consistent height */ .marquee-wrapper .text-slider img { height: clamp(64px, 9vw, 162px); width: auto; aspect-ratio: 20 / 9; object-fit: cover; max-width: none; margin-bottom: 0; vertical-align: middle; } /* Experience preview: stack company / role / years on small screens */ .award1-content-list { align-items: center; gap: 16px; } .award1-content-list__name { gap: clamp(16px, 3vw, 50px); font-size: clamp(17px, 1.6vw, 26px); line-height: 1.3; flex-wrap: wrap; min-width: 0; } .award1-content-list__name em { flex-basis: 100%; padding-left: calc(clamp(16px, 3vw, 50px) + 1.2em); } .award1-content-list__date { flex-shrink: 0; font-size: clamp(14px, 1.2vw, 20px); white-space: nowrap; } @media (max-width: 575px) { .award1-content-list { flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 0; } .award1-content-list__name em { padding-left: 0; } .award1-content-list__date { text-align: left; opacity: .8; } } /* Brand names */ @media (max-width: 767px) { .brand1__logo.brand-text { padding: 56px 20px; min-height: 180px; font-size: 22px; } } /* About hero: title, thumbnail and intro stack cleanly on small screens */ @media (max-width: 991px) { .hero3-content { flex-direction: column; align-items: flex-start; gap: 20px; } .hero3-content__title { width: 100%; } .hero3-numbArea { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } } /* Footer: social pills flow inside the page on tablets and phones */ @media (max-width: 991px) { .footer1-content-socialBtn { position: static; height: auto; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .footer1-content-socialBtn__item, .footer1-content-socialBtn .ui-drag-element { transform: none !important; } .footer1-content { padding-bottom: 40px; } } .footer1-bottom { row-gap: 18px; } /* Case studies */ .project-details-item { padding-top: var(--block-gap); padding-bottom: var(--block-gap); } .cs-gallery, .cs-reels, .cs-video { margin-top: var(--block-gap); } @media (max-width: 575px) { .cs-gallery--grid-3 { grid-template-columns: repeat(2, 1fr); } } .project-details-info-list { flex-wrap: wrap; row-gap: 16px; } /* Expertise: tags and thumbs keep the same left edge as the copy */ .service-page-item { padding-top: var(--block-gap); padding-bottom: var(--block-gap); } .service-page-item__thumbs { gap: 16px; } @media (max-width: 575px) { .service-page-item__thumbs { grid-template-columns: 1fr 1fr; display: grid; } } /* expertise list: template fixes the title at 33% width, which split words inside the grid column */ .service2-item__title { width: auto; overflow-wrap: normal; word-break: normal; hyphens: manual; } .service2-item { grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1fr); } @media (max-width: 767px) { .service2-item { grid-template-columns: 48px minmax(0, 1fr); } } /* experience list: keep the dates level with the employer name */ @media (min-width: 768px) { .award1-content-list { align-items: baseline; } } .skip-link:not(:focus) { clip-path: inset(50%); opacity: 0; pointer-events: none; } /* short reel sets: give each film more room instead of leaving an empty row */ @media (min-width: 576px) { .cs-reels--few { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: calc(var(--n) * 400px); } } /* template's yellow line under the case-study banner → thin brand-gradient rule */ .breadcumb1__thumb-line { height: 4px; background: var(--gradient-color, linear-gradient(90deg, #F52A03, #FF8932)); } /* gallery rows with mixed image ratios: fill each tile instead of leaving a dark gap (the lightbox shows the full image) */ @media (min-width: 576px) { .cs-gallery--grid-2 .cs-gallery__item, .cs-gallery--grid-3 .cs-gallery__item { display: flex; } .cs-gallery--grid-2 .cs-gallery__item > a, .cs-gallery--grid-3 .cs-gallery__item > a { display: block; flex: 1; } .cs-gallery--grid-2 .cs-gallery__item img, .cs-gallery--grid-3 .cs-gallery__item img { height: 100%; object-fit: cover; } } /* footer bottom: align every row to the same left edge on small screens */ @media (max-width: 767px) { .footer1-bottom { flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; } .footer1-bottom-item, .footer1-bottom-item__menu { justify-content: flex-start; text-align: left; margin: 0; flex-wrap: wrap; column-gap: 18px; row-gap: 8px; } } /* thin, wide banners (web-banner artwork): don't let the facts bar cover them */ @media (min-width: 768px) { .project-details-info--wide { margin-top: 0; } } /* "pair" gallery: two artworks of different shapes side by side, uncropped */ .cs-gallery--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } @media (max-width: 575px) { .cs-gallery--pair { grid-template-columns: 1fr; } } /* four-up grid (event recaps, story sets) */ .cs-gallery--grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 991px) { .cs-gallery--grid-4 { grid-template-columns: repeat(2, 1fr); } } /* justified row: mixed portrait/landscape pieces at one shared height, nothing cropped */ .cs-gallery--row { display: flex; gap: 24px; align-items: flex-start; } .cs-gallery--row .cs-gallery__item { flex: var(--ar, 1) 1 0; min-width: 0; } @media (max-width: 575px) { .cs-gallery--row { flex-direction: column; gap: 14px; } .cs-gallery--row .cs-gallery__item { flex: none; width: 100%; } } @media (min-width: 576px) { .cs-gallery--grid-4 .cs-gallery__item { display: flex; } .cs-gallery--grid-4 .cs-gallery__item > a { display: block; flex: 1; } .cs-gallery--grid-4 .cs-gallery__item img { height: 100%; object-fit: cover; } } @media (max-width: 575px) { .cs-gallery--grid-4 { grid-template-columns: repeat(2, 1fr); } } /* CV download + certifications */ .about-exp__actions { display: flex; flex-wrap: wrap; gap: 14px; } .cv-extra { margin-top: clamp(36px, 5vw, 60px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid rgba(255,255,255,.12); } .cv-extra__title { color: #fff; font-size: clamp(20px, 2vw, 26px); margin: 0 0 18px; } .cv-extra__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; } .cv-extra__list li { color: #fff; font-size: 17px; line-height: 1.5; } .cv-extra__list em { font-style: normal; color: rgba(255,255,255,.65); } .cv-btn .fa-arrow-down { transform: none !important; } .cv-extra, .cv-extra__title, .cv-extra__list { text-align: left; } .cv-extra__list li { font-size: clamp(16px, 1.3vw, 19px); } .cv-extra__list span { font-weight: 600; } .cv-download { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: var(--gradient-color, linear-gradient(90deg, #F52A03, #FF8932)); color: #fff; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; } .cv-download:hover { color: #fff; filter: brightness(1.08); } /* About hero: two headline lines at one size and one left edge, intro underneath */ .hero3-content__title > span, .hero3-content__title2 { font-size: clamp(34px, 6.2vw, 100px) !important; line-height: 1.02 !important; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; } .hero3-content__title2 { margin: 0 !important; text-align: left; } .hero3 .hero3-content:first-of-type { padding-top: clamp(150px, 16vw, 236px); align-items: flex-end; gap: clamp(20px, 3vw, 48px); } .hero3-content--intro { display: flex; flex-direction: column-reverse; align-items: flex-start !important; justify-content: flex-start; gap: clamp(20px, 2.4vw, 32px); padding-top: clamp(6px, 1vw, 14px) !important; } .hero3-content--intro .hero3-content__desc { max-width: 620px; } .hero3-content--intro .hero3-content__desc span { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; } @media (max-width: 1399px) { .hero3 .hero3-content:first-of-type { flex-direction: column-reverse; align-items: flex-start; } } @media (min-width: 1400px) { .hero3-content__title { flex: 1; min-width: 0; } .hero3-content__title > span { white-space: nowrap; } } /* Multi-row justified galleries (rows of equal-height images) */ .cs-rows { margin-top: var(--block-gap); } .cs-rows > .cs-gallery { margin-top: 24px; } .cs-rows > .cs-gallery:first-child { margin-top: 0; } @media (max-width: 575px) { .cs-rows > .cs-gallery { margin-top: 14px; } .cs-gallery--row.cs-gallery--many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cs-gallery--row.cs-gallery--many .cs-gallery__item { width: auto; display: flex; } .cs-gallery--row.cs-gallery--many .cs-gallery__item > a { display: block; flex: 1; } .cs-gallery--row.cs-gallery--many .cs-gallery__item img { height: 100%; object-fit: cover; } } @media (max-width: 575px) { .cs-gallery--row.cs-gallery--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }