/* Get It Together, Denver — business homepage mockup.
   Four colours (home/style-guide/business): the Blend is the ground, white bands carry the content. */
@font-face{font-family:Barlow;src:url(assets/barlow.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/barlow-heavy.ttf);font-weight:800 900;font-display:swap}
:root{
  --pink:#ff5293; --coral:#fd6558; --white:#fff; --dark:#23252b;
  --bin-ink:#fe8692;
  --binmask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.46%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%276%27%20width%3D%2722%27%20height%3D%2720%27%20rx%3D%273%27/%3E%3Cpath%20d%3D%27M16%206v7%27/%3E%3C/g%3E%3C/svg%3E"); /* bins and icons: solid, never transparent (Phil 22:52) */
  --blend:linear-gradient(160deg,var(--pink) 0%,var(--coral) 100%);
  --blend-h:linear-gradient(90deg,var(--pink),var(--coral));
  --soft:rgba(35,37,43,.7); --line:rgba(35,37,43,.14);
  --sans:Barlow,Arial,sans-serif;
  --bin:13px; --control:12px; --tag:6px;
  --head:92px; --size:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;color:var(--dark);font:400 18px/1.55 var(--sans);background:var(--coral)}
img{max-width:100%;display:block}
a{color:inherit}

/* the ground: one Blend behind the whole page, never scrolling */
.sky{position:fixed;inset:0;background:var(--blend);z-index:0}

/* the lattice lives in the page, and so does everything on it: boxed or loose, each thing sits on the shelf in page coordinates */
main{position:relative;padding-top:calc(var(--head) + env(safe-area-inset-top, 0px))}
.wall{position:absolute;left:0;right:0;top:calc(var(--head) + env(safe-area-inset-top, 0px));bottom:0;overflow:hidden;pointer-events:none}
/* each colour block draws its own lattice from its own top edge */
/* each colour block gets its own paint layer on the wall (business.js): a fresh pink-to-coral blend plus its own lattice,
   under the icons, so every block starts pink and ends coral (Phil, 09:56) */
.paint{position:absolute;left:0;right:0;background-image:var(--binsvg),var(--blend);background-size:var(--cell) var(--cell),100% 100%;background-position:var(--gx) 0,0 0;background-repeat:repeat,no-repeat}
.shelf{position:absolute;inset:0}
.item{position:absolute;left:0;top:0;width:var(--size);height:var(--size);color:var(--bin-ink);will-change:transform}
.item svg{width:100%;height:100%;display:block}
section,footer{position:relative;z-index:2}

.wrap{max-width:1320px;margin:0 auto;padding:0 64px}
@media (max-width:900px){.wrap{padding:0 30px}}
@media (max-width:560px){.wrap{padding:0 16px}}

/* header: white, hides going down, returns going up */
header.site{position:fixed;top:0;left:0;right:0;z-index:10;background:var(--white);height:calc(var(--head) + env(safe-area-inset-top, 0px));padding-top:env(safe-area-inset-top, 0px);transition:transform .25s ease}
header.site.snap{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bar{max-width:1320px;margin:0 auto;padding:0 64px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:20px;text-decoration:none}
.brand .logo{width:150px}
.tagline{border-left:1.5px solid var(--line);padding:4px 0 4px 20px;font:400 17px/1.3 var(--sans);color:var(--soft)}
.tagline b{font-weight:800;color:var(--dark)}
nav[aria-label=Main]{display:flex;align-items:center;gap:38px;font-size:19px;margin-left:auto}
nav[aria-label=Main] a{text-decoration:none}
nav[aria-label=Main] a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:6px;text-decoration-thickness:2px}
.menu-tagline{display:none}
.menu{display:none;place-items:center;width:48px;height:48px;padding:0;border:0;background:transparent;color:var(--dark);cursor:pointer;border-radius:var(--control)}
.menu svg{width:30px;height:30px}
.menu .x{display:none}
.menu[aria-expanded=true] .boxes{display:none}
.menu[aria-expanded=true] .x{display:block}
.menu:focus-visible{outline:3px solid var(--dark);outline-offset:2px}

/* Tablets and phones: just Let's talk and the menu button. The menu is the old-home folder tab,
   now graphite with white type, and the tagline moves inside it (Phil, 00:02). */
