/* ---- Zvita Studio Typography System v1.0 ------------------------------- Source: Zvita Studio/Branding/2. Typography/ZVITA_TYPOGRAPHY_SYSTEM_v1.0.md Gail Rock is used as the display face on this page, at the client's direction. Licence confirmed: the client holds a lifetime commercial licence for Gail Rock, which covers web embedding on this site. ---------------------------------------------------------------------- */ @font-face{font-family:"Gail Rock";src:url("/fonts/GailRock.woff2") format("woff2"),url("/fonts/GailRock.ttf") format("truetype"); font-weight:400;font-style:normal;font-display:swap} :root{ /* ---- Zvita Studio Colour System v1.0 ---------------------------------- Source: Zvita Studio/Branding/1. Colour/COLOUR_SYSTEM_v1.0.md Flattened to plain colour names (was brand-signature/orange/purple all aliasing one hex — confusing). The doc's own terms are noted alongside each one so this still traces back to the source. Only one grey now; the old grey-mid/grey-lightest/band-grey/peach steps are gone. Restrictions honoured in this file: · Purple is never text on Navy (2.86:1 fails AA). The footer's 56px links use Yellow instead (13.51:1). · Yellow never appears as text or a field on Off-white (1.05:1). It is used only on Navy grounds and as small marks on Purple. · Yellow stays near its 5% target, well under the 8% ceiling. Every derived tone below was generated in OKLCH, per the doc's production notes, not by applying opacity over a background. */ --purple:#5559B8; /* "Signature" in the brand doc · identity · 15-25% */ --navy:#18173B; /* "Neutral" in the brand doc · structural dark · 20-30% */ --cream:#F1E9D8; /* "Support" in the brand doc · dominant light · 45-55% */ --cream-dark:#E7DDD0; /* darker cream, for surfaces that need to stand off the page */ --yellow:#E2ED66; /* "Accent" in the brand doc · scarce mark, provisional hex · 2-8% */ --grey:#5A5C71; /* the one TEXT grey: 5.43:1 on Off-white, 4.95:1 on the Notes band, 4.64:1 on a badge */ --white:#fff; --green:#12b76a; /* semantic only — booking status dot, not a brand colour */ --r-card:24px; --r-pill:32px; --font:"Switzer","Helvetica Neue",Arial,sans-serif; /* Display face for every uppercase title class below. Gail Rock is monospaced, so --display-track stays at 0; the template's original -8px / -12px values were tuned for Switzer and would collide. */ --font-display:"Gail Rock","Switzer","Helvetica Neue",Arial,sans-serif; --display-track:0; } *{margin:0;padding:0;box-sizing:border-box} html,body{background:var(--navy)} body{font-family:var(--font);color:var(--navy);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* ---- page canvas ---- Full viewport width; the 1440 design grid lives in a centred .inner. overflow-x:clip lets the oversized display words + the hero slider bleed past the grid onto white, then trims them at the viewport edge — no horizontal scrollbar, no grey pillar-box. */ .canvas{width:100%;background:var(--cream);position:relative;overflow-x:clip} .section{position:relative;width:100%} .inner{width:1440px;margin:0 auto;position:relative;height:100%} /* ---- Three layout modes ---- Over 1440px: the approved design at 1:1. 1101 to 1439px (laptops): an inline script at the top of each page (see _working/build-partials.py) adds .is-desk-scaled to and zooms the whole 1440 canvas down to fit, as one piece, so the design stays pixel-identical and nothing gets clipped. --vw is pinned to 1440/100 so viewport units still resolve against the design. 1100px and under (tablets, phones): the stacked layout in the "Tablet and phone" section at the end of this file. */ :root{--vw:1vw} /* Mobile-only elements and line breaks. br-d = desktop-only break, br-m = mobile-only break, .mobile-only = shown at 1100px and under. */ .br-m{display:none} @media (min-width:1101px){.mobile-only{display:none !important}} @media (max-width:1100px){.br-d{display:none}.br-m{display:inline}} html.is-desk-scaled{--vw:14.4px} html.is-desk-scaled .canvas{width:1440px;zoom:var(--desk-scale,1)} /* full-bleed colour band; its .inner content stays on the centred grid */ .band::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:calc(100 * var(--vw));margin-left:calc(-50 * var(--vw));background:var(--band)} .band>.inner{z-index:1} /* hero slider — begins on the design grid (x=739.6 within the 1440 zone), then runs to the real right edge of the window */ .hero-slider{position:absolute;top:156px;left:calc(50% + 19.6px);right:0;height:600px; overflow:hidden} /* absolute-positioning helper */ .abs{position:absolute} /* ---- type scale (all from tree.txt) ---- */ /* CAP_HEIGHT leading-trim — mirrors Figma trim=CAP_HEIGHT on the display type, so an absolute top: aligns to the cap, not to the font's ascender. */ /* Heading 1 */ /* Heading 2 */ .heading-2{font-family:var(--font-display);font-weight:400;font-size:60px;line-height:1.2;letter-spacing:var(--display-track);text-transform:uppercase} /* Heading 3 */ .heading-3{font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1.2;letter-spacing:var(--display-track);text-transform:uppercase} /* Title 1 */ .title-1{font-weight:400;font-size:28px;line-height:1.4} /* Title 2 */ .title-2{font-weight:400;font-size:20px;line-height:1.6} /* Para */ .para{font-weight:400;font-size:16px;line-height:1.8} .navy{color:var(--navy)}.grey{color:var(--grey)}.white{color:var(--white)} .purple{color:var(--purple)}.yellow{color:var(--yellow)}.cream{color:var(--cream)} /* Small purple labels (eyebrows) use the brand's deeper Signature step: #5559B8 at 14px is 4.46:1 on the darker cream band, just under the WCAG AA 4.5:1 minimum; #4546A6 is comfortably above it everywhere. */ .crumb.purple,.crumb .purple{color:#4546A6} /* ---- primitives ---- */ .dot{width:12px;height:12px;border-radius:50%;background:var(--purple);display:inline-block} /* Crumb (type only, no pill/padding — small labels: eyebrows, badges, bylines). Regular weight by default; stack .bold on top where needed so the two vary independently instead of one style baking in the other. */ .crumb{font-weight:400;font-size:14px;letter-spacing:0;line-height:1.8} .bold{font-weight:700} .semibold{font-weight:500} .btn{ display:inline-flex;align-items:center;gap:16px;height:46px; padding:12px 24px;border-radius:var(--r-pill); white-space:nowrap;cursor:pointer;user-select:none;text-decoration:none; } .btn--fill-dark{background:var(--navy);color:var(--white)} .btn--fill-white{background:var(--white);color:var(--purple)} .btn--out-dark{border:1px solid rgba(24,23,59,.5);color:var(--navy)} .btn--out-white{border:1px solid rgba(241,233,216,.35);color:var(--white)} .btn--spread{justify-content:space-between} /* + icon chip inside a button */ .plus{width:24px;height:24px;border-radius:50%;position:relative;flex:0 0 24px} .plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%)} .plus::before{width:12px;height:2px} .plus::after{width:2px;height:12px} .plus--onLight{background:var(--white);color:var(--navy)} .plus--onWhite{background:var(--white);color:var(--purple)} .plus--onDark{background:var(--navy);color:var(--white)} .plus--onPurple{background:var(--purple);color:var(--white)} /* tick chip — same 24px circle as .plus, for buttons that confirm rather than expand. Drawn as a rotated corner so it scales with currentColor. */ .tick{width:24px;height:24px;border-radius:50%;position:relative;flex:0 0 24px} .tick::after{content:"";position:absolute;left:50%;top:46%;width:10px;height:5.5px; border-left:2px solid currentColor;border-bottom:2px solid currentColor; transform:translate(-50%,-50%) rotate(-45deg)} .tick--onDark{background:var(--navy);color:var(--white)} /* round 88px slide button: white circle, orange right-triangle */ .roundbtn{width:88px;height:88px;border-radius:50%;background:var(--cream-dark);display:flex;align-items:center;justify-content:center} /* image placeholder box */ .imgbox{background:var(--cream-dark);border-radius:var(--r-card);position:relative;overflow:hidden} .imgbox--red{background:var(--purple)} .imgbox--white{background:var(--cream-dark)} .ovl{position:absolute;inset:0;background:linear-gradient(to top,var(--navy),rgba(24,23,59,0));pointer-events:none} .ovl--40{opacity:.4}.ovl--30{opacity:.3} .ovl--diag{background:linear-gradient(150deg,rgba(24,23,59,0),var(--purple))} /* Badge: type only (size, weight, style, line-height, letter-spacing), same as every other named type class. Shape/colour lives in .badge-shape, kept separate so .badge stays a pure type definition. */ .badge{font-size:12px;font-weight:400;font-style:normal;line-height:1; letter-spacing:.02em;text-transform:uppercase} .badge-shape{display:inline-flex;align-items:center;justify-content:center; height:26px;padding:0 10px;border-radius:var(--r-pill); background:var(--navy);border:1px solid var(--navy);color:var(--white)} /* small "Logo / Header" wordmark */ .navlinks{display:flex;gap:24px} .navlinks a{color:var(--navy);text-decoration:none} /* footer */ .footer-inner{position:absolute;inset:0;background:var(--navy);border-radius:80px 80px 0 0} .footer-wordmark{opacity:.1;transition:opacity .2s ease} .footer-wordmark:hover{opacity:.1} .flinks{display:flex;flex-direction:column;gap:0} .flinks a{color:var(--white);text-decoration:none} .social{display:flex;gap:8px} .social svg{width:32px;height:32px;display:block;fill:var(--white)} .svc-plus::before,.svc-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--white);transform:translate(-50%,-50%)} .svc-plus::before{width:12px;height:2px}.svc-plus::after{width:2px;height:12px} /* ---- Header ---- Desktop: every piece at its original position on the 1440 grid. 1100px and under: logo + menu button, links in a drop-down panel. */ .site-header{position:absolute;top:0;left:0;width:100%;z-index:100} .site-header-inner{position:relative;width:1440px;height:150px;margin:0 auto} .header-logo{position:absolute;left:69px;top:43px} .header-logo img{height:64px;width:auto;display:block} .header-nav-container{display:contents} .header-nav-container .navlinks{position:absolute;left:520px;top:69px} .header-availability{position:absolute;left:995px;top:69px;display:flex;align-items:center;gap:10px} .header-nav-container > .btn{position:absolute;left:1229px;top:58px} .mobile-menu-btn{display:none} .pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease-in-out infinite;flex:0 0 9px} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}} @media (prefers-reduced-motion: reduce){.pulse-dot{animation:none}} @media (max-width:1100px){ .site-header-inner{width:100%;height:auto;display:flex;align-items:center;justify-content:space-between;padding:18px 20px} .header-logo{position:static} .header-logo img{height:40px} .mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;border-radius:50%;color:var(--navy);cursor:pointer} .mobile-menu-btn .icon-close{display:none} .site-header.nav-open .mobile-menu-btn .icon-open{display:none} .site-header.nav-open .mobile-menu-btn .icon-close{display:block} .header-nav-container{display:none;position:absolute;top:100%;left:0;width:100%;background:var(--cream);flex-direction:column;align-items:center;padding:12px 20px 28px;gap:20px;box-shadow:0 16px 30px rgba(24,23,59,.15)} .site-header.nav-open .header-nav-container{display:flex} .header-nav-container .navlinks,.header-availability,.header-nav-container > .btn{position:static} .header-nav-container .navlinks{flex-direction:column;align-items:center;gap:0;font-size:18px} .header-nav-container .navlinks a{display:block;padding:10px 24px} .header-spacer{height:80px !important} #floatingNav nav{display:none !important} #floatingNav{width:calc(100% - 32px) !important;top:12px !important} } /* ---- Footer ---- Desktop: the approved 1070px footer, pieces at their original positions on the 1440 grid. 1100px and under: stacked, full width. */ .site-footer{position:relative;background:var(--navy);height:1070px;overflow:hidden} .site-footer .footer-inner{position:absolute;inset:0;background:var(--navy);border-radius:80px 80px 0 0} .footer-content{position:relative;width:1440px;height:100%;margin:0 auto} .footer-top{position:absolute;left:80px;top:0;width:1280px;height:472px;border-bottom:1px solid rgba(241,233,216,.35);display:flex;justify-content:space-between} .footer-links-main{padding-top:144px;display:flex;flex-direction:column;gap:32px} .footer-cta{width:400px;padding-top:144px} .footer-cta-buttons{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap} .footer-bottom{position:absolute;left:80px;top:552px;width:1280px;display:flex;justify-content:space-between} .footer-nav-col{width:400px;display:flex;justify-content:space-between} .footer-address{width:180px} .footer-wordmark-container{position:absolute;left:calc(50% - 912px);top:747px;width:1824px;pointer-events:none} @media (max-width:1100px){ .site-footer{height:auto} .site-footer .footer-inner{position:relative;inset:auto;border-radius:40px 40px 0 0;padding-top:64px} .footer-content{width:auto;height:auto;max-width:720px;padding:0 24px} .footer-top{position:static;width:auto;height:auto;flex-direction:column;gap:48px;padding-bottom:56px} .footer-links-main,.footer-cta{padding-top:0} .footer-links-main{gap:12px} .footer-links-main .heading-2{font-size:40px} .footer-cta{width:auto} .footer-cta .title-1{font-size:24px} .footer-cta-buttons{flex-direction:column} .footer-cta-buttons .btn{width:100%} .footer-bottom{position:static;width:auto;flex-direction:column;gap:40px;padding:48px 0 16px} .footer-nav-col{width:auto;gap:48px} .flinks a{display:block;padding:6px 0} .footer-wordmark-container{position:static;width:140%;margin-left:-20%} } /* ---- Modals ---- */ .modal-overlay{position:fixed;inset:0;background:rgba(24,23,59,.5);z-index:1000; display:flex;align-items:center;justify-content:center;padding:24px; opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease} .modal-overlay.is-open{opacity:1;visibility:visible} .modal-panel{background:var(--cream-dark);border-radius:var(--r-card);width:100%;max-width:960px; display:flex;max-height:100%;overflow:hidden;position:relative} .modal-panel--compact{max-width:420px} .modal-visual{flex:0 0 42%;position:relative;background:var(--purple);border-radius:0;display:block;} .modal-visual-text{position:absolute;left:32px;bottom:32px;right:32px;display:flex;flex-direction:column} .modal-visual-text span{display:block} .modal-scroll{flex:1 1 auto;min-width:0;min-height:0;padding:56px 28px 28px;overflow-y:auto} .modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%; background:rgba(24,23,59,.05);border:none;color:var(--navy);font-size:20px;line-height:1; display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .2s} .modal-close:hover{background:var(--cream)} @media (max-width: 900px) { .modal-panel { flex-direction: column !important; } /* The purple panel carries the popup's heading, so keep it as a compact band across the top rather than hiding it. */ .modal-visual { display: block !important; flex: none !important; min-height: 0 !important; padding: 24px 56px 22px 24px !important; } .modal-visual-text { position: static !important; display: block !important; } .modal-visual-text .heading-2 { font-size: 30px !important; line-height: 1.1 !important; } .modal-visual-text span { display: inline !important; } .modal-visual-text span + span::before { content: " "; } .modal-close { background: rgba(255,255,255,.85); } .chip-row[data-group="budget"] .chip, .chip-row[data-group="stage"] .chip { flex: 0 0 calc(50% - 4px) !important; } .modal-scroll { padding: 24px 20px 20px !important; } } /* ---- Accessibility Focus Rings ---- */ .btn:focus-visible, .modal-close:focus-visible, .chip:focus-visible, .roundbtn:focus-visible, .social a:focus-visible, .client-logo a:focus-visible, .flinks a:focus-visible, .navlinks a:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; } .modal-close:focus-visible { outline-offset: 2px; } /* ---- Cookie Banner ---- */ .cookie-banner { position: fixed; bottom: 24px; left: 24px; right: 24px; max-width: 400px; background: var(--cream); border-radius: var(--r-card); padding: 24px; box-shadow: 0 12px 30px rgba(24,23,59,.15); z-index: 9999; transform: translateY(150%); opacity: 0; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease; pointer-events: none; } .cookie-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .cookie-text { font-size: 14px; color: var(--navy); line-height: 1.6; margin-bottom: 20px; } .cookie-buttons { display: flex; gap: 12px; } .cookie-btn { flex: 1; height: 40px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: opacity 0.2s ease; } .cookie-btn:hover { opacity: 0.8; } .cookie-btn { font-family: inherit; } .cookie-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; } .cookie-text a { color: inherit; text-decoration: underline; } .cookie-btn--accept { background: var(--navy); color: var(--white); } .cookie-btn--decline { background: transparent; color: var(--navy); border: 1px solid rgba(24,23,59,0.2); } /* ====================================================================== Tablet and phone (1100px and under) The desktop design is a 1440px canvas of absolutely positioned pieces. Here every piece drops back into normal document flow, in source order (which is also reading order), inside a readable centred column. The page-specific adjustments that follow are keyed off . ====================================================================== */ @media (max-width:1100px){ .section{height:auto !important;padding-top:56px !important;padding-bottom:56px !important} .inner{width:auto !important;height:auto !important;max-width:760px;margin:0 auto; padding-left:20px !important;padding-right:20px !important} .abs{position:relative !important;left:auto !important;right:auto !important; top:auto !important;bottom:auto !important;width:auto !important;max-width:100% !important} .inner > .abs + .abs{margin-top:20px} h1[style*="white-space:nowrap"],h2[style*="white-space:nowrap"],h3[style*="white-space:nowrap"],p[style*="white-space:nowrap"]{white-space:normal !important} img,video{max-width:100%} .heading-hero{font-size:64px !important;line-height:1 !important} .heading-2{font-size:40px !important;line-height:1.1 !important} .heading-3{font-size:32px !important;line-height:1.15 !important} .title-1{font-size:22px !important} .title-2{font-size:18px !important} .btn{min-height:46px} } /* ---- Home, tablet and phone ---- */ @media (max-width:1100px){ [data-page=home] #hero{padding-top:96px !important;padding-bottom:0 !important} [data-page=home] #hero .heading-hero{font-size:clamp(46px,14.5vw,88px) !important;line-height:1.02 !important} [data-page=home] #hero .inner > .heading-hero{margin-top:0} [data-page=home] #hero .inner > h1.abs + .heading-hero{margin-top:16px} [data-page=home] #hero .heading-hero[style*="word-spacing"]{word-spacing:-.25em !important} [data-page=home] #heroBtnRow{flex-direction:column;align-items:stretch;gap:12px !important} [data-page=home] #heroBtnRow .btn{width:100% !important;justify-content:space-between} [data-page=home] #featured .btn{justify-content:space-between} /* "often the quietest" (18 characters) must fit on one line */ [data-page=home] #featured h2.heading-3{font-size:min(32px, calc((100 * var(--vw) - 40px) / 12)) !important} [data-page=home] #hero .inner > .abs > div[style*="space-between"]{display:grid !important;grid-template-columns:repeat(3,1fr);gap:12px 16px !important;justify-items:center} [data-page=home] #hero .client-logo{width:100%;max-width:120px;height:48px} [data-page=home] #hero .inner > .abs:has(.hs-arrow){display:none !important} [data-page=home] #heroSlider{position:relative;top:auto;left:auto;right:auto;height:clamp(340px,95vw,560px);margin:40px 0 0 20px} [data-page=home] #heroSlider .hs-card{width:84%;height:100%} [data-page=home] #featured .inner{display:flex;flex-direction:column} [data-page=home] #featured img.abs{order:9;height:auto !important;width:100% !important;max-width:420px !important;margin:36px auto -56px !important} [data-page=home] #portfolio .inner > .abs[style*="gap:40px"]{flex-direction:column;flex-wrap:nowrap !important;gap:20px !important;margin-top:32px} [data-page=home] #portfolio .inner > .abs > div[style*="flex:0 0 620px"]{flex:1 1 auto !important;gap:20px !important} [data-page=home] #portfolio .gal-card{width:100% !important;height:auto !important;aspect-ratio:4/5} [data-page=home] #portfolio .gal-text{left:20px !important;right:80px !important;bottom:20px !important} [data-page=home] #portfolio .gal-text .heading-4{font-size:24px} [data-page=home] #portfolio .gal-text .para{font-size:14px;line-height:1.5} [data-page=home] #portfolio .svc-plus{width:44px !important;height:44px !important;right:20px !important;bottom:20px !important} [data-page=home] .marquee{width:calc(100% + 40px) !important;margin:40px -20px 0 !important} [data-page=home] .mq-track span{font-size:80px !important} [data-page=home] #clients .inner > .abs[style*="repeat(4"]{grid-template-columns:1fr !important;gap:16px !important;margin-top:32px} [data-page=home] #clients .inner > .abs[style*="repeat(6"]{grid-template-columns:repeat(3,1fr) !important;gap:8px 16px !important;margin-top:40px} [data-page=home] #clients .logo-cell{height:72px} [data-page=home] #clients .quote-cell{width:auto;min-height:0;gap:28px} [data-page=home] #hero .inner > .heading-hero + .heading-hero{margin-top:.22em} [data-page=home] #portfolio .gal-overlay{opacity:.85} [data-page=home] #clients .logo-img{max-width:100% !important} [data-page=home] #notes .inner > .abs[style*="gap:111px"]{flex-direction:column;flex-wrap:nowrap !important;align-items:stretch !important;gap:24px !important;margin-top:32px} [data-page=home] #notes .post-tile[style*="660px"]{flex:none !important;width:100% !important;height:175px !important} [data-page=home] #notes div[style*="flex:0 0 510px"]{display:none !important} [data-page=home] #notes p[style*="margin-left:110px"]{margin-left:0 !important} [data-page=home] #notes .inner > .abs[style*="1361px"]{display:grid !important;grid-template-columns:1fr 1fr;gap:16px !important;margin-top:16px !important;padding-top:0 !important;border-top:0 !important} } @media (max-width:600px){ [data-page=home] #notes .inner > .abs[style*="1361px"]{grid-template-columns:1fr} } @media (min-width:601px) and (max-width:1100px){ [data-page=home] #portfolio .inner > .abs[style*="gap:40px"]{flex-direction:row} [data-page=home] #portfolio .inner > .abs > div[style*="flex:0 0 620px"]{flex:1 1 0 !important} [data-page=packages] div[style*="repeat(2,1fr)"]{grid-template-columns:1fr 1fr !important} } /* ---- Patterns shared by several pages, tablet and phone ---- */ @media (max-width:1100px){ [style*="margin-left:110px"]{margin-left:0 !important} .inner[style*="display:flex"]{flex-direction:column !important;gap:40px !important;align-items:stretch !important} .inner[style*="display:flex"] > div{flex:none !important;width:auto !important;max-width:100% !important} .abs[style*="display:flex"]{flex-wrap:wrap} .btn[style*="width:"]{max-width:100%} .heading-1{font-size:clamp(56px,21vw,120px) !important;line-height:.95 !important} /* testimonials + client logos (Home, About) */ .abs[style*="repeat(4,302px)"]{grid-template-columns:1fr !important;gap:16px !important} .quote-cell{width:auto !important;min-height:0 !important;gap:28px} .abs[style*="repeat(6,1fr)"]{grid-template-columns:repeat(3,1fr) !important;gap:8px 16px !important} .logo-cell{height:72px !important} .logo-img{max-width:100% !important} /* service chips in forms: two per row, comfortable to tap */ .chip{min-height:40px} .chip--svc{flex:1 1 calc(50% - 5px) !important;font-size:13px} form > div[style*="display:flex;gap:10px"]{flex-direction:column} form > div[style*="display:flex;gap:10px"] > *{flex:none !important;width:100% !important} } @media (min-width:601px) and (max-width:1100px){ .abs[style*="repeat(4,302px)"]{grid-template-columns:1fr 1fr !important} } /* ---- About, tablet and phone ---- */ @media (max-width:1100px){ [data-page=about] section:has(> #leadStrip){height:auto !important} [data-page=about] #leadStrip{display:grid !important;grid-template-columns:repeat(5,1fr);height:auto !important} [data-page=about] .lead-slot{aspect-ratio:3/4} [data-page=about] .abs:has(> .proc-card){display:grid !important;grid-template-columns:1fr 1fr;gap:36px 20px !important;margin-top:36px} [data-page=about] .abs:has(> .btn){gap:12px !important;margin-top:40px} [data-page=about] .abs:has(> .btn) > .btn{flex:1 1 220px;width:auto !important} [data-page=about] .section:has(.heading-1) .inner{display:flex;flex-direction:column} [data-page=about] .abs[style*="repeat(6,1fr)"]{order:3;margin-top:40px} [data-page=about] .abs[style*="repeat(4,302px)"]{order:4;margin-top:40px} } @media (max-width:480px){ [data-page=about] .abs:has(> .proc-card){grid-template-columns:1fr} } /* ---- Packages, tablet and phone ---- */ @media (max-width:1100px){ [data-page=packages] #packages .inner > div[style*="display:flex"]{flex-direction:column;gap:20px !important;margin-top:48px !important} [data-page=packages] .pkg-card{min-height:0 !important} [data-page=packages] .pkg-card ul{margin-top:28px !important} [data-page=packages] div[style*="repeat(2,1fr)"]{grid-template-columns:1fr !important;gap:20px !important;margin-top:40px !important} [data-page=packages] .work-card .gal-card{height:auto !important;aspect-ratio:4/5} [data-page=packages] .work-card .gal-overlay{opacity:.85} } /* ---- Thinking, tablet and phone ---- */ @media (max-width:1100px){ [data-page=thinking] .inner > div[style*="gap:80px"]{flex-direction:column;gap:28px !important} [data-page=thinking] .inner > div[style*="gap:80px"] > a{flex:none !important;width:100% !important;height:auto !important;aspect-ratio:16/9} [data-page=thinking] #postGrid{grid-template-columns:1fr 1fr !important;gap:40px 20px !important} } @media (max-width:600px){ [data-page=thinking] #postGrid{grid-template-columns:1fr !important} } /* ---- Case study, tablet and phone ---- */ @media (max-width:1100px){ [data-page=casestudy] .cs{--gut:20px} [data-page=casestudy] .cs .wrap{max-width:760px} [data-page=casestudy] .cs .sit-split{grid-template-columns:1fr;min-height:0} [data-page=casestudy] .cs .sit-split .shot{height:auto} [data-page=casestudy] .cs .sit-split .shot video{aspect-ratio:4/5;height:auto !important} [data-page=casestudy] .cs .guard-card .ph{height:auto !important;aspect-ratio:1/1} [data-page=casestudy] .cs .cta-split{grid-template-columns:1fr} [data-page=casestudy] .cs .cta-split .ph{min-height:0;aspect-ratio:4/3} [data-page=casestudy] .cs .row{flex-direction:column;align-items:stretch} [data-page=casestudy] .cs .row .btn{width:100% !important} }