/* 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 */
.gap{background-image:var(--binsvg);background-size:var(--cell) var(--cell);background-position:var(--gx) 0;background-repeat: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:60px 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:48px 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:56px 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:40px 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}