@media (max-width:900px){
  .bar{padding:0 30px;gap:12px}
  .brand .tagline{display:none}
  .talk{margin-left:auto}
  .menu{display:grid;position:relative;z-index:1}
  .menu[aria-expanded=true]{color:var(--white);background:var(--dark);border-radius:var(--control) var(--control) 0 0}
  /* the open button is a tab that runs down to the header's bottom edge, where the card begins */
  /* overlaps the button and the card by a few pixels, so phones never show a hairline seam under the x (Phil saw one, 00:10) */
  .menu[aria-expanded=true]::after{content:'';position:absolute;left:0;right:0;top:calc(100% - 4px);height:calc((var(--head) - 48px) / 2 + 8px);background:var(--dark)}
  nav[aria-label=Main]{display:none;position:absolute;top:calc(100% - 1px);right:30px;min-width:min(330px, calc(100vw - 32px));flex-direction:column;align-items:stretch;gap:0;margin:0;padding:14px 20px 10px;
    background:var(--dark);color:var(--white);border-radius:var(--bin) 0 var(--bin) var(--bin);font:900 24px/1.2 var(--sans);transform-origin:top right}
  nav[aria-label=Main].open{display:flex;animation:menudrop .22s cubic-bezier(.22,1,.36,1)}
  .menu-tagline{display:block;margin:10px 0 8px;text-align:right;font:400 16px/1.4 var(--sans);color:rgba(255,255,255,.72);white-space:nowrap}
  nav[aria-label=Main] a{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:13px 0;border-top:2px solid rgba(255,255,255,.18)}
  nav[aria-label=Main] a:hover{text-decoration:none}
  /* each item gets its own little bin, the same box as the menu icon */
  nav[aria-label=Main] a::after{content:'';flex:none;width:26px;height:26px;background:var(--bin-ink);-webkit-mask:var(--binmask) center/contain no-repeat;mask:var(--binmask) center/contain no-repeat;transition:transform .2s cubic-bezier(.22,1,.36,1)}
  nav[aria-label=Main] a:hover::after,nav[aria-label=Main] a:focus-visible::after{transform:rotate(-8deg) scale(1.12)}
  nav[aria-label=Main] a:focus-visible{outline:2px solid var(--white);outline-offset:4px}
  @keyframes menudrop{from{opacity:0;clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
}
@media (max-width:560px){:root{--head:74px}.bar{padding:0 16px}.brand .logo{width:124px}nav[aria-label=Main]{right:16px}.talk{padding:13px 18px}}

/* type */
.eyebrow{font:800 13px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px}
/* Barlow Black, as on the original site (Phil, 22:14: same fonts, no serif) */
h1,h2,.quote{font-family:var(--sans);font-weight:900;letter-spacing:-.027em;margin:0}
h1{font-size:clamp(46px,6.1vw,92px);line-height:.95}
h2{font-size:clamp(38px,4.1vw,60px);line-height:.99;margin-bottom:18px}
/* the emphasis phrase changes colour, not style: Dark on the Blend, the Blend on white */
h1 em,h2 em,h3 em,.quote em{font-style:normal}
.gap h1 em,.gap .quote em{color:var(--dark)}
.band h2 em,.band h3 em{background:var(--blend-h);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.lead{font-size:clamp(20px,1.7vw,24px);line-height:1.45;margin:0;max-width:40ch}
.quote{font-size:clamp(40px,5.2vw,78px);line-height:.97;max-width:18ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font:800 19px/1 var(--sans);border-radius:var(--control);padding:20px 26px;text-decoration:none;white-space:nowrap}
.btn:focus-visible,.link-w:focus-visible,.link-d:focus-visible{outline:3px solid var(--dark);outline-offset:3px}
.btn-blend{background:var(--blend-h);color:var(--white);padding:15px 22px}
.btn-white{background:var(--white);color:var(--dark)}
.gap .btn-white:focus-visible,.gap .link-w:focus-visible{outline-color:var(--white)}
.link-w,.link-d{font:800 19px/1 var(--sans);text-decoration:none;padding-bottom:5px}
.link-w{color:var(--white);border-bottom:2px solid rgba(255,255,255,.55)}
.link-d{border-bottom:2px solid var(--coral)}
.ctas{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;margin-top:34px}

/* gaps show the Blend; bands are white. Every one is a whole number of bins tall (business.js). */
.gap{color:var(--white);display:flex;align-items:center;padding:84px 0}
.gap .wrap{width:100%}
.band{background:var(--white);display:flex;align-items:center;padding:88px 0}
.band .wrap{width:100%}
@media (max-width:560px){.gap{padding:64px 0}.band{padding:56px 0}}

/* hero */
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero .lead{margin-top:24px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.frame{margin:0;border-radius:calc(var(--bin) + 10px);padding:12px;position:relative;background:var(--bin-ink)} /* a solid mat in the bin colour, not a see-through outline (Phil 23:08) */
.frame img{border-radius:var(--bin);aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.tape{display:inline-block;font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border-radius:var(--tag)}
.tape-w{background:var(--white);color:var(--dark)}
.tape-d{background:var(--dark);color:var(--white)}
.frame figcaption.tape{position:absolute;left:26px;right:26px;bottom:26px;text-align:center;padding:14px;line-height:1.3}
@media (max-width:560px){.frame figcaption.tape{left:20px;right:20px;bottom:20px;font-size:12px;padding:10px}}

/* services */
.band-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:46px}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.svc li{border:1.5px solid var(--line);border-radius:var(--bin);padding:22px 20px 24px;display:flex;flex-direction:column;gap:10px}
.svc h3{font:900 25px/1.02 var(--sans);letter-spacing:-.02em;margin:10px 0 0}
.svc .formal{font:800 12px/1.45 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:0}
.svc p{margin:0;font-size:16px;line-height:1.5}
.svc .tape{align-self:flex-start}
@media (max-width:1180px){.svc{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.svc{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps li{border-top:3px solid var(--dark);padding-top:20px}
.steps h3{font:800 21px/1.2 var(--sans);margin:16px 0 8px}
.steps p{margin:0;font-size:17px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* questions */
.two{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:20px}}
.faq details{border-bottom:1.5px solid var(--line);padding:20px 0}
.faq summary{font:800 21px/1.3 var(--sans);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:28px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;max-width:60ch}

/* say: short statements on the Blend */
.say .lead{margin-top:22px}

/* footer: back out onto the Blend */
.foot{padding:48px 0;flex-direction:column;align-items:stretch}
/* footer: everything centred in one column (Phil, 23:45) */
.foot-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.office{margin:0;font:800 12px/1.6 var(--sans);letter-spacing:2.8px;text-transform:uppercase}
.foot-logo{width:170px}
.foot .legal{color:var(--soft);margin:6px 0 0}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;font:800 17px/1 var(--sans);margin-top:6px}
.foot nav a{text-decoration:none}
.legal{font-size:15px;margin:26px 0 0}

@media (prefers-reduced-motion: reduce){header.site{transition:none}}
h1.h1-long{font-size:clamp(38px,4.3vw,64px);line-height:.98}

/* the two-sentence hero headline: the second sentence runs on in Dark */
h1.h1-two{font-size:clamp(42px,4.9vw,74px)}
h1.h1-two span{color:var(--dark)}

.hero{align-items:center;padding:80px 0} /* the block starts under the menu bar, so equal padding here reads as menu + padding on top and padding below (Phil, 00:43) */
/* phones: the hero's content sits in the middle of its block, same space above and below (Phil, 00:34);
   buttons run full width with the text link centred under them */
@media (max-width:560px){
  .hero{padding:60px 0}
  .ctas{flex-direction:column;align-items:stretch;gap:22px}
  .ctas .btn{width:100%}
  .ctas .link-w,.ctas .link-d{align-self:center}
}
/* tablets and phones: the photo comes first, as on the old site (Phil, 00:20) */
@media (max-width:900px){.hero .frame{order:-1}.hero-grid{gap:48px}}

/* label-maker tags stuck on a photo: dark tape, then white tape, each a little crooked (Phil 23:06) */
.labels{position:absolute;left:-16px;bottom:30px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none}
.labels .tape{font-size:15px;letter-spacing:.16em;padding:11px 14px;white-space:nowrap}
.labels .tape:nth-child(1){transform:rotate(-3.5deg)}
.labels .tape:nth-child(2){transform:translateX(26px) rotate(2deg)}
@media (max-width:560px){.labels{left:-8px;bottom:22px}.labels .tape{font-size:12px;padding:9px 11px}}

/* phones: Barlow Black at -0.027em crowds at small sizes; open the tracking and leading (Phil, 00:13) */
@media (max-width:560px){h1,h2,.quote{letter-spacing:-.008em;line-height:1.04}}

/* ---------- inner pages ---------- */
.btn-dark{background:var(--dark);color:var(--white)}
.page-hero .wrap{max-width:1320px}
.page-hero h1{max-width:16ch}
.page-hero .lead{margin-top:22px;max-width:46ch}

/* services: one row per service, photo alternating sides */
.svc-rows{display:flex;flex-direction:column;gap:96px}
.svc-row{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
.svc-row.flip .frame{order:2}
.svc-text h2{margin-bottom:10px}
.svc-text .formal{font:800 13px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 14px}
.svc-text p{margin:0 0 14px;max-width:56ch}
.look{margin-top:18px;border-top:1.5px solid var(--line);padding-top:16px}
.look summary{cursor:pointer;list-style:none;display:inline-block;font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:var(--dark);color:var(--white);padding:10px 13px;border-radius:var(--tag)}
.look summary::-webkit-details-marker{display:none}
.look[open] summary{background:var(--white);color:var(--dark);box-shadow:inset 0 0 0 1.5px var(--dark)}
.look .illus{font-size:15px;color:var(--soft);margin:18px 0 8px}
.look-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.look-grid h4{font:800 16px/1.3 var(--sans);margin:0 0 6px}
.look-grid p,.look-grid li{font-size:16px;line-height:1.5}
.look-grid ol,.look-grid ul{margin:0;padding-left:20px}
@media (max-width:900px){.svc-row,.svc-row.flip{grid-template-columns:1fr;gap:32px}.svc-row.flip .frame{order:0}.svc-rows{gap:72px}}
@media (max-width:560px){.look-grid{grid-template-columns:1fr}}

/* how it works */
.steps-long{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:56px 64px}
.steps-long li{border-top:3px solid var(--dark);padding-top:22px}
.steps-long h2{font-size:clamp(28px,2.6vw,38px);margin:16px 0 12px}
.steps-long p{margin:0 0 12px;max-width:52ch}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.price{border:1.5px solid var(--line);border-radius:var(--bin);padding:26px 24px}
.price .amount{font:900 40px/1 var(--sans);letter-spacing:-.02em;margin:18px 0 12px}
.price .amount small{display:block;font:400 16px/1.4 var(--sans);letter-spacing:0;color:var(--soft);margin-top:6px}
.price p{margin:0}
@media (max-width:900px){.steps-long,.price-grid{grid-template-columns:1fr}}

/* about */
.narrow{max-width:900px}
.pull{font:900 clamp(34px,4vw,56px)/1.02 var(--sans);letter-spacing:-.022em;margin:0 0 22px}
.pull em{font-style:normal;background:var(--blend-h);-webkit-background-clip:text;background-clip:text;color:transparent}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 36px}
.person{margin:0}
.frame.square img{aspect-ratio:1/1}
.person figcaption{margin-top:22px;max-width:40ch}
@media (max-width:900px){.team{grid-template-columns:1fr;max-width:420px}}

/* let's talk */
.note{font-size:15px;color:var(--soft)}
.note-form{display:flex;flex-direction:column;gap:16px}
.note-form label{display:flex;flex-direction:column;gap:6px;font:800 15px/1.3 var(--sans)}
.note-form input,.note-form textarea{font:400 18px/1.4 var(--sans);color:var(--dark);border:1.5px solid var(--line);border-radius:var(--control);padding:13px 14px;background:var(--white)}
.note-form input:focus-visible,.note-form textarea:focus-visible{outline:2px solid var(--dark);outline-offset:1px;border-color:var(--dark)}
.note-form .btn{align-self:flex-start}
@media (max-width:560px){.note-form .btn{align-self:stretch}}
/* the page you're on is underlined in the menu */
nav[aria-label=Main] a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:6px;text-decoration-thickness:2px}
@media (max-width:900px){nav[aria-label=Main] a[aria-current=page]{text-decoration:none;color:var(--bin-ink)}}

/* intake form */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.note-form .row2{grid-template-columns:1fr}}
.note-form select{font:400 18px/1.4 var(--sans);color:var(--dark);border:1.5px solid var(--line);border-radius:var(--control);padding:13px 14px;background:var(--white)}
.choices{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.choices legend{font:800 15px/1.3 var(--sans);margin-bottom:8px;padding:0}
.choices label{flex-direction:row!important;align-items:center;gap:8px!important;font:400 16px/1.2 var(--sans)!important;border:1.5px solid var(--line);border-radius:var(--control);padding:10px 14px;cursor:pointer}
.choices label:has(input:checked){border-color:var(--dark);background:var(--dark);color:var(--white)}
.choices input{accent-color:var(--coral);margin:0}
.errmsg{display:none;font:400 14px/1.3 var(--sans);color:var(--dark);margin-top:2px}
.err .errmsg{display:block}
.err input{border-color:var(--dark);border-width:2px}
.sendfail{font-size:15px;margin:0}
.sentcard{padding:24px 0}
.person .who{display:block;font:900 26px/1.1 var(--sans);letter-spacing:-.02em}
.person .role{display:block;font:800 13px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:4px 0 10px}

/* partners */
.partners{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.partner{border:1.5px solid var(--line);border-radius:var(--bin);padding:28px 28px 22px}
.pair{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px}
.pair .link-icon{font:900 22px/1 var(--sans);color:var(--coral)}
.partner h2{font-size:clamp(28px,2.6vw,38px);margin-bottom:12px}
.partner ul{margin:0;padding-left:20px}
.partner li{margin:0 0 6px}
@media (max-width:900px){.partners{grid-template-columns:1fr}}
.band .tape-w{box-shadow:inset 0 0 0 1.5px var(--dark)} /* white tape on a white band needs its edge */
.foot .grow{margin:4px 0 0;font:800 15px/1.4 var(--sans)}.foot .grow a{color:var(--dark);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:4px}

/* Meet Linda */
.linda-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.linda .quote{max-width:none}
.linda .lead{margin-top:18px;max-width:52ch}
.linda-list{margin:22px 0 0;padding-left:26px;display:grid;gap:8px;max-width:60ch}
.linda-list li{font-size:17px;line-height:1.45}
.linda-list strong{font-weight:800}
.footnote{font-size:14px;line-height:1.5;color:var(--dark);margin:22px 0 0;max-width:60ch} /* small print on the blend goes Dark: white at 14px is under 3:1 */
@media (max-width:900px){.linda-grid{grid-template-columns:1fr;gap:36px}.linda-photo{max-width:520px}}
/* Linda appreciation form */
.linda-form h2{margin:12px 0 4px}
.choices.stack{flex-direction:column;align-items:flex-start}
.page-hero.linda h1{max-width:none}
.page-hero.linda .footnote{margin-top:18px}

/* Get It Together, AI (Phil 10:59): white cards on the blend, so the small print reads Dark on White */
.gai .quote{max-width:none}
.gai-top{align-items:center}
.gai-list{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:none}
.gai-list li{background:var(--white);color:var(--dark);border-radius:var(--bin);padding:22px 20px 24px;display:flex;flex-direction:column;gap:12px}
.gai-list .tape{align-self:flex-start}
.gai-list h3{font:900 25px/1.02 var(--sans);letter-spacing:-.02em;margin:6px 0 2px}
.gai-list h3 em{font-style:normal;background:var(--blend-h);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.gai-list p{margin:0;font-size:16px;line-height:1.5}
.gai-list p b{font-weight:800}
.gai-list .bad{color:var(--soft);padding-bottom:12px;border-bottom:1.5px solid var(--line)}
.gai-foot{margin-top:48px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 48px}
.gai-foot .lead{max-width:44ch}
.gai-foot .ctas{margin-top:0}
@media (max-width:1180px){.gai-list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.gai-foot .ctas{margin-top:26px}}
@media (max-width:760px){.gai-list{grid-template-columns:1fr;margin-top:40px}}
.gai-list .tape{white-space:nowrap;font-size:12px;letter-spacing:.12em}
.gai .lead b{font-weight:800;color:var(--dark)}
.form-note{margin:-6px 0 4px;font-size:17px;color:var(--soft)}
/* Read more on phones (Phil 11:17): the cards collapse to tape + headline */
.gai-list .more{display:flex;flex-direction:column;gap:12px}
.more-btn{display:none}
@media (max-width:760px){
  .gai-list .more{display:none}
  .gai-list li.open .more{display:flex}
  .more-btn{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-top:2px;padding:6px 0 4px;border:0;border-bottom:2px solid var(--coral);background:none;color:var(--dark);font:800 16px/1 var(--sans);cursor:pointer}
  .more-btn::after{content:'+';font-size:18px}
  .gai-list li.open .more-btn::after{content:'−'}
  .more-btn:focus-visible{outline:2px solid var(--dark);outline-offset:3px}
  .gai-list li{gap:10px}
}
/* service cards are links into the Services page */
.svc h3 a{color:inherit;text-decoration:none}
.svc h3 a::after{content:'';position:absolute;inset:0;border-radius:var(--bin)}
.svc li{position:relative}
.svc li:has(a:focus-visible){outline:3px solid var(--dark);outline-offset:3px}
.svc h3 a:focus-visible{outline:none}
.linda-more .more-btn{border-bottom-color:var(--white)}

/* MOBILE FIRST (Phil 11:18: "assume 90% of our users are gonna be mobile") */
@media (max-width:760px){
  /* services: a compact list of links, number + headline + one line; the formal name lives on the Services page */
  .svc{gap:10px}
  .svc li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;padding:16px 44px 16px 16px;align-items:center}
  .svc li .tape{grid-row:1}
  .svc h3{margin:0;font-size:22px}
  .svc .formal{display:none}
  .svc li p{grid-column:1/-1;font-size:16px}
  .svc li::after{content:'→';position:absolute;right:16px;top:18px;font:800 20px/1 var(--sans);color:var(--coral)}
  /* Linda: three things, then the rest on tap; the list sits on a white card so it reads */
  .linda-more{background:var(--white);color:var(--dark);border-radius:var(--bin);padding:18px 18px 20px;margin-top:22px}
  .linda-more .linda-list{margin:0}
  .linda-more .linda-list li:nth-child(n+4){display:none}
  .linda-more.open .linda-list li{display:list-item}
  .linda-more .more-btn{display:inline-flex;margin-top:14px;border-bottom-color:var(--coral)}
}
@media (max-width:760px){
  /* square photos go landscape on phones so the words arrive sooner */
  .linda .frame.square img,.gai .frame.square img{aspect-ratio:3/2}
  /* How it works: four short steps, tape beside the headline */
  .steps{gap:18px!important;margin-top:28px!important}
  .steps li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding-top:14px}
  .steps h3{margin:0}
  .steps li p{grid-column:1/-1;margin-top:6px}
  /* AI cards, collapsed: tape above a tighter headline */
  .gai-list li{padding:16px 16px 18px}
  .gai-list h3{font-size:22px}
}
/* Services, the deep page (Phil 11:22): jump chips, Sounds familiar?, Done right., the right door */
.svc-jump{position:sticky;top:0;z-index:5;background:var(--white);border-bottom:1.5px solid var(--line)}
.svc-jump .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:12px;padding-bottom:12px;scrollbar-width:none}
.svc-jump .wrap::-webkit-scrollbar{display:none}
.svc-jump a{flex:none;font:800 15px/1 var(--sans);color:var(--dark);text-decoration:none;border:1.5px solid var(--line);border-radius:999px;padding:10px 14px}
.svc-jump a:hover{border-color:var(--dark)}
.svc-jump a:focus-visible{outline:2px solid var(--dark);outline-offset:2px}
.svc-row{scroll-margin-top:84px}
.svc-row{align-items:start}
.familiar,.done-right{margin:18px 0 0}
.familiar h3,.done-right h3{font:900 22px/1.1 var(--sans);letter-spacing:-.015em;margin:0 0 10px}
.familiar h3 em,.done-right h3 em{font-style:normal;background:var(--blend-h);-webkit-background-clip:text;background-clip:text;color:transparent}
.familiar ul,.done-right ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-width:58ch}
.familiar li,.done-right li{position:relative;padding-left:26px;font-size:17px;line-height:1.45}
.familiar li::before{content:'';position:absolute;left:0;top:.2em;width:16px;height:16px;background:var(--bin-ink);-webkit-mask:var(--binmask) center/contain no-repeat;mask:var(--binmask) center/contain no-repeat}
.done-right li::before{content:'✓';position:absolute;left:2px;top:0;font-weight:900;color:var(--coral)}
.done-right b{font-weight:800}
.svc-text .ctas{margin-top:22px}
.svc-jump a[aria-current]{background:var(--dark);color:var(--white);border-color:var(--dark)}
.contact-note{margin:14px 0 0;padding-top:18px;border-top:1.5px solid var(--line)}
/* footer: the two campaign doors */
.foot .doors{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
.foot .doors a{font:800 15px/1 var(--sans);color:var(--dark);text-decoration:none;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px}
.foot .doors a:hover{border-color:var(--dark)}
/* Linda's list sits on a white card at every width: white 17px text on the blend is under 3:1 */
.linda-more{background:var(--white);color:var(--dark);border-radius:var(--bin);padding:22px 24px 24px;margin-top:22px;max-width:62ch}
.linda-more .linda-list{margin:0}
.partner > p:not(.pair){margin:10px 0 0;max-width:40ch}
/* the Linda form's sticky note (Phil 11:40: room for their personality) */
.note-form label.sticky{align-self:flex-start;width:min(100%,420px);background:var(--bin-ink);color:var(--dark);padding:18px 18px 20px;border-radius:4px;transform:rotate(-1.2deg);box-shadow:0 10px 18px -12px rgba(35,37,43,.45);font:900 20px/1.2 var(--sans);margin:10px 0 6px}
.note-form label.sticky textarea{background:transparent;border:0;border-bottom:1.5px dashed rgba(35,37,43,.35);border-radius:0;padding:8px 0;font:400 18px/1.45 var(--sans);resize:vertical}
.note-form label.sticky textarea::placeholder{color:rgba(35,37,43,.62)}
.note-form label.sticky textarea:focus-visible{outline:2px solid var(--dark);outline-offset:4px;border-color:var(--dark)}
@media (max-width:560px){.steps-long{gap:36px}.steps-long li{padding-top:16px}.steps-long h2{margin:12px 0 10px}}
/* testimonials (drafts until each client approves) */
.words{margin-bottom:72px}
.quotes{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quotes li{border:1.5px solid var(--line);border-radius:var(--bin);padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px}
.quotes blockquote{margin:0;font:600 20px/1.4 var(--sans)}
.quotes .by{margin:auto 0 0;font-size:15px;color:var(--soft);display:flex;flex-direction:column}
.quotes .by b{color:var(--dark);font-weight:800;font-size:17px}
.draft-tag{align-self:flex-start;background:var(--coral)!important}
@media (max-width:900px){.quotes{grid-template-columns:1fr}.words{margin-bottom:56px}}
.band:has(> .words){flex-direction:column;align-items:stretch}
.quotes blockquote{font:400 20px/1.45 var(--sans)}
.draft-tag{white-space:nowrap;font-size:12px}
@media (max-width:900px){
  /* phones: swipe the quotes sideways instead of stacking three cards */
  .quotes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:-16px;margin-right:-16px;padding:0 16px 6px;scrollbar-width:none}
  .quotes::-webkit-scrollbar{display:none}
  .quotes li{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:16px}
}
.quotes .stars{margin:0;font-size:22px;letter-spacing:.12em;background:var(--blend-h);-webkit-background-clip:text;background-clip:text;color:transparent;align-self:flex-start}
/* AEO blocks (Phil 11:44) */
.band + .band.aeo{padding-top:0}
.band + .band.aeo .wrap{border-top:1.5px solid var(--line);padding-top:64px}
@media (max-width:560px){.band + .band.aeo .wrap{padding-top:44px}}
.svc-faq{margin-top:20px}
.svc-faq h3{font:900 22px/1.1 var(--sans);letter-spacing:-.015em;margin:0 0 2px}
.svc-faq details{padding:14px 0}
.svc-faq summary{font-size:18px}
.svc-faq summary::after{font-size:24px}
.svc-faq p{font-size:17px}
@media (max-width:760px){.aeo .two{grid-template-columns:1fr;gap:20px}.faq summary{font-size:19px}}
.qlink{display:inline-block;margin-left:4px;font-weight:800;color:var(--dark);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:4px}.qlink::after{content:" →"}
/* cookie bar (consent.js, after Iris): Reject exactly as easy as Accept */
.ckbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--white);border-top:1.5px solid var(--line);box-shadow:0 -18px 40px -24px rgba(35,37,43,.45);padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));display:none}
.ckbar.show{display:block}
.ckin{max-width:1180px;margin:0 auto;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cktx{font-size:15px;line-height:1.5;color:var(--dark);max-width:680px;margin:0}
.cktx a{color:var(--dark);text-decoration-color:var(--coral);text-underline-offset:3px}
.ckbtns{display:flex;gap:10px;flex-shrink:0}
.ckb{font:800 16px/1 var(--sans);padding:13px 20px;border-radius:var(--control);cursor:pointer;border:1.5px solid var(--dark);background:var(--white);color:var(--dark);min-width:110px}
.ckb.yes{background:var(--dark);color:var(--white)}
.ckb:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
@media (max-width:600px){.ckin{flex-direction:column;align-items:stretch}.ckb{flex:1}}
.prose{max-width:760px}
.prose h2{font-size:clamp(28px,3vw,40px);margin:40px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px;max-width:62ch}
.prose .btn{margin-top:6px}
.foot .legal a{color:inherit}
/* card labels hang off the card like the photo tags (Phil 12:24): tilted, offset past the edge */
.gai-list li{position:relative;padding-top:30px}
.gai-list .tape{position:absolute;top:-13px;left:-10px;transform:rotate(-3deg);box-shadow:0 6px 12px -8px rgba(35,37,43,.5)}
.gai-list li:nth-child(even) .tape{transform:rotate(2.5deg);left:-6px}
.gai-list li:nth-child(3n) .tape{transform:rotate(-1.5deg)}
.gai-list h3{margin-top:0}
.gai-list{row-gap:26px}
@media (max-width:760px){.gai-list{row-gap:24px;margin-left:6px}.gai-list li{padding-top:28px}}
/* phones: every button runs full width, and the text link under it sits centred (Phil 12:27) */
@media (max-width:900px){.gai-foot{flex-direction:column;align-items:stretch}}
@media (max-width:560px){
  main .btn{width:100%}
  .ctas .link-w,.ctas .link-d{align-self:center;text-align:center}
}
@media (max-width:560px){.ctas + .footnote,.ctas + p{text-align:center;margin-left:auto;margin-right:auto}}
/* phones: the AI cards swipe sideways with the full copy showing, instead of Read more (Phil 12:29) */
@media (max-width:760px){
  .gai-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:28px -16px 0;padding:18px 16px 10px 22px;scrollbar-width:none;align-items:stretch}
  .gai-list::-webkit-scrollbar{display:none}
  .gai-list li{flex:0 0 82%;scroll-snap-align:start;scroll-margin-left:22px}
  .gai-list .more,.gai-list li .more{display:flex}
  .gai-list .more-btn{display:none}
  .gai-list .tape{top:-12px;left:-8px}
}
/* swipe arrows: label tapes that follow the scroll (Phil 12:30) */
.swipe-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px;min-height:40px}
.swipe-bar[hidden]{display:none}
.swipe-bar .tape{font-size:18px;letter-spacing:0;padding:9px 16px;border:0;cursor:pointer;box-shadow:0 6px 12px -8px rgba(35,37,43,.5)}
.swipe-bar .swipe-prev{transform:rotate(-3deg);margin-right:auto}
.swipe-bar .swipe-next{transform:rotate(2.5deg)}
.swipe-bar .tape[hidden]{display:none}
.swipe-bar .tape:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.band .swipe-bar .tape:focus-visible{outline-color:var(--coral)}
.swipe-count{font:800 14px/1 var(--sans);letter-spacing:.1em;opacity:.85}
.gai .swipe-count{color:var(--white)}
.swipe-bar{justify-content:flex-end}
.swipe-bar .swipe-go{transform:rotate(2.5deg);margin:0}
.swipe-bar .swipe-go.back{transform:rotate(-3deg)}
/* the arrow sits centred on the bottom edge of the cards, like a tag stuck across it (Phil 12:35) */
.swipe-bar{justify-content:center;margin-top:-30px;position:relative;z-index:2;pointer-events:none}
.swipe-bar .swipe-go{pointer-events:auto}
.swipe-bar{margin-top:14px}

