/* Concierge Drop components (27 Oct 2026). The one source for the brand's built parts: the site, the guideline's
   Components page and any new collateral link this file and use these classes instead of drawing their own.
   Measured from the homepage Gaby approved (company.html): the claim ticket and brass rail, the headline pair,
   the mono label, the navy button, the hairline. Change a part here, never in a page.
   Fonts: Gloock, Bodoni Moda italic, Figtree, DM Mono (one Google Fonts link, as company.html loads them). */

:root{
 --cd-navy:#14204A;      /* ink, buttons, the dark band */
 --cd-blue:#436EEE;      /* Drop Blue: the logo, a headline's turned word, real objects in art; never a backdrop shape */
 --cd-cream:#FBF5EA;     /* ticket and band ground */
 --cd-paper:#FFFDF8;     /* page ground */
 --cd-brass:#A8814A;     /* rails, ticket rules, cords; never text on paper */
 --cd-sky:#A9BEF3;       /* the wash & fold sack */
 --cd-hair:rgba(20,32,74,.16);
 --cd-display:Gloock,Georgia,serif;
 --cd-turn:"Bodoni Moda",Didot,serif;
 --cd-body:Figtree,system-ui,sans-serif;
 --cd-mono:"DM Mono",ui-monospace,monospace;
}

/* The headline pair: Gloock, with one turned word in Bodoni italic. On a phone the turned word takes its own line. */
.cd-head{font:400 clamp(40px,5vw,72px)/1.02 var(--cd-display);letter-spacing:-.01em;color:var(--cd-navy);margin:0}
.cd-head em{font:italic 700 1em/1 var(--cd-turn);color:var(--cd-blue)}
@media (max-width:820px){.cd-head em{display:block}}

/* The mono label: small capitals above a heading or a field. */
.cd-label{font:500 11px/1.4 var(--cd-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cd-navy);opacity:.7}

/* The hairline rule. */
.cd-hair{border:0;border-top:1px solid var(--cd-hair);margin:0}

/* The navy button. */
.cd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--cd-navy);color:var(--cd-cream);font:500 16px var(--cd-body);text-decoration:none;border:0;border-radius:2px;cursor:pointer}
.cd-btn:focus-visible{outline:2px solid var(--cd-blue);outline-offset:3px}
.cd-btn span{opacity:.75;font:500 12px var(--cd-mono);letter-spacing:.14em}

/* The claim ticket: cream, a brass double rule, a punch hole and its label. Holds a clip, a form or an offer. */
.cd-ticket{position:relative;background:var(--cd-cream);border:1px solid var(--cd-brass);outline:1px solid var(--cd-brass);outline-offset:-7px;padding:22px 22px 26px;color:var(--cd-navy);text-align:center}
.cd-ticket__hole{display:block;width:10px;height:10px;margin:0 auto 10px;border-radius:50%;border:1px solid var(--cd-navy);background:var(--cd-paper)}
.cd-ticket__label{display:block;font:500 10px/1 var(--cd-mono);letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.cd-ticket__title{display:block;margin-top:10px;font:400 26px/1.15 var(--cd-display)}
.cd-ticket--form{text-align:left;background:var(--cd-paper)}
a.cd-ticket{text-decoration:none;display:block}a.cd-ticket:focus-visible{outline:2px solid var(--cd-blue);outline-offset:3px}

/* The brass rail: tickets hang from it on cords of slightly different lengths. */
.cd-rail{list-style:none;margin:0;padding:56px 0 0;position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.cd-rail:before{content:"";position:absolute;left:-8px;right:-8px;top:0;height:2px;background:var(--cd-brass)}
.cd-rail>li{position:relative}
.cd-rail>li:before{content:"";position:absolute;left:50%;top:-56px;width:1px;height:56px;background:var(--cd-brass)}
.cd-rail>li:nth-child(even){margin-top:-18px}.cd-rail>li:nth-child(even):before{height:38px}
@media (max-width:820px){.cd-rail>li:nth-child(n){margin-top:0}.cd-rail>li:nth-child(n+2):before{display:none}}