:root{--paper:#f4f1e9;--ink:#000;--accent:#edb58d;--muted:#b9b5ad;--line:#b7ad9b;--serif:Georgia,"Times New Roman",serif;--sans:Arial,Helvetica,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px;background:var(--paper)}body{margin:0;background:var(--paper);color:#171714;font:16px/1.5 var(--sans);overflow-x:hidden}.public-home main{display:block;min-width:0}body::before{content:"";position:fixed;inset:0 auto auto 0;width:var(--progress,0%);height:2px;background:var(--accent);z-index:100;pointer-events:none}button,input,textarea{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #c68052;outline-offset:5px}[hidden]{display:none!important}.skip{position:fixed;z-index:1000;left:12px;top:-90px;padding:12px;background:#fff;color:#000}.skip:focus{top:12px}
.site-header{position:absolute;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:22px;padding:max(20px,env(safe-area-inset-top)) max(5vw,env(safe-area-inset-right)) 20px max(5vw,env(safe-area-inset-left));color:var(--paper)}.brand{display:inline-flex;min-width:132px;min-height:48px;align-items:center;margin-right:auto}.company-logo-panel{display:inline-flex;align-items:center;justify-content:center;background:transparent;overflow:visible}.company-logo,.brand .company-logo{display:block;width:132px;height:auto;max-height:none;aspect-ratio:3/1;object-fit:contain;filter:none}.desktop-menu{display:flex;align-items:center;gap:30px;margin-left:0;font-size:14px}.desktop-menu a,.desktop-menu button{min-height:44px;padding:10px 0;border:0;background:none;color:inherit;text-shadow:0 1px 8px #000;white-space:nowrap}.site-header .language-control{color:inherit;margin-left:0}.site-header .language-trigger{border:1px solid #ffffff38}.menu-button{display:none;flex:0 0 44px;width:44px;height:44px;border:0;background:transparent;padding:10px;color:inherit}.menu-button span{display:block;width:25px;height:1px;margin:6px auto;background:currentColor;transition:transform .25s}.menu-button[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-button[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.menu-panel{position:absolute;top:82px;left:5%;right:5%;padding:20px;background:#000;color:var(--paper);box-shadow:0 18px 45px #0005}.menu-panel nav{display:grid}.menu-panel a,.menu-panel button{display:block;width:100%;min-height:48px;padding:12px 0;border:0;border-bottom:1px solid #ffffff2b;background:transparent;color:inherit;text-align:left}
.hero{position:relative;min-height:96svh;display:flex;align-items:end;padding:180px 5% 65px;background:#000;color:var(--paper);isolation:isolate;overflow:hidden}/* Not will-change:transform. A promoted layer is rasterised once and then
   scaled by the compositor, and on a Windows laptop at 150% scaling -- a
   fractional device pixel ratio -- that rasterisation is done at the wrong
   scale and the picture goes soft, differently in a maximised window and a
   restored one. The parallax is a few pixels of translation on scroll; it
   does not need a layer of its own. 11 September 2026. */
/* A picture element wrapping the hero must not become a box of its own: the
   img inside it is absolutely positioned and the wrapper has no business in
   the layout. */
picture{display:contents}
/* The hero fills its band exactly. It used to be 130 pixels taller so it could
   slide as the page scrolled, and those 130 pixels were paid for out of the
   photograph: on a telephone the band went from 0.525 wide-to-tall to 0.447,
   and cover threw away a seventh more of the picture's width to cover it. A
   scroll effect is not worth a seventh of a photograph nobody can make bigger.
   Measured and dropped on 12 September 2026. */
.hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1}.hero-copy{position:relative;max-width:720px;text-shadow:0 2px 14px #000}.eyebrow{font-size:11px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;margin:0 0 22px}.hero .eyebrow{color:var(--accent)}h1,h2,h3,p{margin-top:0;overflow-wrap:anywhere}h1,h2{white-space:pre-line}h1{font:400 clamp(46px,6vw,88px)/1.02 var(--serif);letter-spacing:-.035em;margin-bottom:25px;max-width:13ch}h2{font:400 clamp(36px,4vw,60px)/1.08 var(--serif);letter-spacing:-.025em;margin-bottom:25px}h3{font:400 27px/1.18 var(--serif);margin-bottom:10px}.hero-copy>p:not(.eyebrow){max-width:520px;font-size:18px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.primary-action,.secondary-action{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 23px;border:1px solid currentColor;background:transparent;color:inherit}.hero .primary-action{background:#000b;border-color:var(--accent)}.hero .secondary-action{background:#0008;border-color:#eee6}.primary-action,.secondary-action,.textlink{transition:background .25s,color .25s,transform .25s}.primary-action:hover,.secondary-action:hover{transform:translateY(-2px)}
.section{padding:100px 7%}.about{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}.about>*,.stone>*,.contact>*{min-width:0}.about .intro{font:400 27px/1.45 var(--serif);max-width:540px}.facts{border-top:1px solid var(--line)}.fact{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:38px 1fr;gap:12px}.fact>small{color:#7c6755}.fact h3{font-size:20px;margin:0}.fact p{margin:5px 0 0;color:#605b53;font-size:14px}.black{background:#000;color:var(--paper)}#projects{padding:90px 0 54px;overflow:hidden}.section-top{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:0 7% 28px}.section-top p{max-width:430px;color:var(--muted);margin-bottom:5px}.project-scroll-controls{display:flex;justify-content:flex-end;gap:8px;padding:0 7% 16px}.project-scroll-controls button{display:grid;width:48px;height:48px;padding:0;border:1px solid #ffffff5c;border-radius:50%;background:#111;color:#fff;place-items:center;font-size:30px}.project-scroll-controls button:disabled{opacity:.3;cursor:default}.projects{display:grid;grid-auto-flow:column;grid-auto-columns:min(34vw,430px);gap:16px;padding:0 7%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:7%;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#ffffff45 transparent;touch-action:pan-x pan-y}.project{position:relative;height:min(78svh,820px);min-height:580px;background:#000;overflow:hidden;scroll-snap-align:start}.project-image{display:block;width:100%;height:100%;padding:0;border:0;background:#111;color:var(--paper);overflow:hidden}.project-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.6s cubic-bezier(.2,.6,.2,1),filter 1s}.project-image:hover img{transform:scale(1.035)}.project[data-project-id="project-1"] .project-image img{object-fit:contain}.caption{position:absolute;inset:auto 0 0;padding:70px clamp(22px,4vw,54px) 28px;background:linear-gradient(transparent,#000e 48%);pointer-events:none}.caption .eyebrow{color:var(--muted);margin-bottom:7px}.caption h3{max-width:20ch;margin-bottom:7px;font-size:clamp(28px,3vw,44px);line-height:1.05}.caption>p:not(.eyebrow){max-width:470px;margin-bottom:10px;color:#e1ddd4;font-size:14px;line-height:1.4}.caption .project-inspiration{pointer-events:auto}.project-inspiration,.photo-use{display:grid;width:48px;height:48px;padding:0;border:0;background:transparent;color:#fff;place-items:center}.project-select-circle{display:grid;width:22px;height:22px;border:1px solid #fff;border-radius:50%;background:#0002;color:#fff;place-items:center;font:700 12px/1 var(--sans)}.project-inspiration[aria-pressed=true] .project-select-circle,.photo-use[aria-pressed=true] .project-select-circle{background:#fff;color:#000}.textlink{display:inline-block;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid #8f7e6e;background:none;color:inherit}.textlink:hover{color:#c68052;border-color:#c68052}
.stone{display:grid;grid-template-columns:.78fr 1.22fr;gap:8%;align-items:start}.stone-copy{position:sticky;top:90px}.stone-copy>p:last-child{color:#605b53;max-width:440px}.preference-selector{min-width:0}.preference-selector>h3{font-size:32px}.preference-note{font-size:13px;margin:18px 0;max-width:620px;color:#605b53}#preference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.preference-card{min-width:0;padding:5px;border:0;background:transparent;color:inherit;text-align:left;transition:transform .3s}.preference-card:hover{transform:translateY(-5px)}.preference-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin-bottom:12px;border-radius:16px}.preference-card>span{display:block;font:17px/1.3 var(--serif)}.preference-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:20px;font-size:13px}.preference-error{padding:18px;border:1px solid #9d6c51;color:#70402b}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;border-top:1px solid var(--line)}.contact p{max-width:440px;color:#605b53}.contact .primary-action{background:#000;color:var(--paper);border-color:#000}.steps{padding:0;list-style:none;counter-reset:n}.steps li{border-bottom:1px solid var(--line);padding:20px 0;display:flex;gap:24px}.steps li::before{counter-increment:n;content:"0" counter(n);font-size:12px;color:#8a6a52;padding-top:5px}body>footer{display:block;padding:56px 7% 28px;border-top:1px solid var(--line);font-size:12px}
dialog{border:0;padding:0}dialog::backdrop{background:#000d}.photo-dialog{inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:0;background:#000;color:var(--paper);overflow:hidden}.photo-dialog[open]{display:grid;grid-template-columns:70px minmax(0,1fr) 70px;grid-template-rows:minmax(0,1fr) auto;align-items:center;animation:viewer-in .4s ease}.photo-dialog::backdrop{background:#000}.photo-dialog figure{grid-column:2;grid-row:1;margin:0;min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto}.photo-dialog figure img{width:100%;height:100%;min-height:0;object-fit:contain}.photo-dialog figcaption{padding:14px;text-align:center}.photo-dialog figcaption h3{margin:0;font-size:25px}.photo-dialog figcaption p{margin:5px 0 0;color:#c8c3ba;font-size:13px}.photo-close{position:absolute;right:24px;top:24px;z-index:3;width:48px;height:48px;border:1px solid #fff5;border-radius:50%;background:#0008;color:#fff;font-size:28px}.photo-nav{width:50px;height:50px;justify-self:center;border:1px solid #fff5;border-radius:50%;background:#0008;color:#fff;font-size:34px}.photo-nav.previous{grid-column:1;grid-row:1}.photo-nav.next{grid-column:3;grid-row:1}.photo-use{grid-column:2;grid-row:2;justify-self:center;display:grid;width:48px;height:48px;margin-bottom:16px;padding:0;border:1px solid #ffffff73;border-radius:50%;background:#000;color:#fff;place-items:center;font-size:25px;line-height:1}.photo-use[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}@keyframes viewer-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.contact-dialog{width:min(680px,calc(100% - 24px));max-height:calc(100% - 24px);margin:auto;padding:26px;background:#eee9de;color:#1c1a17;overflow-y:auto;overscroll-behavior:contain}.contact-dialog::backdrop{background:#11100dd1}.contact-dialog header{display:flex;align-items:center;justify-content:space-between}.contact-dialog header button{min-width:44px;min-height:44px;border:0;background:none;text-decoration:underline;text-underline-offset:5px}.contact-dialog h2{font:400 clamp(2rem,4vw,3rem)/1.1 var(--serif);letter-spacing:-.035em;margin:1rem 0 1.5rem}.contact-dialog form{display:grid;gap:16px}.contact-dialog label{display:grid;gap:7px;font-size:12px;letter-spacing:.04em}.contact-dialog .brief-help{font-size:.875rem;line-height:1.5;letter-spacing:normal}.contact-dialog input,.contact-dialog textarea{width:100%;padding:14px;border:1px solid #aaa294;background:#faf8f2;font-size:16px}.contact-dialog input{border:0;border-bottom:1px solid #aaa294;background:transparent;border-radius:0}.contact-dialog textarea{resize:vertical}.brief-composer{min-width:0;padding:.5rem;border:1px solid #aaa294;border-radius:22px;background:#faf8f2}.contact-dialog .brief-composer textarea{padding:.5rem;border:0;border-radius:0;background:transparent;resize:none;box-shadow:none!important;outline:none!important}.brief-tools{display:flex;align-items:center;gap:.25rem}.contact-dialog .brief-icon{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;border-radius:50%;background:transparent;color:inherit}.brief-tools [hidden]{display:none}#brief-record{margin-left:auto}.contact-dialog #brief-send{background:#e2ded6;color:#8b877f;transition:background .15s,color .15s}.contact-dialog #brief-send.ready{background:var(--accent);color:#241c16}.brief-composer #brief-attachments,.brief-composer #brief-error{padding-inline:.5rem}.brief-file{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.5rem 0;overflow-wrap:anywhere}.brief-file audio{width:100%;max-width:100%}.brief-file span{flex:1;min-width:0}#brief-error:empty,#inquiry-status:empty{display:none}#brief-error{color:#903b29}.brief-preferences{margin:0 0 18px;padding:14px;border:1px solid var(--line);background:#f7f2e8}.brief-preferences>strong{display:block;margin-bottom:10px}.brief-preferences>div{display:grid;gap:8px}.selection-item{display:grid;grid-template-columns:46px 1fr 44px;gap:10px;align-items:center;font-size:13px}.selection-item img{display:block;width:46px;height:46px;object-fit:cover;border-radius:8px}.selection-item button{width:44px;height:44px;border:0;background:transparent;font-size:22px}.scroll-piece{will-change:transform,opacity;transition:none!important}.scroll-piece:focus-visible{opacity:1!important;transform:none!important}
@media(max-width:900px){.desktop-menu{display:none}.menu-button{display:block}.site-header .language-control{margin-left:0}.hero{padding-inline:7%}.section{padding:72px 7%}.about,.stone,.contact{grid-template-columns:1fr;gap:36px}.stone-copy{position:static}.section-top{display:block}.project{height:min(74svh,720px);min-height:520px}.project-image{height:100%;min-height:0}.caption{padding:58px 24px 22px}.caption h3{font-size:32px}}
/* On a telephone the whole hero photograph is shown, not a slice of it.
   Cover fills the band by throwing away whatever does not fit. The band on a
   telephone is about 0.53 wide-to-tall and the photograph is 1.91: measured on
   the live site, 27% of its width was reaching the screen and the rest was
   being cut off the sides. So on a telephone the picture is contained -- all
   of it, centred -- and the band behind it is the same photograph again,
   blurred and darkened, so the screen is still full of the room's own light
   rather than a black margin. The blurred copy is whatever the browser already
   chose from the srcset, so it is a picture in hand and not a second
   download. Asked for on 13 September 2026: "fix the hero picture to show a
   full pic like it used to on the phone". Wider than 600px nothing changes:
   there the band and the photograph are close enough in shape that cover costs
   little, and a wide screen has the room to fill. */
@media(max-width:600px){.site-header{padding-inline:6%;gap:8px}.brand{width:96px;min-width:96px}.hero{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;min-height:min(88svh,760px);padding:clamp(84px,13svh,112px) 0 clamp(26px,5svh,42px)}.hero::before{content:"";position:absolute;inset:-10%;z-index:-1;background:radial-gradient(120% 80% at 50% 45%,#141414,#000 70%);filter:blur(38px)}.hero-scene{position:static;z-index:0;width:100%;height:100%;object-fit:contain;object-position:center}.hero-copy{width:100%;max-width:520px;padding:0 6%;margin-top:clamp(14px,2.5svh,26px)}.hero .eyebrow{margin-bottom:clamp(10px,2svh,18px)}.hero h1{max-width:15ch;margin-bottom:clamp(12px,2svh,20px);font-size:clamp(30px,min(9vw,6svh),44px);line-height:1.06}.hero-copy>p:not(.eyebrow){max-width:42ch;font-size:clamp(13px,min(3.8vw,2.3svh),15px);line-height:1.45}.hero-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;margin-top:clamp(17px,3svh,26px)}.hero-actions>*{min-width:0;min-height:48px;padding:9px 7px;text-align:center;white-space:normal;font-size:clamp(11px,3.5vw,14px);line-height:1.2;overflow-wrap:anywhere}.section{padding:62px 7%}.about .intro{font-size:23px}.section-top{padding:0 7% 22px}.project-scroll-controls{padding:0 6% 12px}.project-scroll-controls button{width:44px;height:44px}.projects{grid-auto-columns:min(74vw,320px);gap:10px;padding-inline:6%;scroll-padding-inline:6%}.project{height:68svh;min-height:440px}.caption{padding:50px 18px 16px}.caption .eyebrow{margin-bottom:5px}.caption h3{max-width:18ch;margin-bottom:5px;font-size:clamp(24px,7.2vw,29px);line-height:1.04}.caption>p:not(.eyebrow){max-width:34ch;margin-bottom:6px;font-size:12px;line-height:1.35}.preference-selector>h3{font-size:28px}#preference-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preference-card{padding:3px}.preference-card>span{font-size:14px}.preference-bottom{align-items:flex-start;flex-direction:column}.photo-dialog[open]{grid-template-columns:48px minmax(0,1fr) 48px}.photo-nav{width:42px;height:42px}.photo-close{right:14px;top:14px}.photo-dialog figure{padding-top:65px}.contact-dialog{border-radius:0}dialog.contact-dialog[open]{position:fixed;inset:var(--contact-viewport-top,0px) 0 auto;width:100vw;height:var(--visible-page-height,100dvh);max-height:var(--visible-page-height,100dvh)!important;max-width:100vw!important;margin:0;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}}
@media(max-width:600px) and (max-height:650px){.hero{min-height:max(100svh,560px);padding-top:92px;padding-bottom:20px}.hero h1{font-size:clamp(28px,min(8vw,5.5svh),38px)}.hero .eyebrow{margin-bottom:8px}.hero-actions{margin-top:14px}.project{height:78svh;min-height:400px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-scene,.scroll-piece{opacity:1!important;transform:none!important;will-change:auto}.project-image img,.primary-action,.secondary-action,.textlink,.preference-card,.menu-button span,.photo-dialog,.contact-dialog #brief-send{animation:none!important;transition:none!important}}
.photo-dialog figure{touch-action:pan-y;overscroll-behavior:contain;user-select:none;cursor:grab}.photo-dialog figure.dragging{cursor:grabbing}.photo-dialog figure img{pointer-events:none}
.preference-card{position:relative}.preference-select-circle{position:absolute;top:12px;right:12px;display:grid!important;width:22px;height:22px;border:1px solid #fff;border-radius:50%;background:#0002;color:#fff;place-items:center;font:700 12px/1 var(--sans)!important;transition:background .2s,color .2s,transform .2s}.preference-card[aria-pressed=true] .preference-select-circle{background:#000;color:#fff;transform:scale(1.04)}
.photo-use{border:0;background:transparent;color:#fff}.photo-use[aria-pressed=true]{border-color:transparent;color:#fff}
/* Team workspace is reachable from the desktop header, not only the mobile panel. */
/* Who you are: one control, last in the corner, on every page of the website.
   It wears the person shape and the word for where it goes -- My workspace, My
   portal, Sign up -- which /site/account-entry.js settles from who is signed in.
   It is hidden until that is known, so nobody is shown the wrong door first. */
.account-entry{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:24px;font-size:14px;text-decoration:none;white-space:nowrap;background:var(--paper,#f4f1e9);color:#171719;border:1px solid transparent}
.account-entry svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* [hidden] is the browser's rule and loses to a class that sets display. */
.account-entry[hidden]{display:none}
/* On a telephone the shape carries it alone. Measured on 11 September 2026: a
   390-wide header has 136 pixels left for this door after the mark, the flag
   and the menu, and "Моё рабочее пространство" wants 243. The word stays on the
   control for a screen reader and a long press. Law 1 -- the person shape is
   one everybody already knows. */
@media(max-width:600px){.account-entry{gap:0;width:44px;padding:0;justify-content:center;border-radius:50%}.account-entry span{display:none}}
/* The company's details, in the footer, from the business record. */
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.company-info{display:grid;gap:6px;margin:22px 0 0;padding:20px 0 0;border-top:1px solid #ffffff1f;
  font-size:14px;line-height:1.5;opacity:.86}
.company-info a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.company-line{margin:0;overflow-wrap:anywhere}
@media(min-width:640px){.company-info{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 32px}}

/* The account, asked for once, when the brief is ready to go. It used to be a
   field sitting open in the form, above the box, reading as one more thing to
   fill in before you could say what you wanted. Asked for on 11 September 2026. */
.account-dialog{width:min(520px,calc(100% - 24px))}.account-dialog[open]{display:block}
.account-dialog h2{margin:1rem 0 1rem}
.account-dialog .account-why{margin:0 0 14px;font-size:.95rem;line-height:1.55}
.account-dialog .account-who{margin:0 0 18px;padding:11px 13px;border-radius:12px;background:#f7f2e8;
  font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}
.account-dialog label{display:grid;gap:7px;margin:0 0 8px;font-size:12px;letter-spacing:.04em}
.account-dialog label[hidden]{display:none}
.account-dialog .brief-help{margin:0 0 4px}
.account-dialog .brief-help[hidden]{display:none}
.account-dialog .account-error{margin:8px 0 0;color:#903b29;font-size:.9rem}
.account-dialog .account-error:empty{display:none}
.account-actions{display:grid;gap:10px;margin:20px 0 0}
.account-actions .primary-action{width:100%;background:#1c1a17;color:#fff;min-height:52px;border:0;
  border-radius:28px;font-size:1rem;cursor:pointer}
.account-actions .primary-action[hidden]{display:none}
.account-actions .secondary-action{width:100%;min-height:52px;border:1px solid #aaa294;border-radius:28px;
  background:transparent;color:inherit;font-size:1rem;cursor:pointer}
@media(max-width:600px){
  .account-dialog{border-radius:0}
  dialog.account-dialog[open]{position:fixed;inset:0;width:100vw;max-width:100vw!important;
    height:auto;max-height:100dvh!important;margin:0;overflow-y:auto;
    padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom))}
}
/* A field you can see the edges of. The hairline under a label reads as part of
   the page, not as somewhere to type. Reported by the owner on 11 September. */
.account-dialog .password-field{position:relative;display:flex;align-items:center}
.account-dialog input[type=password],.account-dialog input[type=text]{
  border:1px solid #aaa294;border-radius:14px;background:#faf8f2;padding:14px 52px 14px 14px}
.account-dialog input:focus{outline:2px solid #1c1a17;outline-offset:1px;border-color:#1c1a17}
.account-dialog .reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;color:#5f594e;cursor:pointer}
.account-dialog .reveal svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Four boxes, side by side and short: what you are called, your family name,
   your number and your address. The two with a star are the two we cannot do
   without. Asked for on 11 September 2026, because one box called "name" put
   two different people under one another on the customers list. */
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
/* One box: its name, the i that says why we ask for it, the box itself, and
   the answer when the i is open. The i is beside the name and outside the
   label, so tapping it reads rather than opening a keyboard. */
.brief-field{position:relative;display:grid;grid-template-columns:minmax(0,max-content) auto minmax(0,1fr);
  gap:7px 6px;align-items:center;margin:0}
.brief-field>label{margin:0;min-width:0;font-size:12px;letter-spacing:.04em}
.brief-field>input{grid-column:1/-1}
.brief-field>.brief-info-panel{grid-column:1/-1;margin:2px 0 0}
/* An open answer takes the whole width rather than half of it, so the words
   are readable and the other boxes are not dragged down beside a hole. */
.brief-grid>.brief-field:has(>.brief-info-panel:not([hidden])){grid-column:1/-1}
.brief-grid label{position:relative;display:grid;gap:7px;margin:0}
/* The star sits inside the label, after the words, so it survives a repaint
   and is never clipped by the edge of the box. */
.contact-dialog .needed{color:#903b29;font-weight:600;margin-left:4px}
.contact-dialog .brief-grid input,.contact-dialog .brief-reach select{border:1px solid #aaa294;
  border-radius:14px;background:#faf8f2;padding:13px 14px;min-height:50px;font-size:16px;color:inherit}
.contact-dialog .brief-grid input:focus,.contact-dialog .brief-reach select:focus{outline:2px solid #1c1a17;
  outline-offset:1px;border-color:#1c1a17}
.contact-dialog .brief-grid input:user-invalid{border-color:#903b29}
.brief-needed{margin:10px 0 0;font-size:.82rem;letter-spacing:.02em;color:#6f6a60}
.brief-needed::before{content:"*";color:#903b29;font-weight:600;margin-right:5px}
@media(max-width:560px){.brief-grid{grid-template-columns:1fr;gap:12px}}

/* ---- the head of a dialog: the mark, and a way out that is a shape ---- */
.contact-dialog header .company-wordmark{display:inline-flex;flex-direction:column;align-items:flex-start}
.contact-dialog header .company-wordmark>span{font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.contact-dialog header .company-wordmark>small{font-size:7px;letter-spacing:.34em;text-transform:uppercase;opacity:.72;margin-top:.28em}
.dialog-x{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;
  padding:0;border:0;background:none;color:inherit;text-decoration:none;cursor:pointer;border-radius:50%}
.dialog-x:hover{background:#0000000d}
.dialog-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* ---- a short line, and the rest behind an i ---- */
.brief-needed{display:flex;align-items:flex-start;gap:6px;font-size:.875rem;line-height:1.5;color:#605b53}
.brief-help{display:inline-flex;align-items:flex-start;gap:6px}
.brief-info{display:inline-grid;place-items:center;width:26px;height:26px;min-width:26px;flex:0 0 auto;
  margin-top:-1px;padding:0;border:0;border-radius:50%;background:#e6e0d4;color:#5c5347;cursor:pointer}
.brief-info:hover{background:#d8d0bf}
.brief-info[aria-expanded="true"]{background:#c68052;color:#fff}
.brief-info svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.brief-info-panel{margin:8px 0 14px;padding:12px 14px;border-radius:12px;background:#efe9dd;
  font-size:.875rem;line-height:1.55;color:#4b463e}
.brief-info-panel p{margin:0}
.brief-info-panel[hidden]{display:none}

/* A control declared in the markup wears its shape from the one icon set. The
   buttons used to hold a glyph typed into the page -- a guillemet, a
   multiplication sign -- which is a different drawing on every machine and no
   drawing at all to a screen reader. 11 September 2026. */
.project-scroll-controls button svg,.photo-close svg,.photo-nav svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.photo-close,.photo-nav,.project-scroll-controls button{display:grid;place-items:center}

/* ---- sharing one piece of work ---- */
/* A link to the site showed the site. A link to a staircase shows the
   staircase: /work/<id> is this page wearing that work's name and photograph,
   so the post carries the photograph. 11 September 2026. */
/* Keep it, or send it. Two round controls in a row under the caption. */
.caption-actions{display:flex;align-items:center;gap:4px;margin-top:4px;pointer-events:auto}
.project-share{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;
  background:transparent;color:#fff;pointer-events:auto}
.project-share svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* Two things you can do with the picture you are looking at -- keep it as
   inspiration, send it to somebody -- side by side at the top left. The way
   out is at the top right, the arrows are at the sides, and the bottom belongs
   to the picture's own name. */
.photo-share{position:absolute;top:max(10px,env(safe-area-inset-top));left:66px;z-index:4;
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:1px solid #ffffff73;border-radius:50%;background:#0009;color:#fff}
.share-note{position:absolute;left:50%;top:max(66px,calc(env(safe-area-inset-top) + 66px));
  transform:translateX(-50%);z-index:5;margin:0;padding:9px 15px;border-radius:999px;
  background:#f4f1e9;color:#1c1a17;font-size:13px;bottom:auto}
.photo-share svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.share-note[hidden]{display:none}
.share-note.is-link{max-width:min(88vw,520px);user-select:all;overflow-wrap:anywhere;text-align:center}

/* ---- a line under the title, and the whole statement behind the i ---- */
.brief-lede{display:flex;align-items:flex-start;gap:8px;margin:-8px 0 18px;
  font-size:.95rem;line-height:1.5;color:#4b463e}
/* The owner writes these in paragraphs. A phrase from the database arrives as
   text, so the blank lines they typed are kept by the stylesheet. */
.brief-info-panel p{white-space:pre-line}

/* ---- how and when we may use the number they gave us ---- */
.brief-reach{margin:16px 0 0;padding:14px 14px 16px;border:1px solid #ded6c6;border-radius:16px;background:#f4efe4}
.brief-reach legend{padding:0 6px;font-size:.875rem;letter-spacing:.02em;color:#4b463e}
.brief-chips{display:flex;flex-wrap:wrap;gap:8px}
.brief-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0;padding:8px 14px;
  border:1px solid #c9bfab;border-radius:999px;background:#faf8f2;font-size:.875rem;
  letter-spacing:normal;cursor:pointer}
.brief-chip input{width:16px;height:16px;margin:0;accent-color:#8a5a34}
.brief-chip:has(input:checked){border-color:#8a5a34;background:#efe2d4}
.brief-chip:has(input:focus-visible){outline:2px solid #1c1a17;outline-offset:2px}
.brief-when{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:12px}
.brief-when label{display:grid;gap:7px;margin:0;font-size:12px;letter-spacing:.04em}
@media(max-width:560px){.brief-when{grid-template-columns:1fr}}

/* Nobody can see this and nobody is asked to fill it in. */
.brief-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- the foot of the page ----
   Three things a person wants from a footer: a way to talk to us now, a way to
   find the door, and the places we are. Then the address and the telephone in
   their own corner, and who owns what, right at the bottom.
   Asked for on 11 September 2026. */
.footer-top{margin-bottom:40px}
.footer-reach{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px 40px;
  padding-bottom:36px;border-bottom:1px solid var(--line)}
.footer-part h3{margin:0 0 14px;font:400 .625rem/1.5 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.footer-row{display:flex;flex-wrap:wrap;gap:10px}
/* Big enough to see and to hit, and the mark carries the colour of the page. */
.footer-place{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 16px;
  border:1px solid var(--line);border-radius:999px;color:inherit;text-decoration:none;
  font:500 14px/1 var(--sans);transition:background-color .16s ease,border-color .16s ease}
.footer-place:hover{background:#ffffff8c;border-color:#8f7e6e}
.footer-place svg{width:22px;height:22px;flex:0 0 auto}
.footer-place .brand-mark{fill:currentColor}
.footer-place>svg:not(.brand-mark){fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.footer-place span{white-space:nowrap}
/* The one that rings wears its own colour. */
.footer-place.is-whatsapp{border-color:#25d36659;background:#25d3661a}
.footer-place.is-whatsapp .brand-mark{fill:#1da851}
.footer-place.is-whatsapp:hover{background:#25d36630;border-color:#25d366a6}

.footer-legal{display:flex;flex-wrap:wrap;gap:8px 26px;padding:26px 0;border-bottom:1px solid var(--line)}
.footer-legal a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);
  font-size:13px;text-decoration:none;border-bottom:1px solid transparent}
.footer-legal a:hover{color:var(--ink);border-color:#8f7e6e}

/* The address and the telephone in one corner, and who owns what, right at the
   bottom, where a person looks for it and nowhere else. */
.footer-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px 40px;padding-top:26px}
.footer-foot .company-info{display:grid;gap:4px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.footer-made{max-width:52ch;font-size:12px;line-height:1.6;color:var(--muted)}
.footer-made p{margin:0}
.footer-rights{margin-top:8px!important;opacity:.85}
.footer-made a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer-made a.is-plain{text-decoration:none}
@media(max-width:600px){
  body>footer{padding:44px 6% 24px}
  .footer-reach{gap:26px}
  .footer-foot{flex-direction:column;align-items:flex-start}
}

/* ---- a piece of work is shown the way it was taken ---- */
/* The cards were tall -- 430 by 600 -- and nearly every photograph of a room is
   wide. A 1672 by 941 picture in that frame kept its middle third, blown up
   from a copy the browser had fetched for a 430-pixel column, which is what
   "shows a thumbnail" looked like. The card is wide now, sixteen by ten, and
   the name and description sit under the picture rather than over the bottom
   of it, because a short frame with words across it is half a picture.
   A picture within about a tenth of the frame fills it. One further off --
   an upright photograph, a panorama -- is shown whole on its own copy blurred
   and darkened behind it, the way the hero is on a telephone. home.js marks
   those with .whole and hands over the copy it already downloaded.
   Asked for on 15 September 2026. */
.projects{grid-auto-columns:min(56vw,760px)}
.project{height:auto;min-height:0;display:flex;flex-direction:column}
.project-image{position:relative;height:auto;aspect-ratio:16/10;isolation:isolate}
.project-image img{position:relative;z-index:1}
.project-image.whole img{object-fit:contain}
.project-image.whole::before{content:"";position:absolute;inset:-12%;z-index:0;
  background:var(--card-bleed,none) center/cover;filter:blur(28px) saturate(1.1) brightness(.5)}
.caption{position:static;padding:18px 2px 0;background:none}
@media(max-width:900px){.projects{grid-auto-columns:min(72vw,640px)}.caption{padding:16px 2px 0}}
@media(max-width:600px){.projects{grid-auto-columns:86vw}.caption{padding:14px 2px 0}}

/* ---- the opening band, as more than one picture ----
   Not .hero-stage: luxury-home.css already uses that name, and it is loaded on
   this same page with a padding of its own -- the slides were held inside it,
   1310 wide in a 1456 band, and the photograph looked enlarged. 16 September.
   Asked for on 16 September 2026: "Need a slideshow as hero can we do it?"
   The slides stand in one grid cell, on top of each other, so the band keeps
   the height it had with one picture in it and nothing below it moves when a
   slide changes. The stage takes the place the single picture held -- behind
   the words, out of the way of a finger -- and each slide keeps the rules that
   picture had, cover on a desk and whole on a telephone. */
.hero-slides{position:absolute;inset:0;z-index:-1;display:grid;isolation:isolate;
  grid-template:minmax(0,1fr)/minmax(0,1fr);
  /* A finger drawn across the picture moves the show; drawn down it scrolls
     the page, as it always did. */
  touch-action:pan-y}
.hero-slides>.hero-scene{position:relative;grid-area:1/1;inset:auto;
  width:100%;height:100%;min-width:0;min-height:0;max-width:100%;
  object-fit:cover;object-position:center;opacity:0;transition:opacity .9s ease}
.hero-slides>.hero-scene.is-showing{opacity:1;z-index:1}
/* The picture being replaced holds its own until the new one is fully over
   it, so the band is never half dark part-way through a change. */
.hero-slides>.hero-scene.is-leaving{opacity:1;transition:none;z-index:0}
.hero-dots{position:absolute;right:5%;bottom:65px;z-index:2;display:flex;gap:10px}
.hero-dot{width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.hero-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff6;
  box-shadow:0 1px 6px #0009;transition:background .25s,transform .25s}
.hero-dot[aria-current="true"]::before{background:var(--accent,#edb58d);transform:scale(1.35)}
.hero-dot:hover::before,.hero-dot:focus-visible::before{background:#fff}
@media(max-width:600px){
  .hero-slides{position:static;z-index:0;min-height:0}
  .hero-slides>.hero-scene{object-fit:contain}
  .hero-dots{position:static;justify-content:center;margin-top:clamp(10px,2svh,16px)}
}
@media(prefers-reduced-motion:reduce){.hero-slides>.hero-scene{transition:none}}

/* ---- talking to the company on WhatsApp ----
   A mark that follows the page at the bottom right, under the thumb of a
   right hand, so the way to say something is on the screen wherever a visitor
   has got to. Asked for on 16 September 2026; moved from the left on
   19 September 2026: "MOST PEOPLE ARE RIGHT HANDED". The two numbers are the company's own, from the business record:
   Sales is `phone`, Office is `second_phone`. */
.whatsapp-call{position:fixed;z-index:80;right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;
  align-items:flex-end;gap:8px}
.whatsapp-button{display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;
  border-radius:50%;background:#25d366;color:#fff;cursor:pointer;
  box-shadow:0 8px 24px #00000045;transition:transform .2s}
.whatsapp-button:hover{transform:translateY(-2px)}
.whatsapp-button svg{width:30px;height:30px}
.whatsapp-choices{display:flex;flex-direction:column;gap:6px}
.whatsapp-choice{display:block;min-height:44px;padding:11px 18px;border-radius:999px;
  background:#101010e6;color:#f4f1e9;font:600 14px/1.3 var(--sans);text-align:right;
  box-shadow:0 8px 22px #00000038;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.whatsapp-choice:hover{background:#25d366;color:#0b2a16}
@media(max-width:600px){
  .whatsapp-button{width:52px;height:52px}
  .whatsapp-button svg{width:27px;height:27px}
}
@media(prefers-reduced-motion:reduce){.whatsapp-button{transition:none}.whatsapp-button:hover{transform:none}}

/* The top of the foot (19 September 2026): the logo and the address on the
   left, WhatsApp and the telephone on the right, the yard on a map beneath. */
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-left{display:grid;gap:14px;min-width:0}
.footer-address{margin:0}
.footer-address a,.footer-address>span{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:14px;line-height:1.4}
.footer-address a:hover span{text-decoration:underline}
.footer-address svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.footer-right{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.footer-map{margin:0 0 36px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.footer-map iframe{display:block;width:100%;height:320px;border:0}
@media (max-width:640px){.footer-right{justify-content:flex-start}.footer-map iframe{height:260px}}

/* The foot, laid out on 19 September 2026. A strip of every place the company
   can be found; then where and when on the left, how to reach us on the right;
   the yard on a map; one short line at the bottom. */
body>footer{padding:44px 7% 26px}
.footer-strip{display:flex;flex-wrap:wrap;gap:10px;padding:0 0 28px;margin:0 0 30px;border-bottom:1px solid var(--line)}
.footer-mark{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 15px;border:1px solid var(--line);
  border-radius:999px;color:inherit;text-decoration:none;font-size:13px;background:#ffffff59;transition:background .15s,border-color .15s}
.footer-mark:hover{background:#ffffffa6;border-color:#8f7e6e}
.footer-mark svg{width:19px;height:19px;flex:0 0 auto}
.footer-mark .brand-mark{fill:currentColor}
.footer-mark>svg:not(.brand-mark){fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px;align-items:start;margin:0 0 30px}
.footer-left{display:grid;gap:14px;align-content:start}
.footer-left .company-logo-panel{max-width:190px}
.footer-address,.footer-hours{margin:0;display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5}
.footer-address a{display:inline-flex;align-items:flex-start;gap:10px;color:inherit;text-decoration:none}
.footer-address a:hover span{text-decoration:underline}
.footer-address svg,.footer-hours svg{width:18px;height:18px;margin-top:2px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-right{display:grid;gap:10px}
.footer-contact{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);
  border-radius:16px;color:inherit;text-decoration:none;background:#ffffff59;transition:background .15s,border-color .15s}
.footer-contact:hover{background:#ffffffa6;border-color:#8f7e6e}
.footer-contact>svg{width:40px;height:40px;padding:9px;border-radius:50%;background:#1f1c1914;box-sizing:border-box;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-contact>svg.brand-mark{fill:#1da851;stroke:none;background:#25d3661f}
.footer-contact span{display:grid;min-width:0}
.footer-contact small{font:400 .625rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7a6f63}
.footer-contact b{font:500 15px/1.35 var(--sans);overflow-wrap:anywhere}
.footer-contact.is-whatsapp{border-color:#25d36659;background:#25d3661a}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:20px;border-top:1px solid var(--line)}
.footer-bottom .footer-legal{margin:0;padding:0;border:0}
.footer-made{margin:0;font-size:12px;color:#7a6f63}
.footer-made a{color:inherit}
@media (max-width:720px){.footer-top{grid-template-columns:1fr}.footer-mark span{display:none}.footer-mark{padding:10px 12px}}
.footer-note{display:block;margin:-6px 0 0 28px;font-size:12.5px;line-height:1.45;color:#6a6258}