/* HEADER, phones and tablets (Phil 12:37): bigger logo; the menu button sits left of a slimmer Let's talk at the right;
   the tagline comes out of the menu and runs centred along the bottom of the header */
.htag{display:none}
.brand .logo{width:170px}
@media (max-width:900px){
  :root{--bar:84px;--tagrow:30px;--head:calc(var(--bar) + var(--tagrow))}
  .bar{height:var(--bar)}
  .brand .logo{width:168px}
  .menu{order:1;margin-left:auto}
  .talk{order:2;margin-left:0}
  .htag{display:block;margin:0;height:var(--tagrow);line-height:1;padding-bottom:12px;text-align:center;font:400 15px/1 var(--sans);color:var(--soft);letter-spacing:.01em}
  .menu[aria-expanded=true]::after{height:calc((var(--bar) - 48px) / 2 + var(--tagrow) + 8px)}
}
@media (max-width:560px){
  :root{--bar:78px;--tagrow:28px}
  .brand .logo{width:150px}
  .talk{padding:11px 16px;font-size:16px}
  .bar{gap:8px}
}
/* the menu button now sits mid-bar, so the folder tab meets the card's top edge part-way along: all four corners round */
@media (max-width:900px){nav[aria-label=Main]{border-radius:var(--bin)}}
@media (max-width:900px){nav[aria-label=Main] a:first-of-type{border-top:0}nav[aria-label=Main]{padding-top:6px}}
/* MENU v3 (Phil 12:40): no folder tab. The boxes icon just turns into an x, and a full-width graphite drawer
   slides down from under the header. */
