:root{--teal:#18a8b5;--deep:#075866;--ink:#10282e;--paper:#fbfaf7;--silver:#dbe3e6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}a{text-decoration:none;color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}header{position:fixed;z-index:20;inset:0 0 auto;background:rgba(4,31,37,.82);backdrop-filter:blur(12px);color:#fff}nav{height:112px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:12px;font-weight:800}.logo img{height:88px;width:auto;object-fit:contain;display:block}.links{display:flex;gap:24px;align-items:center;font-weight:700;font-size:14px}.cta{padding:13px 19px;border-radius:999px;background:linear-gradient(135deg,#27bdc9,#087480);color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.22)} .hero{min-height:900px;display:grid;place-items:center;color:white;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 15%,rgba(98,233,240,.35),transparent 23%),linear-gradient(115deg,rgba(2,24,30,.96),rgba(4,83,93,.82) 55%,rgba(21,167,181,.68));padding-top:112px}.hero:after{content:"";position:absolute;inset:auto 0 0;height:170px;background:linear-gradient(transparent,var(--paper))}.spark{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 18px #bafaff}.s1{width:7px;height:7px;left:12%;top:25%}.s2{width:4px;height:4px;right:8%;top:31%}.s3{width:8px;height:8px;right:27%;bottom:28%}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}.eyebrow{display:inline-block;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);padding:9px 13px;border-radius:999px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}h1{font-family:Georgia,serif;font-size:clamp(54px,7vw,92px);line-height:.98;margin:25px 0 22px;letter-spacing:-.045em;overflow-wrap:break-word}.hero p{font-size:21px;line-height:1.55;color:rgba(255,255,255,.85);max-width:650px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.secondary{padding:13px 19px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.08)}.hero-art{position:relative;display:grid;place-items:center}.hero-art:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(87,228,238,.28),transparent 67%);filter:blur(4px)}.hero-art img{position:relative;width:min(520px,90%);border-radius:36px;box-shadow:0 35px 100px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25)} section{padding:100px 0}.kicker{text-transform:uppercase;letter-spacing:.12em;color:var(--deep);font-weight:900;font-size:12px}h2{font-family:Georgia,serif;font-size:clamp(38px,5vw,60px);line-height:1.05;margin:12px 0 16px;letter-spacing:-.03em}.lead{font-size:18px;color:#65767c;max-width:760px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}.card{min-height:420px;border-radius:28px;overflow:hidden;position:relative;color:#fff;box-shadow:0 20px 55px rgba(5,60,68,.18)}.card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 18%,rgba(3,34,40,.9))}.card .art{position:absolute;inset:0;background:radial-gradient(circle at 55% 28%,rgba(255,255,255,.65),transparent 4%),radial-gradient(circle at 47% 34%,#f4c7a9 0 7%,transparent 8%),radial-gradient(circle at 62% 36%,#d89a72 0 7%,transparent 8%),linear-gradient(135deg,#8cd8de,#0d6f7c)}.card:nth-child(2) .art{background:radial-gradient(circle at 35% 32%,#f0be95 0 7%,transparent 8%),radial-gradient(circle at 52% 28%,#b66d4c 0 7%,transparent 8%),radial-gradient(circle at 68% 34%,#f6ccab 0 7%,transparent 8%),linear-gradient(135deg,#74c8d1,#064d58)}.card:nth-child(3) .art{background:radial-gradient(circle at 40% 30%,#eab58e 0 7%,transparent 8%),radial-gradient(circle at 58% 35%,#8f543d 0 7%,transparent 8%),linear-gradient(135deg,#b7e4e7,#126f7c)}.people{position:absolute;inset:0;background:linear-gradient(70deg,transparent 26%,rgba(255,255,255,.18) 27% 32%,transparent 33%),linear-gradient(110deg,transparent 48%,rgba(255,255,255,.2) 49% 54%,transparent 55%)}.card-copy{position:absolute;z-index:2;left:26px;right:26px;bottom:24px}.card h3{font-family:Georgia,serif;font-size:30px;margin:0 0 8px}.card p{margin:0;color:rgba(255,255,255,.82)} .band{background:linear-gradient(135deg,#063a44,#0c7481 55%,#18a8b5);color:#fff}.values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.value{padding:24px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);border-radius:20px}.value b{display:block;font-size:18px;margin-bottom:8px}.value span{color:rgba(255,255,255,.74);font-size:14px}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}.step{padding:24px;background:#fff;border:1px solid #e4eaec;border-radius:22px}.num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:white;background:linear-gradient(135deg,var(--teal),var(--deep));font-weight:900}.step h3{margin:16px 0 8px}.step p{color:#66777d} .quote{padding-top:0}.quote-box{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px;background:linear-gradient(135deg,#052e36,#0d7481 60%,#18a8b5);padding:38px;border-radius:32px;color:#fff;box-shadow:0 25px 70px rgba(0,58,66,.25)}.quote-box p{color:rgba(255,255,255,.78)}form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px;background:rgba(255,255,255,.97);padding:24px;border-radius:24px;color:var(--ink);min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}label{font-size:12px;font-weight:900}.field{display:grid;gap:7px;min-width:0}.full{grid-column:1/-1}input,select,textarea{padding:13px 14px;border-radius:13px;border:1px solid #d8e2e5;background:#fff;width:100%;max-width:100%;min-width:0;box-sizing:border-box}textarea{min-height:120px;resize:vertical}button{border:0}footer{background:#041e24;color:rgba(255,255,255,.7);padding:32px 0}.foot{display:flex;justify-content:space-between;align-items:center;gap:20px}@media(max-width:880px){.links{display:none}.hero-grid,.quote-box{grid-template-columns:1fr}.hero-art{margin-top:15px}.cards,.values,.process{grid-template-columns:1fr 1fr}}@media(max-width:580px){.cards,.values,.process,form{grid-template-columns:1fr}.full{grid-column:auto}.hero{min-height:980px}section{padding:76px 0}.foot{flex-direction:column;text-align:center}} .hero-signature{margin:12px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:21px;font-style:italic;color:#bff5f6} .heart{padding:82px 0;background:linear-gradient(135deg,#073f49,#0d7f8c 58%,#18a8b5);color:#fff} .heart-inner{max-width:880px;text-align:center} .heart .eyebrow{color:#c9f7f8}.heart h2{max-width:780px;margin:12px auto 20px}.heart p{max-width:760px;margin:0 auto;color:rgba(255,255,255,.82);font-size:18px} .about{padding:92px 0;background:#fff}.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}.about h2{margin-bottom:0}.about p{margin:0 0 18px;color:#66777d;font-size:17px}.about strong{color:#075866} @media(max-width:760px){.about-grid{grid-template-columns:1fr;gap:20px}.heart{padding:66px 0}} /* VERSION 2: PIXIEPRESS LOGO-GRADIENT CONCEPT */ body{position:relative;background: radial-gradient(circle at 12% 18%,rgba(112,225,232,.20),transparent 25%), radial-gradient(circle at 88% 32%,rgba(224,236,239,.72),transparent 27%), linear-gradient(145deg,#fbfaf7 0%,#f2fbfb 42%,#f9fbfc 72%,#eef8f9 100%);background-attachment:fixed} body:after{content:"";position:fixed;z-index:-3;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.92),rgba(220,246,247,.54) 46%,rgba(255,255,255,.88));pointer-events:none} header{background:linear-gradient(90deg,rgba(4,31,37,.92),rgba(5,78,88,.86),rgba(4,31,37,.92));border-bottom:1px solid rgba(173,242,245,.15)} .hero{background: linear-gradient(110deg,rgba(2,24,30,.97) 0%,rgba(3,65,74,.91) 48%,rgba(16,153,166,.76) 100%);isolation:isolate} .hero-grid{grid-template-columns:1fr .84fr}.hero-art{display:none} .hero-grid>div:first-child{max-width:810px} .hero h1{max-width:790px;text-shadow:0 10px 38px rgba(0,0,0,.25)} .heart{position:relative;overflow:hidden;background:linear-gradient(130deg,#063e48,#0b7b88 54%,#20afbb)} .heart-inner{position:relative;z-index:1} section:not(.hero):not(.heart):not(.band):not(.quote){position:relative} .cards .card{border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(5px)} .band{position:relative;overflow:hidden;background:linear-gradient(125deg,#052f38,#0b6d79 49%,#20adb9)} .band .wrap{position:relative;z-index:1} .about{background:rgba(255,255,255,.76);backdrop-filter:blur(12px);border-top:1px solid rgba(7,88,102,.08);border-bottom:1px solid rgba(7,88,102,.08)} .step{background:rgba(255,255,255,.82);backdrop-filter:blur(10px);box-shadow:0 14px 35px rgba(5,71,80,.07)} .quote-box{position:relative;overflow:hidden;background:linear-gradient(125deg,#042b33,#0b707c 56%,#1aa9b5)} .quote-box>div,.quote-box>form{position:relative;z-index:1} .logo img{filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))} @media(max-width:880px){.hero:before{inset:26% -18% 3% 24%;opacity:.13}.hero-grid{grid-template-columns:1fr}.hero{min-height:900px}} @media(max-width:580px){body:before{background-size:115vw;background-position:125% 55%;opacity:.04}.hero:before{inset:35% -38% 8% 12%;opacity:.11}.hero{min-height:920px}} /* PixiePress logo-gradient comparison treatment */ body{position:relative;overflow-x:hidden;background:radial-gradient(circle at 88% 22%,rgba(24,168,181,.16),transparent 27%),radial-gradient(circle at 10% 67%,rgba(157,220,226,.18),transparent 30%),linear-gradient(180deg,#fbfaf7 0%,#f6fbfb 52%,#fbfaf7 100%)} .site-logo-watermark{position:fixed;z-index:0;right:-220px;top:18vh;width:min(980px,88vw);opacity:.12;transform:rotate(-8deg);filter:saturate(1.25) contrast(1.08);pointer-events:none;user-select:none;mix-blend-mode:multiply} main,footer{position:relative;z-index:1} .hero{isolation:isolate} .hero-logo-watermark{position:absolute;z-index:1;right:-120px;top:105px;width:min(760px,68vw);opacity:.34;transform:rotate(-7deg);filter:drop-shadow(0 35px 85px rgba(0,0,0,.3)) saturate(1.25);pointer-events:none;mix-blend-mode:screen} .hero-grid{z-index:3} .heart,.band,.quote-box{position:relative;overflow:hidden;isolation:isolate} .section-logo-watermark{position:absolute;z-index:0;width:560px;opacity:.13;pointer-events:none;filter:saturate(1.2);mix-blend-mode:multiply} .heart .section-logo-watermark{left:-165px;top:-135px;transform:rotate(9deg)} .band .section-logo-watermark{right:-145px;top:-165px;transform:rotate(-10deg);opacity:.16;mix-blend-mode:screen} .quote-box .section-logo-watermark{left:-150px;bottom:-185px;transform:rotate(8deg);opacity:.18;mix-blend-mode:screen} .heart-inner,.band .wrap,.quote-box>*{position:relative;z-index:2} @media(max-width:800px){.site-logo-watermark{right:-250px;width:850px;opacity:.09}.hero-logo-watermark{right:-260px;top:165px;width:760px;opacity:.24}.section-logo-watermark{width:430px}} /* Requested fixes: clean photo placeholders and fully contained inquiry form */ .estimate-button { white-space:nowrap; } #quote .wrap, #quote .quote-box, #quote form, #quote .field { min-width:0; max-width:100%; box-sizing:border-box; } #quote .quote-box { width:100%; overflow:hidden; } #quote form { width:100%; overflow:visible; } #quote input, #quote select, #quote textarea { width:100%; min-width:0; max-width:100%; box-sizing:border-box; } @media (max-width:880px) { #quote .quote-box { grid-template-columns:minmax(0,1fr) !important; padding:28px 20px !important; } #quote form { grid-template-columns:minmax(0,1fr) !important; padding:20px !important; } #quote .full { grid-column:1 !important; } } @media (max-width:580px) { #quote { padding-left:0; padding-right:0; } #quote .wrap { width:min(100% - 24px,1180px); } #quote .quote-box { padding:20px 12px !important; border-radius:22px; } #quote form { padding:16px 12px !important; border-radius:18px; gap:12px; } } /* This sits on the DARK teal panel, not on the light form card. An earlier version coloured these #0d6b78, which is within 1.07:1 of the gradient's mid stop - the phone and email were invisible. Keep them light. */.quote-contact{margin:14px 0 0;font-weight:700}.quote-contact a{color:#fff;text-decoration:underline;text-underline-offset:3px}.quote-contact a:hover{color:#a9eef3}/* Joe's 2026-07-25 feedback round. *//* [1] The quote watermark was DESIGNED absolute (see .quote-box .section-logo-watermark with left/bottom offsets) but the later '.quote-box>*{position:relative;z-index:2}' rule clobbered it back into grid flow, making the img a 632px grid child: copy pushed top-right, form wrapped bottom-left, giant void between. Restore absoluteness (higher specificity beats the >* rule), then stack the box as one centred column per Joe. */.quote-box>.section-logo-watermark{position:absolute;z-index:0}.quote-box{grid-template-columns:minmax(0,1fr);justify-items:center}.quote-box>div{max-width:720px;text-align:center}#quote .quote-box>form{width:min(100%,720px)}/* [5] Step cards: white -> site-toned teal tint. The old .step p grey #66777d measures 4.06:1 on this tint (AA fail) so it darkens to #5f6d73 (4.66:1). */.step{background:linear-gradient(180deg,rgba(240,250,251,.92),rgba(227,242,244,.9));border-color:#c9e5e9}.step p{color:#5f6d73}/* Families card: real product photos (2026-07-25). Three lazy imgs in a grid, object-fit:cover so nothing distorts at any card width. To swap a photo, replace the file in images/ - filenames are load-bearing, see check.mjs. The :before scrim is lifted above .art so the white caption stays legible over bright photos; copy stays at z2. */.card .art{z-index:0}/* The scrim must NEVER intercept the mouse: it sits above the photos (z1), and generated content receives pointer events by default - with it interactive, hover and clicks hit the scrim instead of the gallery links beneath. Caught live by the founder; synthetic-event tests bypassed hit-testing and missed it. */.card:before{z-index:1;pointer-events:none}.card .art{display:grid;grid-template-rows:55% 45%;grid-template-columns:1fr 1fr;gap:2px;background:#052e36}.card .art img{width:100%;height:100%;object-fit:cover;display:block}/* The grid children are the a.pv WRAPPERS, not the imgs - an img is always the first child of its own anchor, so img:first-child matched every photo and the top tile silently stopped spanning (the regression the founder caught live). */.card .art a.pv:first-child{grid-column:1/-1}/* the SZN7 photo is mostly gym wall in its upper half; bias the crop toward the shirts */.card:nth-child(2) .art a.pv:first-child img{object-position:center 62%}.card .art a.pv{display:block;width:100%;height:100%;cursor:pointer}.card .art a.pv:hover img{filter:brightness(1.08)}/* Lightbox-only gallery members: hidden anchors carry href+data-alt, no img, so nothing preloads; the cycle finds them via a.pv. The badge count is hand-maintained - update it when adding or removing pv-more anchors. */.card .art a.pv[hidden]{display:none}.art-more{position:absolute;top:12px;right:12px;z-index:2;pointer-events:none;background:rgba(2,20,25,.72);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.28)}/* captions are plain text; let clicks fall through to the photos beneath */.card-copy{pointer-events:none}#lb{position:fixed;inset:0;z-index:60;background:rgba(2,20,25,.93);display:grid;grid-template-columns:auto 1fr auto;align-items:center;justify-items:center;padding:20px;gap:8px}#lb[hidden]{display:none}#lbi{max-width:min(92vw,1200px);max-height:88vh;object-fit:contain;grid-column:2;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.5)}#lb button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;width:44px;height:44px;font-size:22px;cursor:pointer}#lb button:hover{background:rgba(255,255,255,.25)}#lbx{position:absolute;top:18px;right:18px}@media (max-width:580px){#lb{padding:8px;gap:4px}#lb button{width:38px;height:38px}}.quote-contact .sep{margin:0 10px;opacity:.5}.foot a{color:#fff;text-decoration:underline;text-underline-offset:3px}.foot a:hover{color:#57e4ee}/* .quote-box sets color:#fff for the dark panel; the form sits on a near-white card and inherited it, making every label invisible (white on white). Scope the dark ink to the form only - the panel heading and the CTA keep their own colours. */#quote form label{color:#10282e}.card:nth-child(1) .art{background:url('images/card-families.jpg') center/cover no-repeat,radial-gradient(circle at 55% 28%,rgba(255,255,255,.65),transparent 4%),radial-gradient(circle at 47% 34%,#f4c7a9 0 7%,transparent 8%),radial-gradient(circle at 62% 36%,#d89a72 0 7%,transparent 8%),linear-gradient(135deg,#8cd8de,#0d6f7c)}.card:nth-child(2) .art{background:url('images/card-teams.jpg') center/cover no-repeat,radial-gradient(circle at 35% 32%,#f0be95 0 7%,transparent 8%),radial-gradient(circle at 52% 28%,#b66d4c 0 7%,transparent 8%),radial-gradient(circle at 68% 34%,#f6ccab 0 7%,transparent 8%),linear-gradient(135deg,#74c8d1,#064d58)}.card:nth-child(3) .art{background:url('images/card-schools.jpg') center/cover no-repeat,radial-gradient(circle at 40% 30%,#eab58e 0 7%,transparent 8%),radial-gradient(circle at 58% 35%,#8f543d 0 7%,transparent 8%),linear-gradient(135deg,#b7e4e7,#126f7c)}@media (max-width:580px){.quote-contact .sep{display:none}.quote-contact a{display:block;margin-top:6px}} /* [ADDED: multi-page nav, 2026-08-04] Seven nav items no longer fit the old .links{display:none} breakpoint, which had no fallback because the single page didn't need one - people could just scroll. A real multi-page site needs an actual mobile menu, so this is a CSS-only checkbox toggle: no JS beyond the existing lightbox script, and it isn't added to pages that have no gallery. */ .links{gap:14px;font-size:13px} .nav-burger{display:none} @media(max-width:1100px){ nav{position:relative} .nav-burger{display:block;cursor:pointer;font-size:26px;line-height:1;padding:6px;color:#fff} .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(4,26,31,.98);border-top:1px solid rgba(255,255,255,.12);padding:8px 20px 18px;border-radius:0 0 18px 18px} .links a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)} .links a.cta{margin-top:10px;text-align:center;border-bottom:0} .nav-toggle:checked ~ .links{display:flex} } .links a.current{color:#57e4ee;text-decoration:underline;text-underline-offset:4px} /* [ADDED: Apparel Options grid, 2026-08-04] */ .apparel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:44px} .apparel-grid .step{padding:22px} .apparel-grid .step h3{margin:0 0 8px;font-family:Georgia,serif;font-size:20px} .apparel-grid .step p{margin:0} /* [ADDED: Home teaser cards, 2026-08-04] Home shows one photo per category and links out to Our Work for the full gallery, instead of embedding all the grids + lightbox on the homepage. */ .card.teaser .art{display:block} .card.teaser .art img{width:100%;height:100%;object-fit:cover;display:block} /* [ADDED: partner pages, 2026-08-04] Vogue Athletics' featured-photo layout: one large hero image, two supporting images below it. Both reuse the existing lightbox - the .pv/.art convention is unchanged, just laid out differently than the small 3-up card thumbnails on Our Work. */ .partner-gallery{margin-top:44px} .partner-hero{display:block;border-radius:28px;overflow:hidden;box-shadow:0 20px 55px rgba(5,60,68,.18);margin-bottom:22px;cursor:pointer} /* the corrected card-teams-1.jpg (2026-08-21) has its "Get Your V's Up" mark near the very top; raise max-height and bias the crop upward so it isn't cut off */.partner-hero img{width:100%;height:auto;max-height:720px;object-fit:cover;object-position:center 22%;display:block} .partner-support{display:grid;grid-template-columns:1fr 1fr;gap:22px} .partner-support a{display:block;border-radius:24px;overflow:hidden;box-shadow:0 16px 40px rgba(5,60,68,.16);cursor:pointer} .partner-support img{width:100%;height:320px;object-fit:cover;display:block} @media(max-width:700px){.partner-support{grid-template-columns:1fr}.partner-support img{height:260px}} /* [ADDED: Razzle Dazzle placeholder, 2026-08-04] Tasteful stand-in for a real logo - not a fabricated logo image, just styled text, and openly labelled as a placeholder to visitors. Swap for the real thing once supplied. */ .logo-placeholder{border-radius:28px;min-height:260px;display:grid;place-items:center;background:linear-gradient(135deg,#063a44,#0c7481 55%,#18a8b5);color:#fff;text-align:center;padding:40px;box-shadow:0 20px 55px rgba(5,60,68,.18)} .logo-placeholder .mark{font-family:Georgia,serif;font-size:clamp(30px,5vw,46px);font-style:italic;letter-spacing:.01em} .logo-placeholder small{display:block;margin-top:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:700} /* [ADDED: Spirit Wear page, 2026-08-04] Audience tag pills + preferred-partner spotlight cards linking to Vogue Athletics / Razzle Dazzle. */ .tag-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .tag-list span{padding:8px 16px;border-radius:999px;background:rgba(7,88,102,.08);color:var(--deep);font-weight:800;font-size:13px} .partner-spotlight{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px} .partner-spotlight a{display:block;padding:28px;border-radius:22px;background:#fff;border:1px solid #e4eaec;box-shadow:0 14px 35px rgba(5,71,80,.07)} .partner-spotlight a:hover{border-color:var(--teal)} .partner-spotlight h3{margin:0 0 8px;font-family:Georgia,serif;font-size:22px;color:var(--deep)} .partner-spotlight p{margin:0;color:#66777d} .partner-spotlight .arrow{display:inline-block;margin-top:12px;font-weight:800;color:var(--teal)} @media(max-width:700px){.partner-spotlight{grid-template-columns:1fr}} /* [ADDED: contact bar, 2026-08-04] Thin static strip above the main nav, on every page. It's a second fixed element ABOVE
(which keeps its own nav height unchanged and just shifts down via `top`), so the only other thing this needs is matching extra clearance on
- one rule, not per-page edits. Keep the two numbers (bar height / header top / main padding-top) equal at each breakpoint or content will sit under the bar. */ .contact-bar{position:fixed;z-index:21;inset:0 0 auto;height:34px;background:#03181d;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;font-size:12px;font-weight:700} .contact-bar .wrap{display:flex;align-items:center;justify-content:flex-end;gap:20px} .contact-bar a{color:rgba(255,255,255,.92)} .contact-bar a:hover{color:#57e4ee} .contact-bar .cb-loc{color:rgba(255,255,255,.55);font-weight:600} header{top:34px} main{padding-top:34px} /* [UPDATED: 2026-08-21, larger logo] nav grew 82px -> 112px for the bigger header logo. Because contact-bar height == header `top` == main padding-top at every breakpoint (by the convention above), the fixed contact-bar+header stack always needs exactly `nav height` of additional clearance from whichever section sits first inside
- regardless of breakpoint. That used to fit inside the generic section padding on desktop/tablet (100px) but not after this increase, so this is now a single non-breakpoint-specific rule instead of a mobile-only patch. .hero is excluded - it already has its own padding-top tuned exactly to nav height (see .hero's padding-top above) and must not get this too. */ main>section:first-child:not(.hero){padding-top:132px} @media(max-width:580px){ .contact-bar{height:30px;font-size:11px} .contact-bar .wrap{justify-content:center;gap:14px} .contact-bar .cb-loc{display:none} header{top:30px} main{padding-top:30px} .logo img{height:68px} } /* [ADDED: nav a11y fix, 2026-08-04] The checkbox used to have the `hidden` attribute, which pulls it out of the tab order entirely - keyboard users could never reach it, so the mobile menu was unopenable without a mouse. This is the standard visually-hidden-but-focusable pattern instead: still invisible, still fully keyboard operable (Tab to focus, Space to toggle, same as any checkbox), with a visible focus ring on the burger label so a keyboard user can see where they are. */ .nav-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .nav-toggle:focus-visible + .nav-burger{outline:2px solid #57e4ee;outline-offset:3px;border-radius:6px} /* [ADDED: homepage trust row, 2026-08-04] Compact, glanceable - deliberately NOT another full .band section like [VALUES], which already exists further down the page with fuller descriptions. This is the fast, above-the-fold version for people who never scroll that far. */ .trust-row{background:#fff;border-bottom:1px solid #e4eaec} .trust-row .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 30px;padding:20px 0;font-size:13px;font-weight:800;color:var(--deep)} .trust-row a{color:var(--deep)} .trust-row a:hover{color:var(--teal)} @media(max-width:700px){.trust-row .wrap{gap:8px 16px;font-size:12px;padding:16px 0}} /* [ADDED: reviews, 2026-08-04] Built to hold one card today and scale to a grid of many later without restructuring - it's already a grid, a second card just wraps to a new row. Do not add fabricated review content here; every card must be a real, attributed review. [UPDATED: 2026-08-21, two-card layout] Now holding two real reviews - auto-fit with a 280px minimum already gives two equal-width columns whenever there's room (roomy desktop/laptop, most tablet widths) and collapses to one column itself once the container drops below ~578px, so mobile stacking needs no extra breakpoint rule. .review-card is a flex column so .who (the attribution line) sits pinned to the bottom of every card via margin-top:auto - two reviews of very different lengths still line up their star rating at the top and their attribution at the bottom, without shrinking text or faking equal height. [ADDED: 2026-08-21, section heading] .reviews-intro reuses two patterns that already exist elsewhere on this page rather than inventing a new one: the plain h2 + p.lead pairing from #create ("More than a shirt...") for typography/color, and .heart-inner's text-align:center + margin:auto centering convention (used for the CTA sections) since a testimonial intro reads better centered than left-aligned. No new heading style, font, or decorative element was introduced. */ .reviews-intro{text-align:center;max-width:640px;margin:0 auto} .reviews-intro .lead{margin:0 auto} .reviews{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} .review-card{background:#fff;border:1px solid #e4eaec;border-radius:22px;padding:30px;box-shadow:0 14px 35px rgba(5,71,80,.07);display:flex;flex-direction:column} .review-card .stars{color:#e8a53d;font-size:18px;letter-spacing:2px} .review-card p{margin:14px 0 0;color:#3a474b;font-style:italic;line-height:1.6} .review-card .who{display:block;margin-top:auto;padding-top:18px;font-style:normal;font-weight:800;color:var(--deep);font-size:13px} .reviews-cta{text-align:center;margin-top:28px} .review-link{display:inline-block;font-weight:800;color:var(--teal);text-decoration:underline} /* [ADDED: hero CTA hierarchy, 2026-08-04] Three hero buttons used to share the exact same .cta styling, so nothing signalled which one mattered most. .cta stays the primary (unchanged). .secondary already existed for the middle tier. This is the new third tier - plain text, still a real link, just visually the quietest option. */ .actions a.text-link{background:none;border:0;padding:13px 4px;align-self:center;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px} .actions.center{justify-content:center} .actions a.text-link:hover{color:#bff5f6} /* [ADDED: Get an Estimate trust line, 2026-08-04] Small reference only - the full review lives on Home, not repeated here. */ .quote-rating{margin:10px 0 0;font-weight:800;color:#f0c419;font-size:14px;letter-spacing:.02em} /* [ADDED: legal pages, 2026-08-04] Plain long-form text for privacy.html, terms.html, accessibility.html - readable width, no new components. */ .legal-h1{font-size:clamp(30px,8vw,44px)} .legal-content{max-width:760px} .legal-content .updated{color:#8a9599;font-size:13px;margin:0 0 36px;font-weight:700;text-transform:uppercase;letter-spacing:.04em} .legal-content h2{font-family:Georgia,serif;font-size:26px;margin:44px 0 14px;letter-spacing:-.01em} .legal-content h2:first-of-type{margin-top:0} .legal-content h3{font-size:17px;margin:26px 0 8px;color:var(--deep)} .legal-content p{margin:0 0 16px;color:#3a474b;line-height:1.65} .legal-content ul{margin:0 0 16px;padding-left:22px;color:#3a474b;line-height:1.65} .legal-content li{margin-bottom:6px} .legal-content a{color:var(--deep);font-weight:700;text-decoration:underline} /* [ADDED: footer legal row, 2026-08-04] A second row inside