/* Website design as an editorial portfolio within the studio. */
.websites-page .web-hero { padding-bottom:0; border-bottom:0; }
.web-hero .service-breadcrumb { margin-bottom:16px; }
.web-hero-grid { display:grid; grid-template-columns:.88fr 1.12fr; align-items:center; gap:64px; }
.websites-page .web-hero h1 { max-width:none; margin:0 0 26px; font-size:clamp(68px,6.4vw,92px); line-height:.98; letter-spacing:-.065em; }
.websites-page .web-hero h1 em { letter-spacing:-.055em; }
.web-hero-copy { min-width:0; padding-block:12px 25px; }
.web-hero-copy .lead { max-width:37ch; margin-bottom:0; font-size:19px; line-height:1.6; letter-spacing:-.015em; color:var(--muted); }
.web-hero-copy .hero-actions { gap:20px 30px; margin-top:28px; }
.web-hero-copy .button { font-size:14px; padding:17px 23px; gap:30px; }
.web-hero-copy .text-link { font-size:14px; }
.web-hero-showcase { position:relative; min-width:0; aspect-ratio:1.16; background:#e5e8df; isolation:isolate; }
.web-hero-showcase::before { content:''; position:absolute; inset:18px; border:1px solid rgb(58 69 48 / .13); z-index:-1; }
.web-showcase-top { position:absolute; inset:30px 32px auto; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:10px; text-transform:uppercase; letter-spacing:.11em; color:#53604b; }
.web-showcase-top>span:last-child { font-size:24px; line-height:1; }
.web-hero-window { position:absolute; display:block; overflow:hidden; background:white; text-decoration:none; border:1px solid rgb(42 48 36 / .16); box-shadow:0 18px 35px -15px rgb(28 36 24 / .3); transition:transform 550ms var(--motion-ease),box-shadow 550ms var(--motion-ease); }
.web-hero-window--main { width:76%; top:13%; right:6%; }
.web-hero-window--detail { width:46%; left:5%; bottom:10%; }
.web-window-bar { display:flex; align-items:center; gap:12px; padding:8px 11px; font-size:8px; line-height:1.2; color:var(--muted); background:#fbfaf7; border-bottom:1px solid #e5e5df; }
.web-hero-window img { width:100%; height:auto; }
.web-browser-dots { display:flex; flex-shrink:0; gap:4px; }
.web-browser-dots i { width:4px; height:4px; border:1px solid #9da196; border-radius:50%; }
.web-showcase-caption { position:absolute; right:7%; bottom:8%; width:34%; margin:0; font-size:11px; line-height:1.55; color:#4b5644; }
.web-showcase-caption em { font-size:17px; letter-spacing:-.03em; }
.web-hero-foot { display:flex; align-items:center; justify-content:space-between; gap:20px 35px; padding:29px 0; margin-top:48px; border-block:1px solid var(--rule); }
.web-hero-foot>p { margin:0; font-size:12px; color:var(--muted); }
.web-hero-foot nav { display:flex; gap:36px; }
.web-hero-foot a { display:flex; align-items:center; gap:18px; min-height:30px; text-decoration:none; font-size:12px; }
.web-hero-foot a:hover { color:var(--red); }
.web-hero-foot a>span { color:var(--red); font-size:9px; }
.web-portfolio { padding-block:84px 90px; }
.web-work-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px 80px; margin-bottom:42px; }
.web-work-heading .eyebrow { color:var(--red); margin-bottom:20px; }
.web-work-heading h2 { font-size:var(--section-title); margin:0; line-height:1.04; }
.web-work-intro { justify-self:end; max-width:37ch; padding-bottom:3px; }
.web-work-intro>p:first-child { font-size:19px; line-height:1.6; margin-bottom:16px; }
.web-work-note { margin:0; font-size:12px; color:var(--muted); line-height:1.6; }
.web-filter-bar { display:flex; align-items:center; justify-content:space-between; gap:16px 24px; border-block:1px solid var(--rule); margin-bottom:40px; }
.web-filters { display:flex; flex-wrap:wrap; gap:0 26px; }
.web-filters button { appearance:none; display:inline-flex; align-items:center; gap:8px; min-height:58px; padding:10px 0; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:12px; line-height:1.4; font-weight:600; cursor:pointer; }
.web-filters button>span { font-size:9px; font-weight:400; font-variant-numeric:tabular-nums; }
.web-filters button:hover,.web-filters button[aria-pressed="true"] { color:var(--red); }
.web-filters button[aria-pressed="true"] { border-bottom-color:var(--red); }
.web-project-count { flex-shrink:0; margin:0; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.web-project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 40px; }
.web-project { min-width:0; --project-mat:#e7e9e2; scroll-margin-top:30px; }
.web-project[hidden],.web-filters[hidden] { display:none!important; }
.web-project-link { display:block; height:100%; text-decoration:none; }
.web-project-stage { position:relative; display:flex; align-items:center; min-width:0; padding:38px 32px; background:var(--project-mat); overflow:hidden; }
.web-browser { width:100%; overflow:hidden; background:white; border:1px solid rgb(38 44 34 / .16); box-shadow:0 15px 24px -17px rgb(24 32 22 / .35); transition:transform 650ms var(--motion-ease),box-shadow 650ms var(--motion-ease); }
.web-browser-bar { display:flex; align-items:center; gap:12px; min-height:26px; padding:6px 10px; border-bottom:1px solid #e4e4df; background:#fbfaf8; color:#62635d; font-size:9px; line-height:1.3; }
.web-domain { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.web-browser-bar>span:last-child { font-size:13px; }
.web-browser>img { display:block; width:100%; height:auto; aspect-ratio:1280/900; object-fit:cover; object-position:top; }
.web-stage-action { position:absolute; right:20px; bottom:18px; padding:8px 13px; background:var(--ink); color:var(--paper); font-size:11px; opacity:0; transform:translateY(8px); transition:opacity 220ms ease,transform 350ms var(--motion-ease); }
.web-project-info { padding-top:24px; }
.web-project-sector { display:flex; gap:12px; align-items:baseline; margin:0 0 12px; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.07em; line-height:1.6; text-transform:uppercase; }
.web-project-index { color:var(--red); font-size:9px; font-variant-numeric:tabular-nums; }
.web-project-heading { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.web-project-heading h3 { margin:0; font-size:30px; font-weight:500; letter-spacing:-.04em; line-height:1.12; }
.web-project-arrow { font-size:24px; line-height:1.2; }
.web-project-description { max-width:53ch; margin:15px 0 22px; color:var(--muted); font-size:15px; line-height:1.65; }
.web-project-tags { display:flex; flex-wrap:wrap; gap:6px 16px; list-style:none; padding:13px 0 0; margin:0; border-top:1px solid var(--rule); color:var(--muted); font-size:10px; line-height:1.6; }
.web-project-visit { display:none; }
.web-project--featured { grid-column:1/-1; }
.web-project--featured .web-project-link { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:44px; align-items:center; }
.web-project--featured .web-project-stage { padding:46px 42px; }
.web-project--featured .web-project-info { padding:10px 0; }
.web-project--featured h3 { font-size:clamp(30px,3vw,42px); }
.web-project--featured .web-project-arrow { display:none; }
.web-project--featured .web-project-visit { display:flex; align-items:center; justify-content:space-between; max-width:190px; margin-top:28px; padding-bottom:9px; border-bottom:1px solid var(--ink); font-size:12px; }
.web-project-link:hover h3,.web-project-link:hover .web-project-arrow { color:var(--red); }
.web-project-link:focus-visible { outline-offset:7px; }
.web-project-link:focus-visible .web-stage-action { opacity:1; transform:none; }
#website-orlando-dreamers { --project-mat:#dce3e8; }
#website-fav-summit { --project-mat:#e2e9ec; }
#website-florida-policy-project { --project-mat:#e7e5df; }
#website-turning-leaf { --project-mat:#e2e6da; }
#website-endoglow { --project-mat:#e3e9f0; }
#website-lifeboat { --project-mat:#e7dfd5; }
#website-fcca-cert { --project-mat:#dde4df; }
#website-pure-infinity { --project-mat:#dce5e7; }
#website-sunshine-housing { --project-mat:#eae4d9; }
#website-paradise-dives { --project-mat:#dce7e9; }
#website-education-foundation { --project-mat:#e7e2d8; }
#website-kja { --project-mat:#e0e4df; }
#website-balancing-act { --project-mat:#e7e0d7; }
#website-base-camp { --project-mat:#e8e2da; }
#website-johns-lake { --project-mat:#dfe5dd; }
.web-project-grid[data-filtered="true"] .web-project--featured { grid-column:auto; }
.web-project-grid[data-filtered="true"] .web-project--featured .web-project-link { display:block; }
.web-project-grid[data-filtered="true"] .web-project--featured .web-project-stage { padding:38px 32px; }
.web-project-grid[data-filtered="true"] .web-project--featured .web-project-info { padding:24px 0 0; }
.web-project-grid[data-filtered="true"] .web-project--featured h3 { font-size:30px; }
.web-project-grid[data-filtered="true"] .web-project--featured .web-project-visit { display:none; }
.web-project-grid[data-filtered="true"] .web-project--featured .web-project-arrow { display:block; }
.web-gallery-invitation { display:flex; align-items:center; justify-content:space-between; gap:24px 40px; margin-top:70px; padding-block:32px; border-block:1px solid var(--rule); }
.web-gallery-invitation p { font-size:23px; letter-spacing:-.03em; margin:0; }
.web-gallery-invitation em { font-size:26px; }
.web-gallery-invitation .text-link { font-size:13px; flex-shrink:0; }
.web-backend { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; margin-top:64px; padding:52px; background:#29362e; color:var(--paper); }
.web-backend h2 { font-size:var(--compact-title); line-height:1.08; margin:0; }
.web-backend .eyebrow { color:#c3ccbd; }
.web-backend .lead { font-size:18px; line-height:1.6; color:#e0e4d9; }
.web-backend .text-link { font-size:13px; }
.web-backend .text-link:hover { color:#fff; }
.web-backend a:focus-visible { outline-color:var(--paper); }
.web-capabilities {
  border-top:1px solid var(--rule);
}
.web-capabilities .service-intro {
  align-items:end;
  margin-bottom:35px;
}
.web-capabilities .service-intro h2,
.web-capabilities .service-intro .lead {
  margin-bottom:0;
}
.web-capability-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 48px;
  list-style:none;
  margin:0;
  padding:0;
}
.web-capability-list>li {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-content:start;
  gap:12px 20px;
  padding:28px 0 32px;
  border-top:1px solid var(--rule);
}
.web-capability-list .step-number {
  grid-column:1;
  grid-row:1;
  padding-top:5px;
}
.web-capability-list>li>div {
  grid-column:2;
  display:grid;
  gap:12px;
}
.web-capability-list h3 {
  grid-column:2;
  margin:0;
  font-size:27px;
  line-height:1.15;
  letter-spacing:-.03em;
}
.web-capability-list p {
  grid-column:2;
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}
.web-capability-list>li>a,
.web-capability-list>li>div>a {
  grid-column:2;
  justify-self:start;
  font-size:14px;
}
.web-capability-list>li>div h3,
.web-capability-list>li>div p,
.web-capability-list>li>div>a {
  grid-column:auto;
}
.web-studio-band {
  background:var(--sage);
}
.web-studio-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:80px;
}
.web-studio-grid h2 {
  max-width:18ch;
  font-size:var(--section-title);
}
.web-studio-grid>div>p:not(.eyebrow):not(.lead) {
  max-width:48ch;
  font-size:17px;
}
.web-studio-person {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid var(--rule);
}
.web-studio-person>img,
.web-studio-person>a>img {
  flex-shrink:0;
  width:100px;
  height:100px;
  object-fit:cover;
  object-position:center 25%;
}
.web-studio-person>div {
  min-width:0;
}
.web-studio-person strong,
.web-studio-person h3 {
  display:block;
  margin:0 0 4px;
  font-size:21px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.025em;
}
.web-studio-person p {
  margin:0 0 6px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.web-studio-person .text-link,
.web-studio-person .small-link {
  min-height:36px;
  font-size:13px;
  gap:12px;
}
.web-build-steps {
  list-style:none;
  margin:0;
  padding:0;
}
.web-build-steps>li {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px 20px;
  border-top:1px solid var(--rule);
  padding:24px 0 27px;
}
.web-build-steps>li:first-child {
  border-top-color:var(--ink);
}
.web-build-steps .step-number {
  grid-column:1;
  grid-row:1;
  padding-top:4px;
}
.web-build-steps>li>div {
  grid-column:2;
  display:grid;
  gap:10px;
}
.web-build-steps h3 {
  grid-column:2;
  margin:0;
  font-size:27px;
  line-height:1.15;
}
.web-build-steps p {
  grid-column:2;
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}
.web-build-steps>li>div h3,
.web-build-steps>li>div p {
  grid-column:auto;
}
.web-pricing .service-intro {
  align-items:end;
  margin-bottom:32px;
}
.web-pricing .service-intro h2,
.web-pricing .service-intro .lead {
  margin-bottom:0;
}
.web-rates {
  border-block:1px solid var(--rule);
}
.web-rates>summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:82px;
  padding:23px 0;
  list-style:none;
  cursor:pointer;
  font-size:20px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.02em;
}
.web-rates>summary::-webkit-details-marker {
  display:none;
}
.web-rates>summary:hover {
  color:var(--red);
}
.web-rates>summary .rate-indicator {
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  font-size:28px;
  line-height:1;
  font-weight:400;
}
.web-rates>summary .rate-indicator::before {
  content:"+";
}
.web-rates[open]>summary .rate-indicator::before {
  content:"−";
}
.web-rates .service-pricing {
  padding-top:24px;
  padding-bottom:26px;
  border-top:1px solid var(--rule);
}
.web-rates>.text-link {
  margin-bottom:28px;
}


@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .web-hero-window:hover { transform:translateY(-5px); box-shadow:0 24px 40px -15px rgb(28 36 24 / .32); }
  .web-project-link:hover .web-browser { transform:translateY(-4px); box-shadow:0 22px 32px -18px rgb(24 32 22 / .35); }
  .web-project-link:hover .web-browser>img { transform:none; }
  .web-project-link:hover .web-stage-action { opacity:1; transform:none; }
}
@media(min-width:801px) {
  .web-project:not(.web-project--featured):nth-child(5n + 3),
  .web-project:not(.web-project--featured):nth-child(5n + 5) { padding-top:64px; }
  .web-project-grid[data-filtered="true"] .web-project { padding-top:0; }
}
@media(max-width:1150px) {
  .web-hero-grid { gap:30px; }
  .websites-page .web-hero h1 { font-size:clamp(62px,7vw,80px); }
  .web-hero-copy .lead { font-size:17px; }
  .web-hero-showcase { aspect-ratio:1.08; }
  .web-hero-window--main { top:16%; width:76%; right:6%; }
  .web-hero-window--detail { width:48%; bottom:14%; }
  .web-showcase-caption { width:auto; bottom:5%; left:7%; right:auto; font-size:10px; }
  .web-showcase-caption br { display:none; }
  .web-showcase-caption em { font-size:14px; margin-left:4px; }
  .web-filters { gap:0 19px; }
  .web-filters button { font-size:11px; }
  .web-project-grid { gap:50px 30px; }
  .web-project-stage,.web-project--featured .web-project-stage { padding:30px 24px; }
  .web-project--featured .web-project-link { grid-template-columns:1.6fr 1fr; gap:30px; }
  .web-project-heading h3 { font-size:27px; }
  .web-project--featured h3 { font-size:32px; }
  .web-project-description { font-size:14px; }
  .web-capability-list { column-gap:36px; }
  .web-studio-grid { gap:50px; }
}
@media(max-width:800px) {
  .web-hero .service-breadcrumb { margin-bottom:20px; }
  .web-hero-grid { grid-template-columns:1fr; gap:28px; }
  .websites-page .web-hero h1 { font-size:clamp(64px,10vw,86px); }
  .web-hero-copy { padding:0; }
  .web-hero-copy .lead { max-width:43ch; font-size:18px; }
  .web-hero-copy .hero-actions { margin-top:24px; }
  .web-hero-showcase { width:100%; aspect-ratio:1.18; max-width:640px; justify-self:center; }
  .web-hero-window--main { top:14%; right:6%; width:75%; }
  .web-hero-window--detail { bottom:8%; width:46%; }
  .web-showcase-caption { left:auto; right:5%; width:34%; bottom:7%; font-size:11px; }
  .web-showcase-caption br { display:block; }
  .web-showcase-caption em { margin-left:0; font-size:17px; }
  .web-showcase-top { inset:22px 26px auto; font-size:9px; }
  .web-hero-foot { margin-top:30px; padding-block:20px; flex-wrap:wrap; gap:10px; }
  .web-hero-foot>p { width:100%; }
  .web-hero-foot nav { flex:1; justify-content:space-between; gap:18px; }
  .web-hero-foot a { gap:12px; }
  .web-portfolio { padding-block:55px 60px; }
  .web-work-heading { grid-template-columns:1fr; gap:24px; margin-bottom:30px; }
  .web-work-intro { justify-self:start; max-width:48ch; }
  .web-work-intro>p:first-child { font-size:17px; margin-bottom:10px; }
  .web-filter-bar { align-items:start; flex-direction:column; gap:0; padding-bottom:12px; margin-bottom:30px; }
  .web-filters { gap:0 20px; }
  .web-filters button { font-size:12px; min-height:46px; }
  .web-project-count { margin-top:10px; }
  .web-project-grid { grid-template-columns:1fr; gap:44px; }
  .web-project--featured { grid-column:auto; }
  .web-project--featured .web-project-link { display:block; }
  .web-project-stage,.web-project--featured .web-project-stage,.web-project-grid[data-filtered="true"] .web-project--featured .web-project-stage { padding:36px 30px; }
  .web-project-info,.web-project--featured .web-project-info { padding:22px 0 0; }
  .web-project-heading h3,.web-project--featured h3 { font-size:30px; }
  .web-project--featured .web-project-arrow { display:block; }
  .web-project--featured .web-project-visit { display:none; }
  .web-project-description { font-size:15px; }
  .web-gallery-invitation { flex-direction:column; align-items:start; gap:16px; margin-top:45px; padding-block:24px; }
  .web-backend { grid-template-columns:1fr; gap:24px; padding:32px; margin-top:45px; }
  .web-capabilities .service-intro,.web-pricing .service-intro { gap:22px; margin-bottom:28px; }
  .web-capability-list { grid-template-columns:1fr; }
  .web-capability-list>li { padding-block:25px 28px; }
  .web-studio-grid { grid-template-columns:1fr; gap:38px; }
  .web-studio-grid h2 { max-width:21ch; }
  .web-studio-person { margin-top:28px; }
  .web-rates>summary { min-height:76px; font-size:18px; padding-block:20px; }
  .web-rates .service-pricing { gap:20px; }
}
@media(max-width:540px) {
  .websites-page .web-hero h1 { font-size:clamp(59px,15vw,76px); }
  .web-hero-copy .lead { font-size:17px; max-width:37ch; }
  .web-hero-copy .hero-actions { gap:24px; }
  .web-hero-copy .button { font-size:13px; padding:15px 18px; gap:23px; }
  .web-hero-showcase { aspect-ratio:1.03; }
  .web-hero-showcase::before { inset:12px; }
  .web-showcase-top { inset:22px 22px auto; font-size:8px; letter-spacing:.06em; }
  .web-showcase-top>span:last-child { font-size:18px; }
  .web-hero-window--main { width:76%; top:17%; right:6%; }
  .web-hero-window--detail { width:48%; bottom:13%; left:6%; }
  .web-window-bar { padding:6px 7px; font-size:6px; gap:6px; }
  .web-window-bar .web-browser-dots { gap:2px; }
  .web-window-bar .web-browser-dots i { width:3px; height:3px; }
  .web-showcase-caption { width:auto; right:auto; left:7%; bottom:5%; font-size:9px; }
  .web-showcase-caption br { display:none; }
  .web-showcase-caption em { font-size:12px; margin-left:4px; }
  .web-hero-foot a { font-size:10px; gap:7px; }
  .web-hero-foot>p { font-size:11px; }
  .web-hero-foot nav { gap:10px; }
  .web-work-heading h2 { font-size:42px; }
  .web-filters { gap:0 18px; }
  .web-filters button { font-size:11px; }
  .web-project-stage,.web-project--featured .web-project-stage,.web-project-grid[data-filtered="true"] .web-project--featured .web-project-stage { padding:27px 20px; }
  .web-browser-bar { min-height:22px; padding:5px 7px; font-size:7px; gap:8px; }
  .web-browser-dots { gap:3px; }
  .web-browser-dots i { width:3px; height:3px; }
  .web-project-heading h3,.web-project--featured h3,.web-project-grid[data-filtered="true"] .web-project--featured h3 { font-size:27px; }
  .web-project-sector { font-size:9px; margin-bottom:10px; }
  .web-project-tags { gap:6px 13px; }
  .web-gallery-invitation p { font-size:21px; }
  .web-gallery-invitation em { display:block; font-size:25px; }
  .web-backend { padding:28px 24px; }
  .web-capability-list>li,.web-build-steps>li { grid-template-columns:22px minmax(0,1fr); column-gap:14px; }
  .web-capability-list h3,.web-build-steps h3 { font-size:25px; }
  .web-studio-person { gap:17px; }
  .web-studio-person>img,.web-studio-person>a>img { width:80px; height:80px; }
  .web-studio-person strong,.web-studio-person h3 { font-size:20px; }
  .web-rates>summary { gap:15px; }
}
@media(prefers-reduced-motion:reduce) {
  .web-hero-window,.web-browser,.web-stage-action { transition:none; }
}
@media print {
  .web-filter-bar,.web-hero-showcase { display:none; }
  .web-project { break-inside:avoid; }
  .web-studio-band,.web-backend { background:transparent; color:black; }
  .web-backend .eyebrow,.web-backend .lead { color:black; }
}