@media (max-width:900px){
  .menu[aria-expanded=true]{color:var(--dark);background:transparent;border-radius:var(--control)}
  .menu[aria-expanded=true]::after{content:none}
  nav[aria-label=Main]{left:0;right:0;top:100%;min-width:0;border-radius:0 0 var(--bin) var(--bin);padding:6px 30px 18px;box-shadow:0 22px 40px -24px rgba(35,37,43,.6)}
  nav[aria-label=Main] a{justify-content:space-between;flex-direction:row-reverse}
}
@media (max-width:560px){nav[aria-label=Main]{padding:4px 16px 16px}}
@media (max-width:900px){nav[aria-label=Main] a{justify-content:flex-end}}
/* tagline: on arrival only (Phil 12:41 "show me") */
@media (max-width:900px){
  header.site{transition:transform .25s ease,height .25s ease}
  header.site.tucked{height:calc(var(--bar) + env(safe-area-inset-top, 0px))}
  .htag{overflow:hidden;transition:height .25s ease,opacity .2s ease,padding .25s ease}
  header.site.tucked .htag{height:0;opacity:0;padding:0}
}
/* TAGLINE v3 (Phil 12:48): a label-maker tag, tilted, stuck across the bottom edge of the header. No extra row. */
@media (max-width:900px){
  :root{--tagrow:0px}
  header.site.tucked{height:calc(var(--head) + env(safe-area-inset-top, 0px))}
  .htag,header.site.tucked .htag{display:block;position:absolute;left:30px;bottom:-15px;height:auto;opacity:1;margin:0;
    padding:8px 12px;font:800 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--white);white-space:nowrap;
    transform:rotate(-2deg);box-shadow:0 6px 12px -8px rgba(35,37,43,.55);transition:none;overflow:visible;z-index:2}
}
@media (max-width:560px){.htag,header.site.tucked .htag{left:14px;font-size:11px;letter-spacing:.1em;padding:7px 10px}}
/* with the drawer open the tag turns white, so it doesn't vanish into the graphite, and the first item sits clear of it */
@media (max-width:900px){
  header.site:has(.menu[aria-expanded=true]) .htag{background:var(--white);color:var(--dark)}
  nav[aria-label=Main]{padding-top:26px}
}
@media (max-width:900px){:root{--bar:92px}.htag,header.site.tucked .htag{bottom:-18px}}
@media (max-width:560px){:root{--bar:82px}.htag,header.site.tucked .htag{bottom:-17px}}
@media (max-width:560px){.htag,header.site.tucked .htag{bottom:-21px}}
@media (max-width:560px){.htag,header.site.tucked .htag{bottom:-19px}}
/* the menu boxes rattle now and then until first opened (Phil 12:56) */
.menu-nudge .boxes{animation:rattle 1.1s cubic-bezier(.36,.07,.19,.97);transform-origin:50% 70%}
.menu-nudge .boxes rect:nth-of-type(1){animation:hop .9s ease .15s}
@keyframes rattle{0%,100%{transform:rotate(0)}12%{transform:rotate(-9deg)}24%{transform:rotate(8deg)}36%{transform:rotate(-6deg)}48%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}72%{transform:rotate(0)}}
@keyframes hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}50%{transform:translateY(0)}65%{transform:translateY(-1.5px)}}
.menu .boxes rect{transform-box:fill-box}
/* the header follows the finger on the way out: no easing while scrolling down (Phil 12:58); coming back still eases in */
header.site,header.site.tucked{transition:none}
header.site.snap{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
/* the menu boxes rattle all the time, a little shake-and-turn every few seconds (Phil 12:59: "shaking and rotating all
   the time... so people know to click"). Paused while the menu is open; off for reduced motion. */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .menu .boxes{animation:rattle-loop 3.2s cubic-bezier(.36,.07,.19,.97) infinite;transform-origin:50% 70%}
  .menu .boxes rect:nth-of-type(1){animation:hop-loop 3.2s ease infinite}
  .menu[aria-expanded=true] .boxes,.menu[aria-expanded=true] .boxes rect{animation:none}
}
@keyframes rattle-loop{0%,40%,100%{transform:rotate(0)}5%{transform:rotate(-10deg)}10%{transform:rotate(9deg)}15%{transform:rotate(-7deg)}20%{transform:rotate(5deg)}25%{transform:rotate(-3deg)}30%{transform:rotate(1deg)}}
@keyframes hop-loop{0%,40%,100%{transform:translateY(0)}8%{transform:translateY(-3.5px)}16%{transform:translateY(0)}22%{transform:translateY(-1.5px)}28%{transform:translateY(0)}}
/* let the rattle and hop move past the icon box instead of being clipped (Phil 13:04) */
.menu svg{overflow:visible}
/* Linda keeps her square on phones (Phil 13:06) */
@media (max-width:760px){.linda .frame.square img{aspect-ratio:1/1}}
/* phones: Linda's ten become ten swipe cards, like the AI cards (Phil 13:07) */
@media (max-width:760px){
  .linda-more{background:none;padding:0;margin-top:18px;max-width:none}
  .linda-more .more-btn{display:none}
  .linda-more .linda-list li:nth-child(n+4){display:flex}
  .linda-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -16px;padding:18px 16px 10px 22px;list-style:none;scrollbar-width:none;counter-reset:linda}
  .linda-list::-webkit-scrollbar{display:none}
  .linda-list li{counter-increment:linda;flex:0 0 78%;scroll-snap-align:start;scroll-margin-left:22px;position:relative;display:flex;flex-direction:column;gap:6px;
    background:var(--white);color:var(--dark);border-radius:var(--bin);padding:30px 20px 22px;font-size:17px;line-height:1.45}
  .linda-list li::before{content:counter(linda,decimal-leading-zero);position:absolute;top:-12px;left:-8px;transform:rotate(-3deg);
    font:800 13px/1 var(--sans);letter-spacing:.14em;padding:9px 12px;border-radius:var(--tag);background:var(--dark);color:var(--white);box-shadow:0 6px 12px -8px rgba(35,37,43,.5)}
  .linda-list li:nth-child(even)::before{transform:rotate(2.5deg);left:-6px}
  .linda-list li strong{font-size:21px;font-weight:900;letter-spacing:-.01em;line-height:1.1}
}
.linda-grid > *{min-width:0}
@media (max-width:760px){.linda-more .linda-list{margin:0 -16px}}
.kicker{font:800 18px/1.35 var(--sans);color:var(--dark);margin:0 0 14px;max-width:34ch}
/* Linda's cards: the problem, then what we do, like a tiny case (Phil 13:18) */
.linda-list .pain,.linda-list .fix{display:block}
.linda-list .pain{color:var(--soft);margin-top:4px}
.linda-list .fix{margin-top:6px}
.linda-list .pain b,.linda-list .fix b{font-weight:800;color:var(--dark)}
@media (max-width:760px){.linda-list .pain{padding-bottom:10px;border-bottom:1.5px solid var(--line)}.linda-list .fix{margin-top:2px}}
/* Before / After in the blend (Phil 13:20); 19px bold so pink-on-white still clears 3:1 as large text */
.linda-list .pain b,.linda-list .fix b{font-size:19px;font-weight:900;background:var(--blend-h);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
/* the AI cards get the same labels in the blend (Phil 13:21) */
.gai-list p b{font-size:19px;font-weight:900;background:var(--blend-h);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
/* card headlines are one colour: graphite only, no colour-change phrase (Phil 13:21). Section headlines keep theirs. */
.gai-list h3 em,.svc h3 em,.svc h3 a em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--dark);padding-right:0}
.svc-lead{margin-top:14px;max-width:48ch}
#services .svc{margin-top:32px}
.all-link{margin:28px 0 0;text-align:center}
/* homepage service cards: three concrete things each (Phil 13:28) */
.svc-inc{list-style:none;margin:6px 0 0;padding:12px 0 0;border-top:1.5px solid var(--line);display:grid;gap:7px}
.svc .svc-inc li{border:0;padding:0 0 0 22px;display:block;position:relative;font-size:15px;line-height:1.4;grid-column:1/-1}
.svc-inc li::before{content:'✓';position:absolute;left:0;top:0;font-weight:900;color:var(--coral)}
@media (max-width:760px){
  .svc-inc{grid-column:1/-1}
  .svc .svc-inc li{display:block;padding:0 0 0 22px}
  .svc .svc-inc li::after{content:none}
}

