*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body.home-page{margin:0;color:var(--pt-ink);background:var(--pt-page-background);font:400 16px/1.6 var(--pt-font);-webkit-font-smoothing:antialiased}
.home-wrap{width:min(1280px,100%);padding-inline:48px;margin-inline:auto}
.home-page .siteHeadIn{max-width:1280px;padding-inline:48px}
/* site-header.css's base padding is 22px 28px 0 - zero below - which was invisible while the hero had its own top margin, but now the hero is full-bleed with none, so the logo and nav read as sitting flush against the photo instead of centered in their own bar. */
.home-page .siteHeadIn{padding-bottom:22px}
.home-page a{color:var(--pt-link)}
.home-page a:focus-visible,.home-page button:focus-visible{outline:3px solid var(--pt-accent);outline-offset:5px}
.skip-link{position:absolute;top:-100px;left:20px;z-index:10;padding:10px;background:var(--pt-paper)}
.skip-link:focus{top:10px}
h1,h2,h3,p,figure,dl{margin:0}
h1,h2,h3{font-weight:600}
h1{font-size:clamp(42px,4.5vw,65px);line-height:1.08;letter-spacing:-.055em}
h1 span{color:var(--pt-link)}
h2{font-size:clamp(32px,3.7vw,49px);line-height:1.12;letter-spacing:-.04em}
h3{font-size:18px;line-height:1.35;letter-spacing:-.015em}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--pt-muted);margin-bottom:22px}
.home-hero{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:48px;padding-block:32px 42px}
.hero-copy{padding-bottom:28px}
.hero-actions{display:flex;align-items:flex-start;flex-direction:column;flex-wrap:wrap;gap:20px;margin-top:36px}
.home-page .home-button{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:52px;padding:13px 22px;border-radius:var(--pt-radius-control);font-size:15px;font-weight:600;background:var(--pt-accent);color:var(--pt-on-accent);text-decoration:none;transition:background .15s}
.home-page .home-button{background:var(--pt-action)}
.home-page .home-button:hover{background:var(--pt-action-hover)}
.home-button span{font-size:21px;line-height:1}
.text-link{display:inline-flex;gap:14px;align-items:center;font-size:14px;font-weight:600;text-decoration:none;text-underline-offset:5px}
.text-link:hover{text-decoration:underline}
.browser-note{font-size:12px;color:var(--pt-muted);margin-top:22px;max-width:34ch}
.hero-demo{min-width:0}
.demo-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:0 0 12px;font-size:12px;font-weight:600}
.example-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--pt-muted)}
.trace-stage{overflow:hidden;border-radius:var(--pt-radius-card);background:var(--pt-canvas);box-shadow:var(--pt-shadow)}
.pond-trace{display:block;width:100%;height:auto}
.trace-line{stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.trace-rim{stroke:#c5ffed;fill:#5ac8ad;fill-opacity:.13}
.trace-shelf{stroke:#a4ddff;fill:#458dbf;fill-opacity:.20}
.trace-floor{stroke:#e0edff;fill:#163e7d;fill-opacity:.38}
.trace-labels rect{fill:#18384eee;stroke:#ffffff66;stroke-width:1}
.trace-labels text{fill:white;font:600 19px var(--pt-font)}
[data-mode="photo"] .trace-geometry,[data-mode="photo"] .trace-labels{visibility:hidden}
[data-mode="trace"] .trace-line{fill-opacity:0}
[data-mode="trace"] .trace-labels{visibility:hidden}
.demo-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:15px}
[hidden]{display:none!important}
.view-buttons{display:flex;gap:2px;padding:3px;background:var(--pt-panel-soft);border:1px solid var(--pt-border);border-radius:var(--pt-radius-control)}
.demo-controls button{font:500 12px var(--pt-font);cursor:pointer;min-height:36px;border:0;background:transparent;color:var(--pt-muted);padding:8px 13px;border-radius:5px;white-space:nowrap}
.view-buttons button[aria-pressed="true"]{background:var(--pt-action);color:var(--pt-on-accent)}
.demo-controls button:hover{color:var(--pt-ink);background:var(--pt-hover)}
.view-buttons button[aria-pressed="true"]:hover{background:var(--pt-action-hover);color:var(--pt-on-accent)}
.replay-button span{font-size:16px;margin-left:5px}
.demo-measures{display:grid;grid-template-columns:1.25fr 1fr .75fr;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--pt-border)}
.demo-measures dt{font-size:11px;color:var(--pt-muted)}
.demo-measures dd{margin:4px 0 0;font-size:25px;line-height:1.15;font-weight:600;letter-spacing:-.035em}
.demo-measures dd span{font-size:12px;font-weight:400;letter-spacing:0;color:var(--pt-muted)}
figcaption{font-size:11px;line-height:1.5;color:var(--pt-muted);margin-top:12px}
.workflow-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:22px;margin-bottom:96px}
.workflow-nav a{display:flex;align-items:center;gap:14px;padding:20px 0;border-block:1px solid var(--pt-border);font-size:13px;font-weight:600;text-decoration:none}
.workflow-nav a span:first-child{font-size:11px;font-weight:400;color:var(--pt-muted)}
.workflow-nav a span:last-child{margin-left:auto}
.workflow-nav a:hover{border-color:var(--pt-accent)}
.section-heading{margin-bottom:32px}
.section-heading .eyebrow{margin-bottom:14px}
.landscape-photo{position:relative}
.landscape-photo img{width:100%;height:auto;display:block;max-height:520px;object-fit:cover;border-radius:4px}
.landscape-photo figcaption{position:absolute;bottom:15px;left:18px;margin:0;padding:5px 10px;background:#17374ce6;color:#fff;font-size:10px;border-radius:3px}
.starting-points{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;padding-block:32px 82px}
.starting-points p,.studio-details p,.project-details p{font-size:14px;line-height:1.75;color:var(--pt-muted);margin-top:12px}
.starting-points .text-link{margin-top:16px;font-size:12px}
.plan-section{padding-block:80px;background:var(--pt-panel-soft);border-block:1px solid var(--pt-border)}
.split-section{display:grid;grid-template-columns:.7fr 1.3fr;gap:64px;align-items:center}
.section-copy .eyebrow{margin-bottom:16px}
.feature-list{list-style:none;padding:0;margin:30px 0}
.feature-list li+li{margin-top:22px}
.feature-list h3{font-size:15px}
.feature-list p{font-size:13px;line-height:1.7;color:var(--pt-muted);margin-top:6px;max-width:38ch}
.small-note{font-size:11px;color:var(--pt-muted);margin-top:10px}
.product-figure img{width:100%;height:auto;display:block;border:1px solid var(--pt-border);border-radius:var(--pt-radius-control);box-shadow:var(--pt-shadow)}
.product-figure a,.studio-image a{display:block}
.product-figure figcaption a,.studio-image figcaption a{display:inline;text-underline-offset:3px}
.studio-section{padding-block:86px 72px}
.studio-image img{width:100%;height:auto;display:block;border-radius:4px;border:1px solid var(--pt-border)}
.studio-details{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:30px;max-width:1000px}
.project-section{padding-block:24px 66px}
.project-section h2{font-size:32px}
.project-details{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:30px;padding-top:30px;border-top:1px solid var(--pt-border)}
.estimate-note{font-size:12px;line-height:1.7;color:var(--pt-muted);margin-top:32px;max-width:85ch}
.closing-section{padding-block:52px;display:flex;justify-content:space-between;gap:32px;align-items:center;border-block:1px solid var(--pt-border)}
.closing-section .eyebrow{margin-bottom:14px}
.closing-section>div:last-child{display:flex;flex-direction:column;gap:15px;align-items:center}
.home-page .siteFoot{margin-block:40px 25px}
.home-credits{font-size:11px;margin-bottom:24px}.home-credits a{text-underline-offset:3px}
@media(min-width:1500px){.home-hero{padding-block:70px 55px}.home-wrap{width:min(1392px,100%)}.home-page .siteHeadIn{max-width:1392px}}
@media(max-width:1000px){.home-wrap,.home-page .siteHeadIn{padding-inline:28px}.home-hero{gap:28px;grid-template-columns:.82fr 1.18fr}h1{font-size:43px}.example-label{display:none}.split-section{gap:35px;grid-template-columns:.85fr 1.15fr}.starting-points{gap:26px}.workflow-nav{gap:22px}.demo-measures dt{font-size:10px}.demo-measures dd{font-size:23px}.section-copy .text-link{font-size:12px}}
@media(max-width:760px){.home-hero{grid-template-columns:1fr;gap:32px;padding-top:30px}.hero-copy{padding:0}h1{font-size:clamp(40px,8vw,56px)}.hero-actions{flex-direction:row;align-items:center;gap:22px;margin-top:26px}.browser-note{max-width:none;margin-top:14px}.hero-copy .eyebrow{margin-bottom:16px}.hero-demo{width:100%}.example-label{display:block}.workflow-nav{margin-top:8px;margin-bottom:64px;gap:15px}.workflow-nav a{font-size:11px;gap:8px}.workflow-nav a span:last-child{display:none}.starting-points{gap:24px;padding-bottom:56px;grid-template-columns:1fr}.starting-points>div+div{padding-top:24px;border-top:1px solid var(--pt-border)}.starting-points p{max-width:60ch}.split-section{grid-template-columns:1fr;gap:32px}.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature-list li+li{margin-top:0}.plan-section{padding-block:52px}.studio-section{padding-block:56px}.studio-details{gap:30px}.project-details{grid-template-columns:1fr;gap:25px}.closing-section{align-items:flex-start;flex-direction:column}.closing-section>div:last-child{align-items:flex-start}.landscape-photo img{aspect-ratio:1.45;object-fit:cover;object-position:65% center}.landscape-photo figcaption{bottom:10px;left:10px;font-size:9px}.home-page .siteFoot{margin-top:28px}}
@media(max-width:480px){.home-wrap,.home-page .siteHeadIn{padding-inline:20px}.home-page .siteHeadIn{flex-wrap:wrap;gap:12px}.home-page .siteHeadIn nav{margin-left:0;gap:14px}.home-page .siteHeadIn nav a{font-size:12px}.hero-actions{gap:17px}.hero-actions .text-link{font-size:12px}.home-page .home-button{font-size:13px;padding-inline:16px;gap:16px;min-height:48px}.demo-heading{font-size:11px}.example-label{font-size:8px}.workflow-nav{gap:12px}.workflow-nav a{align-items:flex-start;flex-direction:column;padding-block:14px}.workflow-nav a span:first-child{font-size:10px}.feature-list{display:block}.feature-list li+li{margin-top:20px}.studio-details{grid-template-columns:1fr;gap:25px}.studio-image img{border-radius:0}.demo-measures{gap:10px}.demo-controls button{min-height:42px;padding-inline:12px}.demo-measures dt{font-size:10px}figcaption{font-size:10px}.hero-demo figcaption{margin-top:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:760px){.trace-labels text{font-size:32px}.trace-labels rect{width:140px;height:52px;x:-70px;y:-26px}.trace-labels>g:first-child rect{width:180px;x:-90px}}
@media(max-width:360px){.demo-controls{gap:6px}.demo-controls button{padding-inline:8px}.demo-measures{grid-template-columns:1.2fr 1fr .85fr}.demo-measures dt{font-size:9px}.demo-measures dd{font-size:22px}.hero-actions .home-button{flex-shrink:0}}
@media(min-width:761px) and (max-width:1000px){.trace-labels text{font-size:28px}.trace-labels rect{width:130px;height:46px;x:-65px;y:-23px}.trace-labels>g:first-child rect{width:165px;x:-82px}}

/* Place the animated pond below the introduction at full content width. */
.home-page .home-hero{grid-template-columns:minmax(0,1fr)}
.home-page .home-hero .hero-demo{width:100%}

/* Full-width photograph with the introduction over the lawn beside the pond. */
.home-page .home-hero{position:relative;isolation:isolate;width:100%;max-width:none;padding:0;margin:0 0 44px;gap:0;grid-template-columns:minmax(0,1fr)}
.home-hero .hero-copy,.home-hero .hero-demo{grid-area:1/1}
.home-page .home-hero .hero-demo{position:relative;width:100%;margin:0}
.home-hero .demo-heading{position:absolute;right:24px;top:20px;z-index:1;padding:0}
.home-hero .example-label{color:#f6fafc}
.home-hero .trace-stage{border-radius:0;box-shadow:none}
.home-page .home-hero .hero-copy{position:relative;z-index:2;align-self:start;width:43%;padding:36px 0 36px clamp(24px,5vw,96px)}
.home-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(247,250,252,.61) 0%,rgba(247,250,252,.53) 23%,rgba(247,250,252,.16) 39%,transparent 53%);mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 82%)}
/* The gradient patch behind this text is hardcoded light (rgba white),
   because it exists to give the hero photo contrast, not to follow the
   site's theme. h1 (and its accent span) must therefore ALSO stay
   hardcoded to their light-mode colors - in dark mode var(--pt-ink)
   flips to near-white and var(--pt-link) flips to a pale blue, both of
   which go near-illegible on that same light patch. */
.home-hero h1{color:#19384f}
.home-hero h1 span{color:#326b98}
.home-hero h1{font-size:clamp(36px,4.6vw,76px)}
@media(max-width:760px){
 /* The eyebrow is gone, which frees the vertical space this block spends:
    the title tightens to the top of the photo, and the button drops out of
    the cramped 47%-wide overlay column entirely, into its own row below
    the photo, full width and full size, by making .hero-copy a passthrough
    (display:contents) so its children - now just h1 and .hero-actions - can
    each be placed independently in .home-hero's grid instead of stacking
    together in the same overlay cell. */
 .home-page .home-hero .hero-copy{display:contents}
 .home-hero h1{grid-area:1/1;align-self:start;position:relative;z-index:2;
   margin-top:10px;padding-left:20px;padding-right:16px;
   /* +2 size increments over the old clamp(23px,5.2vw,39px) */
   font-size:clamp(29px,5.8vw,45px)}
 .home-hero .hero-actions{grid-column:1;grid-row:2;margin:16px 20px 0;gap:12px}
 .home-hero .hero-actions .home-button{min-height:56px;font-size:17px;
   padding:15px 22px;gap:10px;width:100%}
 .home-hero .home-button span{font-size:18px}
 .home-hero .demo-heading{display:none}
}

/* Compact content width and two-column, image-led feature stories. */
.home-wrap{width:min(1216px,100%);padding-inline:32px}
.home-page .siteHeadIn{max-width:1216px;padding-inline:32px}
.home-page .home-hero{width:100%;margin:0}
.plan-section{padding-block:46px}
.split-section{grid-template-columns:.65fr 1.35fr;gap:32px}
.feature-list{margin:20px 0}
.feature-list li+li{margin-top:14px}
.feature-list p{margin-top:3px}
.section-copy h2{font-size:clamp(30px,3vw,42px)}
.feature-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 30px;padding-block:48px 60px}
.feature-story{min-width:0}
.feature-art{position:relative;aspect-ratio:8/5;overflow:hidden;background:#e8f0f6;margin-bottom:20px}
.feature-art img{display:block;width:100%;height:100%;object-fit:contain}
.feature-art picture{display:block;width:100%;height:100%}
.studio-art img{object-fit:cover}
.art-caption{position:absolute;bottom:16px;left:18px;font-size:12px;color:#19384f;background:#f7fafc;padding:5px 9px}
.studio-art .art-caption{color:#f7fafc;background:#19384fe0}
.feature-story h2{font-size:27px;letter-spacing:-.025em;margin-bottom:10px}
.feature-story>p{font-size:14px;line-height:1.7;color:var(--pt-muted);max-width:48ch}
@media(min-width:1500px){.home-wrap{width:min(1324px,100%)}.home-page .siteHeadIn{max-width:1324px}.home-page .home-hero{width:100%}}
@media(max-width:760px){.home-wrap{padding-inline:22px}.home-page .home-hero{padding:0}.split-section{grid-template-columns:1fr;gap:24px}.plan-section{padding-block:32px}.feature-showcase{gap:34px 22px;padding-block:36px}.feature-story h2{font-size:23px}.feature-story>p{font-size:13px}.feature-list{display:block}.section-copy .feature-list li+li{margin-top:10px}.product-figure figcaption{margin-top:6px}}
@media(max-width:560px){.feature-showcase{grid-template-columns:1fr}.feature-art{margin-bottom:16px}.feature-story>p{max-width:none}}
@media(max-width:760px){.home-page .home-hero{width:100%}}