/* ============================================================ Bearings Collective — bearingscollective.com Theme v2 — matched to the owner's layout mockup (2026-08-07): cream backgrounds, deep sage-green buttons, serif display, left-aligned hero over photo, split text/photo sections, slim footer with policy links. NOTE: bump the ?v= on the stylesheet link in includes/header.php whenever this file changes. ============================================================ */ :root{ /* Logo Master Reference Sheet Ver 1.0 ("The North Star Guide"): Navy #14354D · Teal #2B6B78 · Gold #F7B84F · Dark Blue #1A3E5C (original logo sheet) */ --cream:#f7f4ec; /* page background */ --cream2:#efe9dc; /* alternate band */ --ink:#14354D; /* navy — headings */ --body-c:#4d5764; /* body text */ --mut:#54677a; /* muted text — lightened navy */ --green:#14354D; /* primary buttons — navy */ --green-d:#1A3E5C; /* button hover — dark blue */ --band:#14354D; /* statement band — navy (owner request 2026-08-15; was teal #2B6B78) */ --accent:#2B6B78; /* teal — icons, dials, small accents */ --eyebrow:#2B6B78; /* small-caps labels — teal */ --gold:#F7B84F; /* gold — reserved for small details */ --line:#e3dcca; /* hairlines */ --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; } html{color-scheme:light;-webkit-text-size-adjust:100%;overflow-x:clip} *,*::before,*::after{box-sizing:border-box} body{margin:0;font:400 16.5px/1.75 var(--sans);color:var(--body-c);background:var(--cream)} img{max-width:100%;display:block} h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0 0 20px;line-height:1.16;letter-spacing:-.01em} p{margin:0 0 18px} /* Orphan control, site-wide and automatic — it applies to copy that does not exist yet as much as to today's. text-wrap:pretty tells the browser to pull a word down from an earlier line rather than leave the last line a lone word. Browsers that do not know it ignore the declaration, so there is nothing to fall back to and nothing to maintain per sentence. (2026-09-20: "is." was landing alone on Why We Exist at a 320px viewport — an iPhone with Display Zoom on.) */ h1,h2,h3,h4,p,li,.lead,.trio-line{text-wrap:pretty} strong{color:var(--ink)} a{color:var(--ink)} :focus-visible{outline:2px solid var(--green);outline-offset:3px} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;z-index:200} .skip:focus{left:12px;top:12px} .wrap{max-width:1160px;margin:0 auto;padding:0 28px} .narrow{max-width:700px;margin-left:auto;margin-right:auto} .mid{max-width:880px;margin-left:auto;margin-right:auto} .center{text-align:center} /* ---------- header ---------- */ .site-head{position:sticky;top:0;z-index:50;background:rgba(247,244,236,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .site-head .wrap{max-width:1460px} /* A rule here used to hide .brand-stack between 1021px and 1339px, back when the nav carried a Resources item and the wordmark had nowhere to sit. With Resources hidden the header fits at every width (56px of slack at the 1021px end), so the rule is gone — it was making the wordmark vanish as the window got WIDER. Re-measure before restoring it if a nav item is ever added back. */ .head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)} .brand-img{height:46px;width:auto} /* Desktop: the two lines scale together so the stack matches the 46px logo. One clamp on the stack drives everything — the children size in em, and em tracking scales with them, so the l1/l2 width match survives untouched. stack height = 1.15em (l1) + .2069em (gap) + 1.15 x .5517em (l2) = 1.9914em, so 46px Solved from measurement, not theory: stack height = 1.774F + 3.02, so a 46px stack — the logo's height, and the same height the footer lockup already stands at — needs F = 24.23px. Stack width runs 18.54px per px of F. The lower bound is NOT a preference. At 1021px there are only 52px between the lockup and the nav, and 24.23px would want 157px more, so the header would overflow. 1.548vw is the largest that still leaves ~24px of air there; the stack eases down instead. Consequence worth knowing: the stack equals the logo from 1565px up, and is as large as the header allows below that. */ .brand-stack{display:flex;flex-direction:column;line-height:1.15;font-size:clamp(14.5px,1.548vw,24.23px);height:46px;justify-content:space-between} /* Tracked out so the name matches the tagline width beneath it, as in the footer (2026-09-20). */ .brand-l1{font-family:var(--serif);font-weight:500;font-size:1em;letter-spacing:.1657em;text-transform:uppercase;color:var(--ink);white-space:nowrap} .brand-l2{font-family:'Open Sans',var(--sans);font-weight:600;font-size:.5517em;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:0;white-space:nowrap} .head-right{display:flex;align-items:center;gap:28px} .nav{display:flex;gap:20px;align-items:center} .nl{font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .15s} .nl:hover{border-bottom-color:var(--ink)} .nl.on{border-bottom-color:var(--accent)} .nl-static{cursor:default} .nav-item{position:relative;display:flex;align-items:center;gap:5px} .sub-toggle{display:none;background:none;border:0;padding:6px 4px;cursor:pointer;color:var(--mut)} .sub-toggle svg{width:11px;height:8px;display:block;transition:transform .18s} .drop{position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,6px);background:var(--cream);border:1px solid var(--line);box-shadow:0 16px 34px rgba(47,46,39,.14);padding:12px 0;min-width:218px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:60} .drop::before{content:"";position:absolute;top:-17px;left:0;right:0;height:17px} .drop a{display:block;padding:9px 24px;font-size:13.5px;color:var(--body-c);text-decoration:none;letter-spacing:.02em;white-space:nowrap} .drop a:hover{color:var(--ink);background:var(--cream2)} @media (min-width:1021px){ .nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;pointer-events:auto;transform:translate(-50%,0)} } /* Narrow desktop: the wordmark is now as wide as the tagline, so tighten the nav spacing here to keep clear air between the lockup and HOME (~23px -> ~59px at 1021px). Everything from 1180px up keeps the roomier default gaps. */ @media (min-width:1021px) and (max-width:1179px){ .head-right{gap:18px} .nav{gap:14px} } [id]{scroll-margin-top:94px} .btn-nav{background:var(--green);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:14px 16px;text-decoration:none;border-radius:2px;white-space:nowrap;transition:background .15s} .btn-nav:hover{background:var(--green-d)} .nav .btn-nav{margin-left:8px} .nav-btn{display:none;background:none;border:0;padding:10px 0 10px 10px;cursor:pointer} .nav-btn span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .2s,opacity .2s} .nav-btn .nav-btn-t{position:absolute;left:-9999px} .nav-open .nav-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav-open .nav-btn span:nth-child(2){opacity:0} .nav-open .nav-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* ---------- buttons ---------- */ .btn{display:inline-block;background:var(--green);color:#fff;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:17px 30px;text-decoration:none;border-radius:2px;transition:background .15s;text-align:center} .btn:hover{background:var(--green-d)} .btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink)} .btn-outline:hover{background:var(--ink);color:var(--cream)} .btn-light{background:#fff;color:var(--ink)} .btn-light:hover{background:var(--cream);color:var(--ink)} .eyebrow{display:block;font:600 11.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--eyebrow);margin:0 0 18px} .lead{font-size:clamp(16.5px,1.9vw,19px);line-height:1.72;color:var(--body-c)} /* ---------- home hero ---------- */ /* Hero: sketched illustration, not a photo — no scrim, no cropping. Text and art share a two-column grid so the headline never sits on top of the bears (2026-09-20). */ .hero2{position:relative;min-height:min(58vh,560px);display:flex;align-items:center;overflow:hidden;background:var(--cream)} /* The hero gets a wider wrap than the body sections so the illustration keeps growing with the window instead of stalling at 1160px while the headline carried on. Art and headline now stop growing at the same width: 1340px wrap, h1 capped at 4.6vw of it. */ .hero2 .wrap{max-width:1340px} .hero2-in{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(18px,3.2vw,48px);align-items:center} .hero2-art{min-width:0} .hero2-art img{display:block;width:100%;height:auto} .hero2-txt{max-width:640px;padding:clamp(48px,7.5vh,92px) 0} .hero2-txt h1{font-size:clamp(40px,4.6vw,62px);line-height:1.05;margin-bottom:24px} .hero2-txt .lead{max-width:400px;margin-bottom:36px} .hero2-txt .hero2-services{max-width:none;white-space:nowrap;font-size:clamp(15px,1.45vw,19px)} @media (max-width:640px){.hero2-txt .hero2-services{white-space:normal;font-size:16px}} .hero2-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center} /* ---------- quote band ---------- */ .quoteband{background:var(--cream2);padding:clamp(44px,5.2vw,62px) 0;text-align:center} .quoteband p.q{font-family:var(--serif);font-size:clamp(20px,2.6vw,27px);line-height:1.5;color:var(--ink);max-width:760px;margin:0 auto} .orn{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px;color:var(--accent)} .orn::before,.orn::after{content:"";width:56px;height:1px;background:var(--line)} .orn svg{width:18px;height:18px} /* ---------- pillar trio ---------- */ .trio3{display:grid;grid-template-columns:repeat(3,1fr)} .trio-it{padding:10px 34px;text-align:center} .trio-it + .trio-it{border-left:1px solid var(--line)} .trio-it svg{width:46px;height:46px;margin:0 auto 18px;color:var(--accent)} .trio-it h3{font:600 12.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink);margin:0 0 10px} .trio-it p{font-size:15px;color:var(--body-c);margin:0} /* ---------- split feature (page heroes) ---------- */ .feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);min-height:min(66vh,640px);border-bottom:1px solid var(--line)} .feature-txt{display:flex;align-items:center;padding:clamp(48px,7vh,90px) clamp(28px,4vw,64px)} .feature-txt-in{max-width:460px;margin-left:auto;margin-right:8px} .feature h1{font-size:clamp(34px,4.2vw,52px);line-height:1.08} .feature .lead{margin-bottom:32px} /* The serving line leads the split hero, the way it leads the home hero. */ .feature-txt-in .serving{margin:0 0 14px} .feature-img{position:relative;min-height:340px} .feature-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .feature-flip .feature-img{order:-1} /* Split hero with no image: one centred column instead of a half-empty grid. */ /* min-height on .feature exists to give the PHOTO panel height. With no photo it just padded the text out: at 1280px the copy is 203px tall in a 360px box, so flex-centring left 15px of slack, the lead's 32px bottom margin had nothing to separate it from, and .sec added 66px on top of that — 177px of dead air between the lead and the body copy. Height now comes from the copy plus its own padding, balanced either side of the hairline rule. */ .feature-solo{grid-template-columns:1fr;min-height:0} .feature-solo .feature-txt{padding:clamp(44px,6.2vh,76px) 28px clamp(34px,4.4vh,50px)} .feature-solo .feature-txt-in{max-width:760px;margin:0 auto;text-align:center} .feature-solo .lead{margin-bottom:0} .lead-line{display:block} .feature-solo + .sec{padding-top:clamp(34px,4vw,50px)} /* Illustration panels (contact): contain the plate on cream, never crop it. */ .feature-art{background:var(--cream);min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(18px,2.6vw,40px)} .feature-art img{position:static;width:100%;height:auto;object-fit:contain} /* contact detail rows */ .crow{display:flex;gap:13px;align-items:flex-start;margin-top:14px} .crow svg{width:19px;height:19px;color:var(--accent);flex:0 0 auto;margin-top:4px} .crow p{margin:0;font-size:15.5px} .crow a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px} /* ---------- sections ---------- */ .sec{padding:clamp(46px,5.4vw,66px) 0} .sec-sand{background:var(--cream2)} /* A change of background does the separating work, so a sand band needs less padding above it than two same-coloured sections meeting (2026-09-20). */ .sec-sand{padding-top:clamp(32px,3.8vw,46px)} .sec-head{margin-bottom:clamp(26px,3.4vw,38px)} .sec-head h2{font-size:clamp(27px,3.4vw,40px);margin-bottom:0} .sec-head .lead{margin:20px auto 0;max-width:760px} .sec-green{position:relative;overflow:hidden;background:var(--band);color:#ccd8e4} .sec-green h2{color:#fff} .green-h{font-size:clamp(32px,4.4vw,50px);margin-bottom:18px} .trio-line{font:500 13.5px/1.9 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#eaf1f2;margin-bottom:14px} .tagline{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,20px);color:#e4cf9b;margin:0} /* With the tagline removed from a band, .trio-line ends it and its 14px bottom margin becomes an orphan inside the band padding. */ .bandin .trio-line:last-child{margin-bottom:0} .watermark{position:absolute;right:-90px;bottom:-110px;width:400px;height:400px;color:#fff;opacity:.06;pointer-events:none} .bandin{position:relative;z-index:1} .quote{font-family:var(--serif);font-size:clamp(22px,2.9vw,31px);line-height:1.45;color:#fff;max-width:860px;margin:0 auto} /* ---------- stanza ---------- */ .stanza p{font-family:var(--serif);font-size:clamp(18px,2.3vw,23px);line-height:1.55;color:var(--ink);margin:0 0 13px} .stanza-strong{font-weight:600;margin-top:24px !important} .stanza-em p{font-style:italic} /* ---------- definition rows ---------- */ .vlist{border-bottom:1px solid var(--line)} .vrow{display:grid;grid-template-columns:minmax(230px,330px) 1fr;gap:16px 44px;padding:32px 0;border-top:1px solid var(--line)} .vrow h3{font-size:22px;margin:0;line-height:1.3} .vrow div p{margin-bottom:12px} .vrow div p:last-child{margin-bottom:0} .lead-in{font-size:clamp(22px,2.6vw,28px);margin-bottom:34px} /* ---------- pillars (deep dives) ---------- */ .pillar{padding:clamp(40px,4.8vw,58px) 0} .pillar h2{font-size:clamp(23px,3vw,32px);line-height:1.3} .pillar-claim{font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);color:var(--ink);line-height:1.5} .how{background:var(--cream);border:1px solid var(--line);padding:32px 38px;margin-top:36px} .pillar-white .how,.sec .how{background:var(--cream2);border-color:var(--line)} .sec-sand .how{background:var(--cream)} .how h3{font:600 12.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:16px} .how ul{list-style:none;margin:0;padding:0} .how li{position:relative;padding:6px 0 6px 26px;font-size:15.5px} .how li::before{content:"\203A";position:absolute;left:2px;top:3px;color:var(--accent);font-weight:600} /* ---------- approach principles ---------- */ .prin-list{border-bottom:1px solid var(--line)} .prin{display:grid;grid-template-columns:68px 1fr;gap:26px;padding:36px 0;border-top:1px solid var(--line)} .prin-num{font-family:var(--serif);font-size:28px;color:var(--accent);line-height:1.1} .prin h2,.prin h3{font-size:23px;margin-bottom:12px} .prin p{margin-bottom:12px} .prin p:last-child{margin-bottom:0} /* ---------- 4-up dial grid ---------- */ .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:38px} .help-it{border-top:1px solid var(--line);padding-top:22px} .pt-ico{width:34px;height:34px;display:block;margin:0 auto;color:var(--accent)} .help-it h3{font-size:19.5px;margin:12px 0 8px;text-align:center} .help-it p{font-size:14.5px;line-height:1.65;margin:0;text-align:center} /* ---------- checklist ---------- */ .fit{background:var(--cream);border:1px solid var(--line);padding:clamp(30px,4.5vw,50px);max-width:820px;margin:0 auto} .fit h2{font-size:clamp(23px,2.9vw,30px)} .checks{list-style:none;margin:22px 0 0;padding:0} .checks li{position:relative;padding:8px 0 8px 32px;font-size:16.5px;color:var(--ink)} .checks li::before{content:"\2713";position:absolute;left:0;top:8px;color:var(--accent);font-weight:700} /* ---------- about editorial ---------- */ /* Why We Exist story: the tall-pine illustration runs down the LEFT for the full height of the copy (owner request 2026-09-20). align-items:stretch makes .story-art as tall as the text cell and object-fit:cover fills it, so the copy sets the height and the picture follows rather than the other way round. The text cell is capped at 700px so the reading measure does not widen just because the grid did. */ .story-grid{display:grid;grid-template-columns:clamp(170px,26vw,300px) minmax(0,700px);gap:clamp(22px,3.4vw,52px);align-items:stretch;justify-content:center;max-width:1080px} .story-art{position:relative;min-height:0} .story-art img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} .alone{border-left:2px solid var(--accent);padding:6px 0 6px 28px;margin:34px 0} .alone p{font-family:var(--serif);font-style:italic;font-size:18.5px;line-height:1.6;color:var(--ink);margin-bottom:13px} .alone p:last-child{margin-bottom:0} /* ---------- team ---------- */ .team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,290px));gap:24px;justify-content:center} .tcard{background:var(--cream);border:1px solid var(--line);padding:44px 36px;max-width:380px;margin:0 auto;text-align:center} .avatar{width:118px;height:118px;border-radius:50%;background:var(--cream2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;color:var(--mut);overflow:hidden} .avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;border-radius:50%} .avatar img.zoom{transform:scale(1.18);transform-origin:50% 32%} .tcard h3{font-size:23px;margin-bottom:4px} /* credentials line on the team cards (owner request 2026-09-24): quiet, navy, between the name and the Co-Founder label. .tcard .tcred outranks .tcard p, which would otherwise size/colour it. */ .tcard .tcred{font:500 14.5px/1.35 var(--sans);letter-spacing:.02em;color:var(--ink);margin:0 0 10px} .trole{font:600 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:14px} .tcard p{font-size:14.5px;color:var(--mut);margin:0} .bio-link{font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:3px} .bio-link:hover{color:var(--ink);border-bottom-color:var(--ink)} /* ---------- bio pages ---------- */ .bio-hero{padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,64px);text-align:center} .bio-avatar{width:190px;height:190px;border-radius:50%;overflow:hidden;margin:0 auto 30px;border:1px solid var(--line);background:var(--cream2)} .bio-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 35%} .bio-avatar img.zoom{transform:scale(1.18);transform-origin:50% 32%} .bio-hero h1{font-size:clamp(34px,4.4vw,50px);margin-bottom:10px} /* ---------- resources cards ---------- */ .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:0 auto} .rcard{background:var(--cream);border:1px solid var(--line);padding:38px 30px;text-align:center} .rcard svg{width:40px;height:40px;margin:0 auto 16px;color:var(--accent)} .rcard h3{font-size:21px;margin-bottom:10px} .rcard p{font-size:14.5px;margin-bottom:16px} .soon{display:inline-block;font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--eyebrow);border:1px solid var(--line);padding:8px 14px;border-radius:20px} /* ---------- contact steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:clamp(32px,4.5vw,52px)} .step-num{font-family:var(--serif);font-size:28px;color:var(--accent);margin-bottom:10px} .steps h3{font-size:20px;margin-bottom:10px} .steps p{font-size:14.5px;line-height:1.7;margin:0} /* ---------- band photos ---------- */ .band{margin:0;height:min(52vh,480px);overflow:hidden} .band img{width:100%;height:100%;object-fit:cover} .band-short{height:min(40vh,380px)} /* ---------- footer ---------- */ .site-foot{background:var(--band)} .foot-in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px 28px 30px;max-width:1160px;margin:0 auto} .foot-brand{display:flex;flex-direction:column;line-height:1.3} /* Sized and tracked so the name matches the tagline width below it (2026-09-20). */ /* Sized so the name matches the width of the tagline below it. The tracking stays at .193em — the same texture as before — and the size does the matching: at 25.51px, "Find Your Bearings" plus 18 x .193em of tracking lands on the tagline's 374.39px. Tracking alone would have needed about .66em, which reads as stretched. ⚠️ This size is solved for THIS string. Change the wording and it has to be re-solved: measure width-per-px of font-size, then size = 374.39 / that. */ .foot-l1{font-family:var(--serif);font-weight:500;font-size:25.51px;letter-spacing:.193em;text-transform:uppercase;color:#fff;white-space:nowrap} .foot-l2{font-family:'Open Sans',var(--sans);font-weight:600;font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:#e4cf9b;margin-top:3px} .foot-legal{display:flex;justify-content:center;gap:28px;padding:0 24px 18px} .foot-legal a{font-size:13.5px;color:rgba(255,255,255,.85);text-decoration:none} .foot-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .foot-social{display:flex;gap:16px;align-items:center} .foot-social a.foot-stepup{display:flex;align-items:center;gap:11px;text-decoration:none;color:rgba(255,255,255,.9);margin-right:14px} .foot-stepup:hover .stepup-cap{color:#fff} .foot-stepup img{height:60px;width:auto;display:block} .stepup-cap{font-size:12.5px;line-height:1.5;letter-spacing:.01em} .stepup-cap em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.6)} .foot-social a{color:var(--body-c);display:block} .foot-social a:hover{color:var(--ink)} .foot-social svg{width:46px;height:46px} .foot-base{border-top:1px solid rgba(255,255,255,.16);padding:16px 28px} .foot-base p{font-size:12px;color:rgba(255,255,255,.65);margin:0;text-align:center;letter-spacing:.04em} /* ---------- responsive ---------- */ @media (max-width:1020px){ .nav-btn{display:block;position:relative} .nav{position:fixed;top:78px;left:0;right:0;max-height:calc(100vh - 78px);overflow-y:auto;background:var(--cream);flex-direction:column;gap:0;padding:6px 28px 26px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(47,46,39,.08);transform:translateY(-10px);opacity:0;pointer-events:none;transition:transform .18s,opacity .18s;align-items:stretch} .nav-open .nav{transform:none;opacity:1;pointer-events:auto} .nav-item{flex-wrap:wrap;justify-content:space-between;border-bottom:1px solid var(--line)} .nl{font-size:14px;padding:15px 0;border-bottom:none;flex:1} .nl.on{color:var(--accent)} .sub-toggle{display:block;padding:14px 6px} .sub-toggle svg{width:13px;height:9px} .nav-item.open .sub-toggle svg{transform:rotate(180deg)} .drop{position:static;transform:none;opacity:1;pointer-events:auto;display:none;box-shadow:none;border:0;background:transparent;padding:0 0 14px;min-width:0;flex-basis:100%} .nav-item.open .drop{display:block} .drop::before{display:none} .drop a{padding:8px 0 8px 18px;font-size:13.5px;white-space:normal} /* the portal button rides inside the mobile menu panel (owner 2026-09-10) */ .btn-nav{display:block;width:100%;margin:18px 0 6px;padding:17px 16px;text-align:center;font-size:12px;letter-spacing:.16em} .grid4{grid-template-columns:1fr 1fr;gap:30px} } @media (max-width:860px){ .feature{grid-template-columns:1fr;min-height:0} .feature-img{order:2;min-height:300px;position:relative} .feature-img img{position:absolute} .feature-art{min-height:0;padding:0 28px 30px} .feature-art img{position:static} /* phones: the tree is desktop-only (owner request 2026-09-20). This artwork is 1:3.5 — at any width worth seeing it is ~450px tall, which is most of a phone screen for a decorative element, so it is dropped rather than shrunk. */ .story-grid{grid-template-columns:1fr;gap:0} .story-art{display:none} .feature-flip .feature-img{order:2} .feature-txt{padding:clamp(44px,7vw,64px) 28px} .feature-txt-in{max-width:640px;margin:0 auto} .trio3{grid-template-columns:1fr;max-width:420px;margin:0 auto} .trio-it{padding:26px 10px} .trio-it + .trio-it{border-left:0;border-top:1px solid var(--line)} .steps{grid-template-columns:1fr;gap:28px} .rgrid{grid-template-columns:1fr;max-width:460px} } @media (max-width:640px){ /* mobile header fit (iPhone QA 2026-09-10): brand must fit even in the Georgia fallback font, and can NEVER collide with the hamburger — it shrinks and ellipsizes instead */ .head-in{height:64px;gap:10px} .head-right{gap:10px;flex:0 0 auto} .brand{flex:1 1 auto;min-width:0;overflow:hidden;gap:9px} .brand-img{height:32px} .brand-stack{min-width:0;overflow:hidden;font-size:11px;height:auto;justify-content:flex-start} /* Name sits LEFT, tight to the logo, always on two lines - "The Bearings" over "Collective" (owner, 2026-09-27). The 150px cap is what forces the break after "Bearings": the full name needs ~175px at this size, the first two words ~85px. */ .brand-l1{font-size:11px;letter-spacing:.06em;white-space:normal;line-height:1.3;overflow:visible;max-width:150px;text-align:left} /* Phones: the tagline will not fit beside the logo — it needs 265px and there are only 184px between the logo and the hamburger. So it drops below the bar, where it gets the full width. Absolutely positioned against .head-in, which is OUTSIDE .brand, so .brand's overflow:hidden does not clip it. Tracking eases .12em -> .10em to clear 320px on one line. Still one element and one string — nothing is duplicated. */ /* .head-in IS the .wrap (one element, both classes) and carries height:64px. With box-sizing:border-box a padding-bottom would be swallowed by that height, so the tagline fell outside the header. Height goes auto with min-height 79 = the 64px logo row + 15px of room, and the tagline anchors to the BOTTOM of that padding. */ /* Gap from the logo down to the tagline works out as min-height/2 + padding/2 - 27. It was 79 and 15 -> 20px, which read as a gap rather than a lockup. 64 and 8 gives 9px, and the header comes down from 80px to 65px with the logo keeping 12px of air above it. */ .head-in{position:relative;height:auto;min-height:64px;padding-bottom:8px} .brand-l2{display:block;position:absolute;left:28px;right:0;bottom:2px;margin:0; text-align:left;font-size:8px;letter-spacing:.10em} /* left, flush with the logo (owner, 2026-09-27) */ .nav{top:65px;max-height:calc(100vh - 65px)} [id]{scroll-margin-top:79px} /* phones: stack the hero — serving line, then text, then the illustration beneath it. Serving line is IN-FLOW here so it can never overlap the headline at any text size. */ .hero2{display:flex;flex-direction:column;min-height:0} .hero2 .serving-wrap{position:static;order:1;padding-top:26px} .hero2 .serving{font-size:13.5px} .hero2-in{order:2;grid-template-columns:1fr;gap:0} .hero2-txt{padding:10px 0 22px} /* Phones only: the serving line, the headline and the tagline centre (tagline added 2026-09-27, owner request); the button is already a full-width block. */ .hero2 .serving{text-align:center} .hero2-txt h1{text-align:center} .hero2-txt .hero2-services{text-align:center;margin-left:auto;margin-right:auto} .hero2-cta{justify-content:center} /* the Schedule button too (owner, 2026-09-27) */ .hero2-art{margin-bottom:8px} .vrow{grid-template-columns:1fr;gap:10px;padding:26px 0} .team-grid{grid-template-columns:minmax(0,320px)} .prin{grid-template-columns:46px 1fr;gap:16px} .prin-num{font-size:23px} .grid4{grid-template-columns:1fr} .foot-in{flex-direction:column;gap:18px;text-align:center} .foot-brand{align-items:center} /* Phones: 24.65px makes the nowrap first line 374px, wider than the 319px available, which would push the page sideways. The tagline wraps down here anyway, so there is no width to match — back to 16px. */ .foot-l1{font-size:16px} .band{height:min(40vh,340px)} .band-short{height:min(32vh,280px)} } /* ---------- who-we-help paw trail (side-scroll journey) ---------- */ .trail-head{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:880px;margin:0 auto} .trail-head .lead-in{margin-bottom:0} .trail-hint{width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;background:none;color:var(--ink);font:400 19px/1 var(--sans);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s} .trail-hint:hover{background:var(--ink);color:var(--cream)} /* Swiping has to land where the arrows land. Without snap a free swipe could stop between two cards, or out in the end padding that exists so the first and last card can be centred — which read as "swiped into nothing" (owner, 2026-09-20). scroll-snap-stop:always also means one swipe moves exactly one card, like one arrow press. */ .trail{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;margin:26px -24px 0;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;scroll-snap-type:x mandatory} .trail-track{display:flex;position:relative;width:max-content;padding:26px max(24px,calc(50% - min(260px,43vw))) 0} .trail-wave{position:absolute;top:0;left:0;height:120px;color:var(--ink);pointer-events:none} .stop{flex:0 0 min(520px,86vw);position:relative;padding:0 34px;scroll-snap-align:center;scroll-snap-stop:always} .stop-paw{position:relative;z-index:1;width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px} .stop-paw img{width:100%;height:100%;display:block} .stop h3{font-size:22px;line-height:1.3;margin:0 0 12px;text-align:center} .stop p{font-size:15px;line-height:1.7;margin-bottom:10px} .stop p:last-child{margin-bottom:0} @media (prefers-reduced-motion:reduce){ .trail-wave path{transition:none !important} } /* ---------- home: service cards (owner request 2026-09-27) ---------- Layout after screenshots/cards.PNG: pastel icon circle beside a serif title, a short lead, the list, and "Learn More" pinned to the bottom so the links line up across a row. 4 across on wide screens, 2 across below 1060px - including phones (owner asked for 2 across on mobile), where the icon sits above the title and the type steps down so a 10-item list still fits a half-width card. */ .svc-cards-sec{padding-top:clamp(40px,5vw,60px)} .svc-cards-head{margin-bottom:clamp(20px,2.8vw,30px)} .svc-cards-head .eyebrow{margin:0} /* an h2 for the outline, sized as the small label (not .sec-head, whose h2 rule is 40px) */ .svc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0} .svc-card{display:flex;flex-direction:column;min-width:0;background:#fffdf9;border:1px solid var(--line);border-radius:10px;padding:24px 22px 22px;box-shadow:0 1px 2px rgba(20,53,77,.04),0 10px 26px -20px rgba(20,53,77,.28)} .svc-card-top{display:flex;align-items:center;gap:14px;margin-bottom:16px} .svc-ico{flex:0 0 auto;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center} .svc-ico svg{width:27px;height:27px;display:block} .svc-ico-sage{background:#e4ece3;color:#557460} .svc-ico-blue{background:#e1ebf1;color:#3b6881} .svc-ico-peach{background:#f5e7da;color:#96603f} .svc-ico-lilac{background:#ece2ea;color:#74536e} .svc-card h3{font-size:21px;line-height:1.2;margin:0;min-width:0} .svc-card-lead{font-size:15px;line-height:1.5;color:var(--body-c);margin:0 0 12px} /* The fold: a
around each list. Above 640px it is always open and its summary is hidden, so desktop and tablet look exactly as before. On phones the script in footer.php closes it on load and the summary becomes a "See what's included" toggle - the list stays in the page either way. */ .svc-more{display:block} .svc-more>summary{display:none} .svc-card-list{list-style:none;margin:0 0 20px;padding:0} .svc-card-list li{position:relative;padding-left:15px;margin:0 0 6px;font-size:14.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere} .svc-card-list li::before{content:'';position:absolute;left:1px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--accent)} .svc-card-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:600 14.5px/1.2 var(--sans);color:var(--accent);text-decoration:none} .svc-card-link:hover{color:var(--ink)} .svc-card-link span[aria-hidden]{transition:transform .15s} .svc-card-link:hover span[aria-hidden]{transform:translateX(3px)} @media (max-width:1060px){.svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){ .svc-cards-sec .wrap{padding:0 16px} .svc-cards{gap:10px} .svc-card{padding:16px 13px;border-radius:8px} /* stretch, not flex-start: the title must be exactly as wide as the card, or the footer's orphan guard (which glues the last two words with a no-break space and undoes it only when the element overflows) can't see that "Educational Consulting" no longer fits - it clipped. */ .svc-card-top{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:10px} .svc-ico{width:42px;height:42px} .svc-ico svg{width:21px;height:21px} .svc-card h3{font-size:17px;line-height:1.22} .svc-card-lead{font-size:13px;line-height:1.45;margin-bottom:8px} .svc-card-list{margin-bottom:14px} .svc-card-list li{font-size:13px;line-height:1.4;padding-left:11px;margin-bottom:5px;-webkit-hyphens:auto;hyphens:auto} /* half-width cards: let long terms break cleanly */ .svc-card-list li::before{width:4px;height:4px;left:0;top:.58em} .svc-card-link{font-size:13px;gap:6px} .svc-more>summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font:600 12.5px/1.3 var(--sans);color:var(--accent);padding:2px 0 12px} .svc-more>summary::-webkit-details-marker{display:none} .svc-more>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px} .svc-more-hide{display:none} .svc-more[open] .svc-more-hide{display:inline} .svc-more[open] .svc-more-show{display:none} .svc-more-chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s} .svc-more[open] .svc-more-chev{transform:translateY(1px) rotate(-135deg)} .svc-more[open]>summary{padding-bottom:10px} } @media (prefers-reduced-motion:reduce){.svc-more-chev{transition:none}} @media (max-width:360px){.svc-card{padding:15px 11px}} /* 320px phones: a few px more for 15-letter words */ @media (prefers-reduced-motion:reduce){.svc-card-link span[aria-hidden]{transition:none}} /* ---------- FAQs page (owner request 2026-09-27) ---------- Native
: the question is the (an h2 inside it keeps the page outline), the round plus turns into a minus when open. No script needed; keyboard and screen readers work out of the box. */ .faq-list{max-width:780px;margin:0 auto} .faq{border-bottom:1px solid var(--line)} .faq:first-child{border-top:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 2px} .faq summary::-webkit-details-marker{display:none} .faq summary h2{font-size:clamp(19px,2.2vw,23px);line-height:1.3;margin:0;min-width:0} .faq summary:hover h2{color:var(--accent)} .faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px} .faq-icon{flex:0 0 auto;position:relative;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%} .faq-icon::before,.faq-icon::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .2s} .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)} .faq[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(0deg)} .faq-a{padding:0 2px 24px} .faq-a p{margin:0;max-width:700px} @media (max-width:640px){ .faq summary{padding:18px 0;gap:14px} .faq-icon{width:26px;height:26px} .faq-icon::before,.faq-icon::after{width:10px} .faq-a{padding:0 0 20px} } @media (prefers-reduced-motion:reduce){.faq-icon::before,.faq-icon::after{transition:none}} /* ---------- contact form ---------- */ .cform{max-width:640px;margin:0 auto} .cform label{display:block;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:22px 0 8px} .cform .req{color:var(--accent)} .cform .opt{color:var(--mut);text-transform:none;letter-spacing:.02em;font-weight:400} .cform input,.cform textarea,.cform select{width:100%;padding:14px 16px;font:400 16px/1.5 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px} .cform input:focus,.cform textarea:focus,.cform select:focus{outline:2px solid var(--ink);outline-offset:1px} .cform select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2314354D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px} .cform-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .checks-inline{display:flex;flex-wrap:wrap;gap:10px 26px;padding:4px 2px} .cbox{display:flex;align-items:center;gap:9px;font:400 15.5px/1.4 var(--sans);color:var(--body-c);text-transform:none;letter-spacing:0;margin:0;cursor:pointer} .cbox input{width:17px;height:17px;padding:0;accent-color:var(--ink);cursor:pointer} @media (max-width:560px){.cform-row{grid-template-columns:1fr}} /* ---------- "Leading The Conversation" article list ---------- */ .convo-wide{max-width:none;padding:0 clamp(24px,3.5vw,56px)} .convo-grid{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:40px 72px;align-items:start} .dx-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px 80px;align-items:start} .convo-small{font-size:clamp(17px,1.8vw,21px);line-height:1.2;margin:0 0 18px} .dx-main{padding-top:6px} .dx-main h1{font-size:clamp(34px,4vw,50px);margin:14px 0 18px} .dx-main .lead{margin:0} @media (max-width:820px){ .dx-grid{grid-template-columns:1fr;gap:44px} .dx-main{order:-1} } .convo-head h2{font-size:clamp(30px,3.8vw,46px);line-height:1.1;margin:0} .convo-list{border-top:1px solid var(--line)} .convo-it{display:block;position:relative;padding:18px 48px 18px 0;border-bottom:1px solid var(--line);text-decoration:none} .convo-src{display:block;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:9px} .convo-title{font-family:var(--serif);font-size:clamp(15px,1.55vw,17px);color:var(--ink);line-height:1.4} .convo-it:hover .convo-title{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px} .convo-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:20px;transition:transform .15s} .convo-it:hover .convo-arrow{transform:translate(5px,-50%)} @media (max-width:760px){.convo-grid{grid-template-columns:1fr;gap:22px}} .cform textarea{min-height:150px;resize:vertical} /* Services of Interest — a checkbox group styled to sit with the text inputs. The fieldset resets are needed because browsers give fieldset/legend their own borders, padding and font. */ .cform-set{border:0;margin:22px 0 0;padding:0;min-width:0} .cform-set legend{display:block;padding:0;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 12px} /* .cbox IS a