/* ONE RULE for labels on cards and blocks (Phil 13:29: "rotated... and offset some so it stands out"; verified site-wide):
   the tape hangs off the top-left corner, tilted, with a small shadow. Odd cards tilt left, even ones right. */
.svc > li,.price,.steps > li{position:relative}
.svc > li > .tape,.price > .tape,.steps > li > .tape{position:absolute;top:-13px;left:-10px;margin:0;transform:rotate(-3deg);box-shadow:0 6px 12px -8px rgba(35,37,43,.5);z-index:1}
.svc > li:nth-child(even) > .tape,.price:nth-child(even) > .tape,.steps > li:nth-child(even) > .tape{transform:rotate(2.5deg);left:-6px}
.svc > li:nth-child(3n) > .tape,.price:nth-child(3n) > .tape{transform:rotate(-1.5deg)}
.svc > li{padding-top:30px}
.svc > li > h3{margin-top:0}
.price{padding-top:34px}
.price > .tape-w{box-shadow:0 0 0 1.5px var(--dark),0 6px 12px -8px rgba(35,37,43,.5)}
.steps > li{padding-top:30px}
.steps > li > .tape{top:-15px;left:-4px}
.steps > li > h3{margin-top:0}
.pair .tape:first-child{transform:rotate(-3deg)}
.pair .tape:last-child{transform:rotate(2.5deg)}
@media (max-width:760px){
  .svc > li{display:flex;flex-direction:column;gap:6px;padding:28px 44px 16px 16px}
  .svc{gap:24px}
  .steps{row-gap:34px!important}
  .steps > li{display:block;padding-top:26px}
  .steps > li p{margin-top:6px}
}
/* phones: the five service cards swipe sideways too (Phil 13:30) */
@media (max-width:760px){
  .svc{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:18px -16px 0!important;padding:18px 16px 10px 22px;scrollbar-width:none;align-items:stretch}
  .svc::-webkit-scrollbar{display:none}
  .svc > li{flex:0 0 82%;scroll-snap-align:start;scroll-margin-left:22px;background:var(--white)}
  #services .swipe-bar .swipe-go:focus-visible{outline-color:var(--coral)}
}
.partner .ptag{margin:0 0 12px;font-weight:800;color:var(--soft)}
/* partner card headlines follow the card rule: graphite only (Phil 13:21) */
.partner h2 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--dark)}
.partner > p:not(.pair):not(.ptag){margin:0 0 12px}
.partner .ptag{background:var(--blend-h);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:19px;font-weight:900;padding-right:.04em}
/* NO GREY TEXT (Phil 13:37: "you invented a brand color.. the grey"). The palette is four colours, so the old
   "soft" grey text is now plain graphite everywhere; accents use the blend. Hairline rules stay a faint graphite. */
