:root{ --paper:#F4EFE0; --paper-2:#EAE3CD; --ink:#0E1A33; --ink-soft:#5A6483; --yellow:#FCB116; --yellow-deep:#E59C00; --hairline:rgba(14,26,51,0.12); --ease:cubic-bezier(.16,1,.3,1); --navy:#0E1A33; } *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;} html{ scroll-behavior:smooth; } body{ background:var(--paper); color:var(--ink); font-family:'Jost',sans-serif; font-size:16px; line-height:1.55; overflow-x:hidden; } img,video,svg{ display:block; max-width:100%; } h1,h2,h3,h4{ font-family:'EB Garamond',serif; font-weight:400; letter-spacing:-0.022em; color:var(--ink); text-wrap:balance; } em{ font-style:italic; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; border:0; background:transparent; color:inherit; padding:0; } /* Site header (will be canonicalised by normalize-canonical-header.sh on deploy) */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:80; background:var(--yellow); border-bottom:1px solid transparent; } .site-header-inner{ max-width:1720px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 28px; gap:32px; } .site-logo{ display:inline-flex; align-items:center; height:48px; } .site-logo img{ height:100%; width:auto; display:block; object-fit:contain; } .site-nav{ display:flex; gap:38px; align-items:center; } .nav-item{ position:relative; } .nav-item > a, .nav-item > button{ font-family:'Jost',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--navy); opacity:.7; padding:10px 0; display:inline-flex; align-items:center; gap:8px; background:transparent; border:0; cursor:pointer; } .nav-item.has-dropdown > a::after, .nav-item.has-dropdown > button::after{ content:""; position:absolute; top:100%; left:-12px; right:-12px; height:18px; } .nav-dropdown{ position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%, 6px); min-width:220px; background:rgba(244,239,224,0.96); backdrop-filter:blur(32px) saturate(180%); border:1px solid rgba(14,26,51,0.08); border-radius:12px; padding:10px 0; opacity:0; pointer-events:none; transition:opacity .28s var(--ease), transform .36s var(--ease); z-index:90; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.is-open .nav-dropdown{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; } .nav-dropdown a{ display:flex; padding:11px 26px; font-family:'Jost',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--navy); opacity:.7; } .nav-dropdown a:hover{ opacity:1; padding-left:36px; } .wrap{ max-width:1640px; margin:0 auto; padding:0 60px; } @media (max-width:780px){ .wrap{ padding:0 24px; } } /* Hero · navy backdrop with brand identity */ .case-hero{ background:var(--ink); color:var(--paper); padding:200px 0 110px; position:relative; overflow:hidden; } .case-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 20% 20%, rgba(252,177,22,0.20), transparent 60%), radial-gradient(60% 80% at 80% 100%, rgba(14,26,51,0.6), transparent 60%); pointer-events:none; } .case-hero .wrap{ position:relative; z-index:2; } .crumbs{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(244,239,224,0.55); margin-bottom:40px; display:inline-flex; align-items:center; gap:14px; } .crumbs a{ color:rgba(244,239,224,0.65); transition:color .25s var(--ease); } .crumbs a:hover{ color:var(--yellow); } .case-tag{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--yellow); font-weight:600; margin-bottom:32px; display:inline-flex; align-items:center; gap:14px; } .case-tag::before{ content:""; width:36px; height:1px; background:var(--yellow); } .case-title{ font-family:'EB Garamond',serif; font-style:italic; font-weight:400; font-size:clamp(64px, 10vw, 180px); line-height:0.94; letter-spacing:-0.036em; color:var(--paper); max-width:14ch; } .case-title em{ color:rgba(244,239,224,0.62); font-style:italic; } .case-sub{ margin-top:36px; font-family:'EB Garamond',serif; font-style:italic; font-size:clamp(20px, 2vw, 28px); line-height:1.45; color:rgba(244,239,224,0.78); max-width:54ch; } @media (max-width:780px){ .case-hero{ padding:140px 0 70px; } .case-sub{ font-size:18px; } } /* Section chrome */ .section{ padding:120px 0; } @media (max-width:780px){ .section{ padding:64px 0; } } .section-eyebrow{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; display:inline-flex; align-items:center; gap:14px; margin-bottom:32px; } .section-eyebrow::before{ content:""; width:36px; height:1px; background:var(--ink-soft); } .section-eyebrow .num{ color:var(--yellow-deep); } .section-h{ font-family:'EB Garamond',serif; font-weight:400; font-size:clamp(40px, 6vw, 88px); line-height:0.98; letter-spacing:-0.028em; max-width:22ch; margin-bottom:36px; } .section-h em{ font-style:italic; color:var(--ink-soft); } .section-lede{ font-family:'EB Garamond',serif; font-style:italic; font-size:clamp(18px, 1.6vw, 24px); line-height:1.45; color:var(--ink-soft); max-width:48ch; margin-bottom:64px; } .section-rule{ height:1px; background:var(--hairline); margin:0; } /* Collection card · used for each Drive sub-folder */ .collections{ display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; } @media (max-width:780px){ .collections{ grid-template-columns:1fr 1fr; gap:14px; } } .collection{ background:var(--paper-2); border-radius:14px; padding:36px 32px; transition:transform .45s var(--ease), background .35s var(--ease), box-shadow .45s var(--ease); display:flex; flex-direction:column; gap:18px; min-height:240px; position:relative; overflow:hidden; } @media (max-width:780px){ .collection{ padding:18px 16px; min-height:140px; gap:10px; } } .collection::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); } .collection:hover{ transform:translateY(-4px); background:#EDE5CB; box-shadow:0 28px 60px rgba(14,26,51,0.12); } .collection:hover::before{ transform:scaleX(1); } .collection .num{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--yellow-deep); font-weight:600; } .collection h3{ font-family:'EB Garamond',serif; font-weight:400; font-style:italic; font-size:clamp(24px, 2.6vw, 36px); line-height:1.08; letter-spacing:-0.02em; color:var(--ink); } @media (max-width:780px){ .collection h3{ font-size:18px; } } .collection .tag{ display:inline-flex; align-items:center; gap:10px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:auto; } .collection .tag::before{ content:""; width:18px; height:1px; background:var(--ink-soft); } .collection .open{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; background:rgba(14,26,51,0.06); display:grid; place-items:center; transition:background .3s var(--ease), transform .35s var(--ease); } .collection:hover .open{ background:var(--ink); transform:translate(2px, -2px); } .collection:hover .open svg{ stroke:var(--paper); } .collection .open svg{ width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:2; transition:stroke .3s var(--ease); } /* Group header within a section (Reels · Carousels · Statics) */ .group{ margin-bottom:72px; } .group:last-child{ margin-bottom:0; } .group-head{ display:flex; align-items:baseline; justify-content:space-between; gap:32px; margin-bottom:28px; padding-bottom:18px; border-bottom:1px solid var(--hairline); flex-wrap:wrap; } .group-head h3{ font-family:'EB Garamond',serif; font-weight:400; font-style:italic; font-size:clamp(28px, 3.4vw, 48px); line-height:1; letter-spacing:-0.022em; color:var(--ink); } .group-head .count{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; } /* Campaign section · dark navy backdrop */ .campaign{ background:var(--ink); color:var(--paper); padding:140px 0; } @media (max-width:780px){ .campaign{ padding:80px 0; } } .campaign .section-eyebrow{ color:rgba(244,239,224,0.6); } .campaign .section-eyebrow::before{ background:rgba(244,239,224,0.4); } .campaign .section-eyebrow .num{ color:var(--yellow); } .campaign .section-h{ color:var(--paper); } .campaign .section-h em{ color:rgba(244,239,224,0.55); } .campaign .section-lede{ color:rgba(244,239,224,0.72); } .campaign .collection{ background:rgba(244,239,224,0.06); border:1px solid rgba(244,239,224,0.10); } .campaign .collection:hover{ background:rgba(244,239,224,0.10); box-shadow:0 28px 60px rgba(0,0,0,0.35); } .campaign .collection .num{ color:var(--yellow); } .campaign .collection h3{ color:var(--paper); } .campaign .collection .tag{ color:rgba(244,239,224,0.55); } .campaign .collection .tag::before{ background:rgba(244,239,224,0.4); } .campaign .collection .open{ background:rgba(244,239,224,0.10); } .campaign .collection .open svg{ stroke:var(--paper); } .campaign .collection:hover .open{ background:var(--yellow); } .campaign .collection:hover .open svg{ stroke:var(--ink); } /* Closer · next-brand prompt */ .closer{ padding:120px 0; background:var(--paper); border-top:1px solid var(--hairline); } .closer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; } @media (max-width:780px){ .closer-grid{ grid-template-columns:1fr; gap:32px; } .closer{ padding:64px 0; } } .closer h2{ font-family:'EB Garamond',serif; font-style:italic; font-weight:400; font-size:clamp(36px, 5vw, 72px); line-height:1.02; letter-spacing:-0.025em; max-width:20ch; } .closer .back-link{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink); font-weight:600; opacity:.78; display:inline-flex; align-items:center; gap:14px; transition:opacity .25s var(--ease), padding-left .3s var(--ease); } .closer .back-link::before{ content:""; width:32px; height:1px; background:var(--ink); transition:width .3s var(--ease); } .closer .back-link:hover{ opacity:1; padding-left:8px; } .closer .back-link:hover::before{ width:46px; } /* Footer */ .site-footer{ background:var(--ink); color:var(--paper); padding:80px 0 40px; } .footer-inner{ max-width:1640px; margin:0 auto; padding:0 60px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; align-items:start; } @media (max-width:780px){ .footer-inner{ grid-template-columns:1fr; padding:0 24px; gap:40px; } } .footer-brand .ft-wordmark{ font-family:'EB Garamond',serif; font-style:italic; font-size:42px; font-weight:500; color:var(--yellow); } .footer-brand .ft-tagline{ margin-top:18px; font-family:'EB Garamond',serif; font-style:italic; font-size:18px; line-height:1.4; color:rgba(244,239,224,0.78); max-width:32ch; } .footer-col h4{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; margin-bottom:18px; opacity:.6; } .footer-col ul{ list-style:none; padding:0; } .footer-col li{ margin-bottom:10px; } .footer-col a{ font-family:'Jost',sans-serif; font-size:14px; opacity:.85; transition:opacity .2s var(--ease), color .2s var(--ease); } .footer-col a:hover{ color:var(--yellow); opacity:1; } .footer-meta{ margin-top:60px; padding-top:30px; border-top:1px solid rgba(244,239,224,0.16); display:flex; justify-content:space-between; align-items:center; max-width:1640px; margin-left:auto; margin-right:auto; padding-left:60px; padding-right:60px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(244,239,224,0.5); font-weight:600; } @media (max-width:780px){ .footer-meta{ flex-direction:column; gap:14px; padding-left:24px; padding-right:24px; text-align:center; } }
Social Media · The Gift Studio
Social Media · Festive Gifting

The Gift Studio, by gesture.

Reels, carousels and stills that turn gifting into a year-round conversation, from festive edits to the Masaba Gupta campaign.

01 · Work

A year of moments, told in three formats.

In-house Reels for the everyday, Carousels for the considered, and Statics for the quiet detail. Eighteen collections across festive and editorial calendars.

Reels

10 collections
01 · Reels

In-house content

Open in Drive 02 · Reels

A Curated Christmas

Open in Drive 03 · Reels

The Diwali Edit

Open in Drive 04 · Reels

A celebration of Mothers

Open in Drive 05 · Reels

The Gift of Siblinghood

Open in Drive 06 · Reels

Valentine's Day, Thoughtfully

Open in Drive 07 · Reels

The Women's Day Edit

Open in Drive 08 · Social IP

Couple Gifting

Open in Drive 09 · Social IP

Gifting Hotline

Open in Drive 10 · Social IP

Long Distance Relationship

Open in Drive

Carousels

6 collections
01 · Carousel

Iftaar Dinner Table

Open in Drive 02 · Carousel

Mother's Day · Designer Hampers

Open in Drive 03 · Carousel

Mother's Day · Gift Guide

Open in Drive 04 · Carousel

Customer Reviews

Open in Drive 05 · Carousel

Valentine's Day · International Shipping

Open in Drive 06 · Carousel

Wedding Gifting

Open in Drive

Statics

Full library
01 · Statics

Static design library

Open in Drive
02 · Campaign

Masaba Gupta, in the hamper.

A festive collaboration that translated Masaba's print language into gifting, across a giveaway, a hamper reveal, and a print-led campaign film.

01 · Campaign

Giveaway

Open in Drive 02 · Campaign

What's in the Hamper

Open in Drive 03 · Campaign

Masaba Prints

Open in Drive

Next, another brand built at speed.

Back to Social Media