:root{--soft:var(--dark)}
/* partner lists use the same coral checks as the service cards */
.partner ul{list-style:none;padding:0;display:grid;gap:8px}
.partner li{position:relative;padding-left:24px}
.partner li::before{content:'✓';position:absolute;left:0;top:0;font-weight:900;color:var(--coral)}
/* the coral check is the site's bullet (Phil 13:38): "What you receive" lists on Services too; numbered steps keep
   their numbers, set in coral to match */
.look-grid ul{list-style:none;padding-left:0}
.look-grid ul li{position:relative;padding-left:24px}
.look-grid ul li::before{content:'✓';position:absolute;left:0;top:0;font-weight:900;color:var(--coral)}
.look-grid ol li::marker,.linda-list li::marker{color:var(--coral);font-weight:900}
/* SERVICES, alternating blocks (Phil 13:44): hero blend, then white / blend / white / blend / white, then the blend ask.
   On the blend the words sit on a white card, so the small print stays readable and the bin wall shows around it. */
.svc-sec{padding:96px 0}
.gap.svc-sec .svc-text{background:var(--white);color:var(--dark);border-radius:calc(var(--bin) + 6px);padding:34px 34px 30px}
.gap.svc-sec .svc-text h2 em{color:transparent;background:var(--blend-h);-webkit-background-clip:text;background-clip:text}
.gap.svc-sec .frame{background:rgba(255,255,255,.35)}
@media (max-width:760px){.svc-sec{padding:64px 0}.gap.svc-sec .svc-text{padding:24px 20px 22px}}
/* footer tag cloud (Phil 13:46): every cool thing you can click, as label-maker tags, each tilted its own way */
.foot .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px;max-width:760px;margin:10px auto 4px}
.foot .tags a{font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:10px 13px;border-radius:var(--tag);
  background:var(--dark);color:var(--white);box-shadow:0 6px 12px -8px rgba(35,37,43,.5);transform:rotate(-2deg);transition:transform .15s ease}
.foot .tags a:nth-child(3n+2){background:var(--white);color:var(--dark);box-shadow:0 0 0 1.5px var(--dark),0 6px 12px -8px rgba(35,37,43,.5);transform:rotate(1.8deg)}
.foot .tags a:nth-child(3n){transform:rotate(-.8deg)}
.foot .tags a:nth-child(4n){transform:rotate(2.6deg)}
.foot .tags a:hover,.foot .tags a:focus-visible{transform:rotate(0) scale(1.06)}
.foot .tags a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
@media (max-width:560px){.foot .tags a{font-size:12px;padding:9px 11px}}
/* the page tag above each sub-page headline (Phil 13:50) */
.pagetag{display:inline-block;margin:0 0 18px;transform:rotate(-2.5deg);box-shadow:0 6px 12px -8px rgba(35,37,43,.55)}
.pagetag{transform:rotate(2.5deg)} /* leans the opposite way from the header tagline (Phil 13:57) */
/* Partners: Join the crew on the blend, the form on a white card (Phil 13:58) */
.join .note-form{background:var(--white);color:var(--dark);border-radius:calc(var(--bin) + 6px);padding:30px 28px 28px}
.join .note-form + .sentcard{background:var(--white);color:var(--dark);border-radius:calc(var(--bin) + 6px);padding:28px}
.join .two > div:first-child p{max-width:40ch}
@media (max-width:560px){.join .note-form{padding:22px 18px}}
.gap h2 em{color:var(--dark)} /* on the blend the colour-change phrase is graphite, like the h1s */
.svc-faq{margin-top:14px}
/* DESKTOP gets the same tagline tag as phones (Phil 14:37): the side-by-side tagline goes, and the tape hangs off
   the header's bottom edge under the logo. */
@media (min-width:901px){
  .brand .tagline{display:none}
  .htag,header.site.tucked .htag{display:block;position:absolute;left:max(56px, calc((100vw - 1320px) / 2 + 56px));bottom:-17px;height:auto;margin:0;
    padding:9px 13px;font:800 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--white);white-space:nowrap;
    transform:rotate(-2deg);box-shadow:0 6px 12px -8px rgba(35,37,43,.55);z-index:2}
  :root{--head:100px}
}
@media (min-width:901px){:root{--head:108px}.htag,header.site.tucked .htag{bottom:-22px}}
/* Linda's ten as ten cards on wider screens too (Phil 14:38), under the photo and headline */
.linda-below{grid-column:1/-1;min-width:0}
@media (min-width:761px){
  .linda-more{background:none;padding:0;margin-top:8px;max-width:none}
  .linda-more .more-btn{display:none}
  .linda-more .linda-list li:nth-child(n+4){display:flex}
  .linda-more .linda-list{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 16px;margin:0;padding:16px 0 0;list-style:none;counter-reset:linda}
  .linda-list li{counter-increment:linda;position:relative;display:flex;flex-direction:column;gap:6px;background:var(--white);color:var(--dark);
    border-radius:var(--bin);padding:30px 18px 20px;font-size:16px;line-height:1.45}
  .linda-list li::before{content:counter(linda,decimal-leading-zero);position:absolute;top:-12px;left:-8px;transform:rotate(-3deg);
    font:800 13px/1 var(--sans);letter-spacing:.14em;padding:9px 12px;border-radius:var(--tag);background:var(--dark);color:var(--white);box-shadow:0 6px 12px -8px rgba(35,37,43,.5)}
  .linda-list li:nth-child(even)::before{transform:rotate(2.5deg);left:-6px}
  .linda-list li strong{font-size:20px;font-weight:900;letter-spacing:-.01em;line-height:1.1}
  .linda-list .pain{padding-bottom:10px;border-bottom:1.5px solid var(--line)}
  .linda-below .ctas{margin-top:36px}
}
@media (min-width:761px) and (max-width:1180px){.linda-more .linda-list{grid-template-columns:repeat(3,1fr)}}
@media (min-width:761px){.linda-more .linda-list{max-width:none;width:100%}}
/* Linda: the footnote closes the card set, then one full-width button (Phil 14:39) */
.linda-below .footnote{margin-top:18px;max-width:none}
.linda-below .ctas{margin-top:22px}
.linda-below .ctas .btn{width:100%}
/* desktop Linda: cards stay in the right column under the headline; the left stays open under her photo (Phil 14:40) */
@media (min-width:901px){
  .linda-grid{row-gap:0}
  .linda-grid > .linda-photo{grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--head) + 24px)}
  .linda-below{grid-column:2}
  .linda-more .linda-list{grid-template-columns:repeat(2,1fr)!important;padding-top:34px}
}
/* the dramatization note lives under Linda's photo, at body size (Phil 14:41) */
.linda-side .footnote{font-size:17px;line-height:1.5;margin:16px 0 0;max-width:none}
@media (min-width:901px){
  .linda-grid > .linda-photo{position:relative;top:auto} /* the frame anchors its tapes; never static (bug Phil caught 14:44) */
  .linda-grid > .linda-side{grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--head) + 24px)}
}
@media (max-width:900px){.linda-side{max-width:520px}}
/* Linda page: the kicker IS the page tag, as label tape (Phil 14:47); long, so it may wrap */
.kicker.tape{display:inline-block;max-width:min(560px,100%);white-space:normal;line-height:1.5;font-size:13px;padding:9px 13px;margin:0 0 20px;
  transform:rotate(2.5deg);box-shadow:0 6px 12px -8px rgba(35,37,43,.55)}
.kicker.tape{color:var(--white);font-weight:800}
.page-hero.linda .footnote{font-size:17px;line-height:1.5} /* body size, like the homepage note (Phil 14:41) */
.kicker.tape{max-width:min(470px,100%);text-wrap:balance}
/* the Linda note: one style on both pages, big and heavy enough to read on the blend (Phil 14:50) */
.linda-side .footnote,.page-hero.linda .linda-side .footnote{font:600 18px/1.45 var(--sans);color:var(--dark);margin:18px 0 0;max-width:none}
.linda-side .footnote,.page-hero.linda .linda-side .footnote{font-weight:400;font-size:19px}
/* hero photo reel (Phil 14:52) */
.hero-reel .reel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--bin);scrollbar-width:none}
.hero-reel .reel::-webkit-scrollbar{display:none}
.hero-reel .reel img{flex:0 0 100%;scroll-snap-align:start;border-radius:0}
.hero-reel .swipe-bar{position:absolute;left:0;right:0;bottom:-58px;margin:0}
.hero-reel .labels{z-index:3}
@media (max-width:900px){.hero-grid{row-gap:78px}}
/* hero reel bar: ← [• • ● • •] → (Phil 14:55) */
.reel-bar{display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:auto}
.reel-bar .tape{border:0;cursor:pointer;box-shadow:0 6px 12px -8px rgba(35,37,43,.5)}
.reel-prev,.reel-next{font-size:18px;letter-spacing:0;padding:9px 14px}
.reel-prev{transform:rotate(-3deg)}
.reel-next{transform:rotate(2.5deg)}
.reel-dots{display:inline-flex;align-items:center;gap:9px;padding:12px 14px;transform:rotate(-1deg);cursor:default}
.reel-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:transparent;cursor:pointer}
.reel-dots button[aria-current=true]{background:var(--white);border-color:var(--white)}
.reel-bar button:focus-visible{outline:2px solid var(--white);outline-offset:3px}
/* each dot is its own little label sticker, each tilted its own way; the current one inverts to white (Phil 14:56) */
.reel-dots{background:none!important;padding:0!important;box-shadow:none!important;transform:none!important;gap:7px}
.reel-dots button.tape{width:30px;height:30px;padding:0;border-radius:var(--tag);display:grid;place-items:center;border:0;cursor:pointer;
  box-shadow:0 6px 12px -8px rgba(35,37,43,.5)}
.reel-dots button i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--white)}
.reel-dots button:nth-child(1){transform:rotate(-6deg)}
.reel-dots button:nth-child(2){transform:rotate(4deg) translateY(1px)}
.reel-dots button:nth-child(3){transform:rotate(-2deg) translateY(-1px)}
.reel-dots button:nth-child(4){transform:rotate(7deg)}
.reel-dots button:nth-child(5){transform:rotate(-4deg) translateY(1px)}
.reel-dots button[aria-current=true]{background:var(--white);box-shadow:0 0 0 1.5px var(--dark),0 6px 12px -8px rgba(35,37,43,.5)}
.reel-dots button[aria-current=true] i{background:var(--dark);border-color:var(--dark)}
.reel-dots button:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.reel-dots button.tape{background:var(--dark);width:auto;height:auto;padding:9px 12px;line-height:1;font-size:18px}
.reel-dots button.tape i{display:block;width:12px;height:12px;margin:3px 0}
.reel-dots button[aria-current=true]{background:var(--white)}
.reel-dots button[aria-current=true]{box-shadow:0 6px 12px -8px rgba(35,37,43,.5)} /* no outline on the white sticker (Phil 15:02) */
/* the hero reel runs itself; its control bar is hidden (Phil 15:07). Swipe still works. */
.hero-reel .reel-bar{display:none}
@media (max-width:900px){.hero-grid{row-gap:40px}}
/* hero reel: just two arrow tapes hanging over the photo's left and right edges, no dots (Phil 15:08) */
.hero-reel .reel-bar{display:block;position:static;margin:0;pointer-events:none}
.hero-reel .reel-dots{display:none}
.hero-reel .reel-prev,.hero-reel .reel-next{position:absolute;top:50%;z-index:4;pointer-events:auto;margin-top:-18px}
.hero-reel .reel-prev{left:-14px;transform:rotate(-4deg)}
.hero-reel .reel-next{right:-14px;transform:rotate(3deg)}
@media (max-width:560px){.hero-reel .reel-prev{left:-8px}.hero-reel .reel-next{right:-8px}}
.hero-reel .reel-bar{height:0;min-height:0;overflow:visible}
/* phones and tablets: text and button first, the photo reel under the button (Phil 15:10; supersedes 00:20 photo-first) */
@media (max-width:900px){.hero .frame{order:0}.hero-grid{row-gap:44px}}
/* phones: Linda block reads headline → her photo + note → the ten → button, like the hero (Phil 15:14) */
@media (max-width:900px){.say.linda .linda-grid > .linda-side{order:1}.say.linda .linda-grid > .linda-below{order:2}}
@media (max-width:900px){.say.linda .linda-below .linda-more{margin-top:0}} /* note → cards: 36px, not 72 (Phil 15:16) */
@media (max-width:900px){.say.linda .linda-grid{row-gap:22px}}
.kicker.tape{white-space:nowrap;text-wrap:initial;max-width:none;width:fit-content} /* two set lines, tape hugs them (Phil 15:22) */
@media (max-width:760px){.svc > li{align-items:stretch}.svc > li > h3,.svc > li > p{text-align:left;align-self:stretch}} /* card text left-aligned (Phil 15:30) */
/* no rule lines behind the step tapes (Phil 15:44: not part of the brand) */
.steps > li,.steps-long li{border-top:0}
#how .steps{margin-top:56px!important} /* breathing room under the headline (Phil 15:47) */
@media (max-width:760px){#how .steps{margin-top:44px!important}}
.gai .lead b{color:var(--white);font-weight:800} /* bold, not graphite: keeps the white flow (Phil 15:49) */
.gai .quote em,.gai h1 em{color:var(--white)} /* "Get It Together, AI." all white (Phil 15:55) */
.hero .lead b{color:var(--white);font-weight:800}
/* the promise as two tags under the hero copy (Phil 18:03) */
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.hero-tags .tape{font-size:15px;letter-spacing:.14em;padding:10px 14px;box-shadow:0 6px 12px -8px rgba(35,37,43,.5)}
.hero-tags .tape-d{transform:rotate(-3deg)}
.hero-tags .tape-w{transform:rotate(2deg) translateY(4px)}
/* hero tag pair, below the copy (Phil 18:03): black and white alternating, tilted */
.hero-copy .hero-tags{display:flex;gap:12px;margin-top:28px;align-items:center}
.hero-copy .hero-tags .tape{display:block;padding:8px 12px;font-size:15px;line-height:1;white-space:nowrap}
.hero-copy .hero-tags .tape-d{rotate:-2.5deg}
.hero-copy .hero-tags .tape-w{rotate:3.2deg}
/* stacked like the photo tapes: Zero judgment. on top, Total order. under it, overlapping a little (Phil 18:05) */
.hero-tags{flex-direction:column;align-items:flex-start;gap:0}
.hero-tags .tape-d{transform:rotate(-3deg);position:relative;z-index:1}
.hero-tags .tape-w{transform:translateX(24px) rotate(2deg);margin-top:-4px}
.hero-tags{align-self:stretch;width:100%;align-items:flex-start!important;justify-content:flex-start;text-align:left}
/* both hero tapes graphite, so the white button stays the only white thing (Phil 18:18) */
.hero-tags .tape:first-child{transform:rotate(-3deg);position:relative;z-index:1}
.hero-tags .tape:last-child{transform:translateX(24px) rotate(2deg);margin-top:-4px}
@media (max-width:760px){.gai-foot{margin-top:18px}} /* arrow → "Organizing on the ground…" tighter (Phil 18:23) */
/* Straight answers on the blend: the questions sit on a white card, the ask follows (Phil 18:25) */
.faq-blend{flex-direction:column;align-items:stretch}
.faq-blend .faq{background:var(--white);color:var(--dark);border-radius:calc(var(--bin) + 6px);padding:8px 28px 12px}
.faq-blend .faq a.qlink{color:var(--dark)}
.faq-blend h2{color:var(--white)}
.faq-ask{margin-top:84px}
@media (max-width:760px){.faq-blend .faq{padding:4px 18px 8px}.faq-ask{margin-top:60px}}
#words{padding-bottom:88px}
#who .lead{max-width:62ch}
.band#who .quote{color:var(--dark)} .band#who .quote em{background:var(--blend-h);-webkit-background-clip:text;background-clip:text;color:transparent}
#words .words{margin-bottom:0} #words{padding-bottom:88px} @media (max-width:560px){#words{padding-bottom:56px}} /* testimonials band: normal white-band bottom (Phil 18:36) */
@media (max-width:560px){.foot nav[aria-label=Footer]{gap:10px 18px;font-size:15px}} /* five links on one row on phones (Phil 18:37) */
@media (max-width:560px){.foot nav[aria-label=Footer]{gap:8px 12px;font-size:14px}}

/* Facey sticker on the hero photo (Phil 2026-09-30 19:56). Sits over the top-right corner like a sticker on a box. */
.hero-reel .facey-sticker{position:absolute;z-index:4;top:-34px;right:-18px;width:132px;height:132px;transform:rotate(9deg);filter:drop-shadow(0 10px 14px rgba(35,37,43,.32));pointer-events:none}
@media (max-width:560px){.hero-reel .facey-sticker{width:104px;height:104px;top:-28px;right:-4px}}