/* Digital Creative Media. Stylesheet lifted from look-B.html (Mr. Studio, 2026-09-12) and
   extended for the Work, Services and Contact pages.
   Every colour is a build token filled by build.py from brand-kit.json. None is typed here.
   NO DIVIDER LINE ANYWHERE: not one border declaration in this file draws a line, there is no hr
   and no underline. Every edge you can see is the edge of a filled container. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; }
html, body { background: #FFFFFF; }
body {
  font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-weight: 300;
  color: #000000; -webkit-font-smoothing: antialiased; line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 3px solid #FFD700; outline-offset: 3px;
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.92); }
/* the skip link. First thing a Tab reaches on every page, off screen until it has
   focus, and then a pill on the page's own accent in the top left corner. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 1.2px; text-transform: uppercase; background: #FFD700;
  color: #000000; padding: 14px 22px; border-radius: 0 0 14px 0; }
.skip:focus { left: 0; }
/* Nothing on this site moves on its own today: there is no transition, no
   animation and no autoplaying clip in this file. The rule is here for the day a
   looping clip lands, so motion arrives already switched off for a reader who has
   asked their system for less of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; }
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
/* the hit area of a short link. The text box of a nav link is 20 px tall and of a
   plan terms line 16, which is under the 24 by 24 a thumb needs. The overlay is
   absolutely positioned and paints nothing, so the page does not move a pixel. */
.nav-links a, .foot .site, .foot .a11y, .tier .price .plink { position: relative; }
.nav-links a::after, .foot .site::after, .foot .a11y::after,
.tier .price .plink::after { content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 24px; transform: translateY(-50%); }

/* ---------- the accent pill eyebrow ---------- */
.eyebrow {
  display: inline-block; font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
  font-size: 0.6875rem; letter-spacing: 2.2px; text-transform: uppercase; color: #000000;
  background: #FFD700; border-radius: 20px; padding: 7px 16px 6px 16px;
}

/* ---------- section title as a chip, sized to its own words ---------- */
.sec { display: inline-flex; align-items: baseline; gap: 11px; background: #000000;
       border-radius: 11px; padding: 9px 19px 10px 16px; }
.sec .n  { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 0.8125rem;
           color: #FFD700; letter-spacing: 0.5px; }
/* the chip title is an h1 on the three pages that hold their title here and a span everywhere
   else, so the rule is written against its class and not against a tag */
.sec .t { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 1.1875rem;
          line-height: 1.2; color: #FFFFFF; }
/* on a black band the chip inverts: the accent carries it, black sits on the accent */
.band-dark .sec    { background: #FFD700; }
.band-dark .sec .n { color: #000000; opacity: 0.62; }
.band-dark .sec .t { color: #000000; }

/* ---------- buttons: filled pills, no outline anywhere ---------- */
.btn {
  display: inline-block; font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
  font-size: 0.84375rem; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none;
  border-radius: 999px; padding: 17px 34px 16px 34px; cursor: pointer; border: none;
  background: #FFD700; color: #000000;
}
.btn.soft { background: rgba(255, 215, 0, 0.16); color: #FFD700; }
.btn.full { display: block; width: 100%; text-align: center; }

/* ---------- nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 24px 0; }
.logo { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 1.3125rem;
        letter-spacing: -0.3px; color: #000000; }
.logo .dot { color: #FFD700; }
.nav-links { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.nav-links a { font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-weight: 500;
               font-size: 0.8125rem; letter-spacing: 1.2px; text-transform: uppercase;
               color: #525252; }
.nav-links a.here { color: #000000; }
.nav .btn { padding: 12px 24px 11px 24px; font-size: 0.75rem; }
/* the phone header's two new pieces, inert above 760: the hamburger is not drawn, and the
   panel is a pass through box, so the six links and the pill stay items of the nav row and
   the desktop bar is the bar it has always been. */
.burger { display: none; }
.navmenu { display: contents; }

/* ---------- hero: the video frame comes first ---------- */
.videoframe {
  width: 100%; aspect-ratio: 16 / 9; background: #000000; border-radius: 0;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
.videoframe .glyph { width: 74px; height: 74px; border-radius: 50%;
                     background: rgba(255, 215, 0, 0.18); display: flex;
                     align-items: center; justify-content: center; }
.videoframe .glyph i { width: 22px; height: 26px; margin-left: 5px; background: #FFD700;
                       clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ph { font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-weight: 500; font-size: 0.78125rem;
      letter-spacing: 2.4px; text-transform: uppercase; color: #525252; }
/* text on a dark ground reads the other way about: the muted ink is for the cream,
   the white and the light grey, and on a black ground the words take the kit's own
   light grey, which is what the rest of the text on a dark band already uses. The
   tile is not named here: the same tile is a cream box on a white page and a near
   black box inside a dark band, so what decides is the band. */
.band-dark .ph, .videoframe .ph { color: #C0C0C0; }
.hero { padding: 62px 0 10px 0; }
.hero h1 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 3.375rem;
           line-height: 1.08; letter-spacing: -1.1px; color: #000000; max-width: 940px;
           margin: 22px 0 0 0; }
.hero .thin { font-size: 1.125rem; color: #525252; margin: 16px 0 34px 0; max-width: 560px; }

/* ---------- bands ---------- */
.band-light { background: #FFFFFF; padding: 84px 0 88px 0; }
.band-dark  { background: #000000; padding: 84px 0 88px 0; }
.headroom { margin-bottom: 40px; }

/* ---------- the section header block: chip, heading, paragraph, read as a Z ----------
   Denis, 2026-09-12: every section keeps its number and its bubble title and gains a heading and a
   paragraph. Two columns on a desktop with the heading column the narrower of the pair, the
   paragraph column bottom aligned to it, and the media row under the block spanning the full
   width: the eye runs chip, heading, across to the paragraph, then down and across the media. On a
   phone the block stacks in the same reading order. The chip keeps its filled container; the
   heading and the paragraph sit on the band's own ground with nothing behind them and no line
   under them, because the separation on this site is space and a change of ground. */
.zhead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px 56px;
         align-items: end; }
.zlead, .zsay { min-width: 0; }
/* the heading is the hero h1's family and weight at about six tenths of its size */
.zh { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 2rem;
      line-height: 1.16; letter-spacing: -0.6px; color: #000000; margin: 20px 0 0 0; }
.zp { font-size: 1rem; line-height: 1.6; color: #525252; max-width: 560px; }
.band-dark .zh { color: #FFFFFF; }
.band-dark .zp { color: #C0C0C0; }

/* ---------- service containers, the accent at one tenth ---------- */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: rgba(255, 215, 0, 0.10); border-radius: 14px; padding: 26px 26px 28px 26px;
        min-height: 150px; display: flex; flex-direction: column; justify-content: flex-start; }
.card .n { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 0.75rem;
           letter-spacing: 1.6px; color: #000000; opacity: 0.42; }
.card h3 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 1.3125rem;
           color: #000000; margin: 12px 0 0 0; }
.card .thin { font-size: 0.84375rem; color: #525252; margin-top: 14px; }

/* ---------- work tiles: portrait first, nine by sixteen, three across ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.tile { aspect-ratio: 9 / 16; background: rgba(255, 215, 0, 0.08); border-radius: 14px;
        position: relative; display: flex; align-items: center; justify-content: center;
        overflow: hidden; }
.tile.wide { aspect-ratio: 16 / 9; }
/* a still fills its tile. The frame is the aspect ratio above, and the picture covers it from the
   centre, so a portrait cut and a wide cut each sit in the frame their own row draws. The two
   graphics whose design does not survive a crop carry contain instead and letterbox on the
   tile's own dark ground, which is SK's ruling of 2026-09-13. */
.tile img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;
            object-fit: cover; object-position: center; }
.tile img.contain { object-fit: contain; }
/* the dark fade behind a tile title, Denis 2026-09-13. A title is white and a photograph under it
   is whatever the photograph is, so the two met at 2.17 to 1 on the brightest tile. The fade is
   laid on the meta box itself, which means no new element and no stacking order to get wrong, and
   the black is the kit token every other colour here comes from. It selects a tile that carries a
   picture and only that, so a labelled placeholder keeps the ground it was built on. The text does
   not move: the box goes to the edges of the tile and takes back the same twenty pixels as
   padding, and the room above the tag is where the fade does its work. */
.tile img ~ .meta { left: 0; right: 0; bottom: 0; padding: 46px 20px 20px 20px;
                    background: linear-gradient(to top, rgba(0, 0, 0, 0.72),
                                                        rgba(0, 0, 0, 0)); }
.tile .ph { font-size: 0.6875rem; letter-spacing: 2px; }
.tile .meta { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.tile .tag { display: block; font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
             font-size: 0.65625rem; letter-spacing: 1.8px; text-transform: uppercase;
             color: #FFD700; margin-bottom: 7px; }
.tile .title { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 1rem;
               line-height: 1.25; color: #FFFFFF;
               /* two lines of room with the text sitting on the floor of the box, so every tag in
                  a row lines up whatever length the piece name runs to */
               display: flex; align-items: flex-end; min-height: 2.5em; }
/* the work page carries the full line under the tile, where it has room to breathe */
.item .cap { font-size: 0.84375rem; line-height: 1.45; color: #C0C0C0; margin: 14px 2px 0 2px; }
.item .posted { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 0.65625rem;
                letter-spacing: 1.6px; text-transform: uppercase; color: #C0C0C0;
                margin: 9px 2px 0 2px; display: block; }

/* ---------- process ---------- */
.grid3b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.step .n { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 4.5rem;
           line-height: 1; letter-spacing: -3px; color: #FFD700; }
.step h3 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 1.3125rem;
           color: #000000; margin: 16px 0 8px 0; }
.step .thin { font-size: 0.875rem; color: #525252; }

/* ---------- tiers ---------- */
.tier { background: rgba(255, 215, 0, 0.10); border-radius: 14px; padding: 30px 28px 30px 28px;
        display: flex; flex-direction: column; }
.tier .n { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 0.75rem;
           letter-spacing: 1.6px; color: #000000; opacity: 0.42; }
.tier h3 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 1.5rem;
           color: #000000; margin: 12px 0 0 0; }
.tier .thin { font-size: 0.875rem; line-height: 1.55; color: #525252; margin-top: 16px; }
/* price and button ride the floor of the card, so the three cards line up whatever length
   the contents line runs to */
.tier .price { margin-top: auto; padding-top: 26px; }
.tier .price .lab { display: block; font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
                    font-size: 0.65625rem; letter-spacing: 1.8px; text-transform: uppercase;
                    color: #000000; opacity: 0.42; }
.tier .price .val { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 1.3125rem;
                    color: #000000; margin-top: 6px; display: block; }
/* the minimum term, in the same small label style as the word above the price: no colour of
   its own, no rule, no box, so the card gains a line and nothing else */
.tier .price .term { display: block; font-family: "Quicksand", Arial, sans-serif;
                     font-weight: 700; font-size: 0.65625rem; letter-spacing: 1.8px;
                     text-transform: uppercase; color: #000000; opacity: 0.42;
                     margin-top: 8px; }
/* the Plan terms line, under the term line on a monthly card since 2026-09-13. Denis's
   popup that day: the monthly plans sell on a three month minimum and the buyer has to be
   able to read the terms before paying. It is the term line's own size and the term line's
   own colour at a little more strength, so the card gains a line and no new furniture, and
   no rule and no underline mark it: this site has no divider line anywhere. */
.tier .price .plink { display: block; font-family: "Quicksand", Arial, sans-serif;
                      font-weight: 700; font-size: 0.65625rem; letter-spacing: 1.8px;
                      text-transform: uppercase; color: #000000; opacity: 0.62;
                      margin-top: 8px; }
.tier .buy { padding-top: 26px; }

/* ---------- contact form: filled containers, nothing outlined ---------- */
.formwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; }
.field { background: rgba(255, 215, 0, 0.10); border-radius: 14px;
         padding: 16px 20px 18px 20px; display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 0.65625rem;
               letter-spacing: 1.8px; text-transform: uppercase; color: #000000; opacity: 0.52; }
.field input, .field select, .field textarea {
  font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-weight: 300; font-size: 1rem;
  color: #000000; background: transparent; border: none; padding: 9px 0 0 0; width: 100%;
  appearance: none; resize: vertical;
}
.field textarea { min-height: 132px; }
/* a caret so the project type field reads as a dropdown. It is a background image on the control,
   not a rule and not an edge. */
.field select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5 Z' fill='%23000000' fill-opacity='0.45'/%3E%3C/svg%3E");
               background-repeat: no-repeat; background-position: right 2px center; }
.formcta { grid-column: 1 / -1; margin-top: 4px; }
.contactline { font-size: 0.9375rem; color: #525252; margin-top: 26px; }
/* the line that replaces the form after a send, and the line shown if a send fails. Its
   text comes from a data attribute in contact.html, never from the script. */
.formnote { font-family: "Quicksand", Arial, sans-serif; font-weight: 600; font-size: 1.0625rem;
  color: #000000; margin-top: 26px; max-width: 860px; line-height: 1.5; }

/* ---------- cta band ---------- */
.cta { text-align: center; }
.cta .thin { font-size: 1.0625rem; color: #C0C0C0; margin-bottom: 30px; }
.cta .btns { display: flex; gap: 14px; justify-content: center; }

/* ---------- footer ---------- */
.foot { background: #000000; padding: 54px 0 56px 0; }
.foot .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.foot .logo { color: #FFFFFF; }
.foot .line { font-size: 0.90625rem; color: #C0C0C0; margin-top: 12px; max-width: 620px; }
.foot .footlinks { display: flex; align-items: flex-end; gap: 26px; }
.foot .site, .foot .a11y { font-family: "Raleway", "Segoe UI", Arial, sans-serif;
              font-weight: 500; font-size: 0.90625rem; letter-spacing: 0.6px; color: #FFD700; }
.foot .a11y { color: #C0C0C0; }

/* ---------- the audience line, once, under the hero ---------- */
.audience { font-size: 1.0625rem; line-height: 1.55; color: #525252; max-width: 820px;
            margin: 0 0 6px 0; }

/* ---------- the Quick Shoot card: full width above the tiers, a tier's own material ---------- */
.quick { background: rgba(255, 215, 0, 0.10); border-radius: 14px;
         padding: 30px 28px 30px 28px; margin-bottom: 20px; display: flex; gap: 30px;
         align-items: center; justify-content: space-between; }
.quick .body { max-width: 660px; }
.quick h3 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 1.5rem;
            color: #000000; }
.quick .thin { font-size: 0.875rem; line-height: 1.55; color: #525252; margin-top: 14px; }
/* the second line rides in the same small label style the tier term uses, so the card gains a
   line and no new furniture. Its own class keeps the tier term count honest in the build. */
.quick .qterm { display: block; font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
                font-size: 0.65625rem; letter-spacing: 1.8px; text-transform: uppercase;
                color: #000000; opacity: 0.42; margin-top: 12px; }
.quick .buy { flex: 0 0 auto; }

/* ---------- industry pages ---------- */
/* The hero band. Denis, 2026-09-12: "all 3 pages need a hero landing, something nice, most likely
   will have either a video or a image background, a gradient on one side, where the text is going
   to be for that h1". The frame takes the home page video frame's shape, full width and 16:9, and
   the headline takes the home hero's type. The gradient is a fill laid over the frame, from the
   kit black on the left to nothing on the right, so the words keep a ground of their own while
   the photograph stays visible behind them; no edge of it is a line. On a phone the frame goes
   tall, the fill runs bottom to top and the words sit on the floor of it. */
/* The 16:9 shape is the height this band PREFERS, and it is drawn by the spacer below rather
   than by aspect-ratio. aspect-ratio computes a definite height out of the width, and no
   minimum and no overflow rule outranks it, so a band whose words are taller than its ratio cut
   them off at BOTH ends: the words are centred in it, so at 768 px it lost 16 px of the eyebrow
   off the top and 16 px of the button off the floor at a 100 percent root, and 58 px of each at
   125 percent. Measured, six candidates side by side. A zero width spacer with a percentage top
   padding gives the same height, resolves against the band's own width rather than the viewport,
   so a reader with a scrollbar gets the ratio and not the ratio plus the scrollbar, and lets the
   band grow the moment its own words need more room. */
.ihero { position: relative; width: 100%; display: flex;
         align-items: center; overflow: hidden; }
.ihero::before { content: ""; display: block; width: 0; flex: 0 0 0; padding-top: 56.25%; }
.ihero .shot { position: absolute; inset: 0; background: #F0F0F0; }
.ihero .shot .ph { position: absolute; top: 20px; right: 24px; font-size: 0.6875rem;
                   letter-spacing: 2px; }
.ihero .veil { position: absolute; inset: 0;
               background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.86) 34%,
                                                  rgba(0, 0, 0, 0) 76%); }
.ihero .wrap { position: relative; width: 100%; }
.ihero .hbody { max-width: 620px; }
.ihero h1 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 3.375rem;
            line-height: 1.08; letter-spacing: -1.1px; color: #FFFFFF; margin: 22px 0 0 0; }
.ihero .thin { font-size: 1.125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78);
               margin: 16px 0 34px 0; max-width: 520px; }
/* The mid page hero band. Denis, 2026-09-12: "give me a middle landing hero for resturants
   theme, and samething for real state, almost like how it looks when they search for
   properties". The same frame and the same one side fill as the hero at the top of the page,
   wider on a desktop because it sits between two sections rather than opening the page, and
   tall on a phone for the same reason the top hero is. The search foreground puts a light row
   over the frame: four labelled pills and a solid pill, which is what a property search looks
   like on a listing site. Nothing in it is a control and nothing in it takes a script. */
/* the same mechanism as the top hero band, and it matters more here: this band carries a search
   row whose pills grow with the reader's text size. Measured at 768 px, 17 px of the Search
   button was cut at a 100 percent root and 41 px at 125. 42.857143 percent is nine twenty firsts,
   the 21:9 shape this band was built on. */
.mhero { position: relative; width: 100%; display: flex;
         align-items: center; overflow: hidden; }
.mhero::before { content: ""; display: block; width: 0; flex: 0 0 0; padding-top: 42.857143%; }
.mhero .shot { position: absolute; inset: 0; background: #F0F0F0; }
.mhero .shot .ph { position: absolute; top: 20px; right: 24px; font-size: 0.6875rem;
                   letter-spacing: 2px; }
/* a photograph fills a full bleed band the way a still fills a tile: the band is the frame and
   the picture covers it from its own centre. The fill over it is untouched, so the words on the
   band keep the ground they were built on. A frame cut at the desktop ratio is cropped further
   by this same rule on a phone, where the band goes tall. */
.ihero .shot img, .mhero .shot img { position: absolute; top: 0; left: 0; width: 100%;
                                     height: 100%; display: block; object-fit: cover;
                                     object-position: center; }
.mhero .veil { position: absolute; inset: 0;
               background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.86) 34%,
                                                  rgba(0, 0, 0, 0) 76%); }
.mhero .wrap { position: relative; width: 100%; }
.mhero .hbody { max-width: 620px; }
.mhero .mh { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 2.375rem;
             line-height: 1.12; letter-spacing: -0.8px; color: #FFFFFF; margin: 0; }
.mhero .thin { font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78);
               margin: 14px 0 28px 0; max-width: 520px; }
.mhero.search .hbody { max-width: 900px; }
.searchrow { display: flex; align-items: center; gap: 10px; background: #FFFFFF;
             border-radius: 999px; padding: 10px 10px 10px 14px; margin-top: 24px;
             max-width: 900px; }
/* a pill is a field, so its words take the style this site gives the VALUE inside a form
   field rather than the uppercase micro label above one: Raleway, sentence case, no letter
   spacing. Measured, not chosen: the label style wanted 204 px for "Location placeholder"
   inside a 171 px pill and ellipsised three of the four at every width. */
/* the label breaks rather than being cut. A pill's width is decided by the row and its text by
   the reader's own text size, so the two can disagree, and they do: at a 125 percent root
   Location placeholder wanted 210 px inside a 180 px pill at 1440 and 169 inside 152 at 390, and
   the ellipsis rule took the end of the word away. A pill that can break its label loses nothing
   at any width or any text size, and its floor is its longest word, which is narrow enough that
   two of them still fit across a 390 px phone. Nothing moves at a 100 percent root: no pill
   ellipsised at any measured width at that size. */
.searchrow .spill { flex: 1 1 0; min-width: min-content; font-family: "Raleway", "Segoe UI",
                    Arial, sans-serif; font-weight: 400; font-size: 0.90625rem; color: #525252;
                    background: #F0F0F0; border-radius: 999px;
                    padding: 12px 16px 11px 16px; text-align: center; }
.searchrow .btn.go { flex: 0 0 auto; padding: 13px 26px 12px 26px; font-size: 0.75rem; }

/* the landscape row on an industry page: the work page's own 16:9 frame, two across */
.grid-wide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.group { margin-top: 54px; }
.group:first-child { margin-top: 0; }
.group .headroom { margin-bottom: 26px; }
/* a placeholder tile carries no title, so the label that names it stays on at every width */
.tile.empty .ph { display: block; }
.note { font-size: 1rem; line-height: 1.55; color: #C0C0C0; max-width: 820px; }

@media (max-width: 760px) {
  .wrap { padding: 0 22px; }
  /* Denis, 2026-09-12: "it needs to feel like a header is there ... at the top it doesn't
     look like just text floating". Below 760 the nav is a header bar: one filled container
     running the full width of the screen with the mark on its left and a hamburger on its
     right, and the six links and the Start a Project pill in a panel under it in the same
     ground. The bar takes the ground of the band the page opens on, which is why it is the
     kit black where the page opens on a black plate and the kit white where it opens light;
     which pages those are is a list in site.json, so no page name is written in here.
     WITH assets/site.js MISSING the panel is open and the links wrap under the mark, which
     is the nav this site shipped before today: the script closes the panel on load, and the
     only rule in this file that hides the panel is keyed to the attribute the script sets. */
  .navwrap { position: sticky; top: 0; z-index: 40; padding: 0; }
  .nav { flex-wrap: wrap; gap: 0; padding: 13px 22px 13px 22px; background: #FFFFFF; }
  .burger { display: block; margin-left: auto; width: 30px; height: 24px; padding: 5px 2px;
            background: none; border: none; cursor: pointer; }
  .burger i { display: block; height: 2px; border-radius: 2px; background: #000000; }
  .burger i + i { margin-top: 4px; }
  /* the panel runs edge to edge: its width is the bar's content box plus the bar's two
     gutters and the negative margins put it back on the screen edge, so the ground is
     unbroken from the mark to the last link while the words keep the page's own gutter. */
  .navmenu { display: block; width: calc(100% + 44px); margin: 13px -22px 0 -22px;
             padding: 2px 22px 16px 22px; background: #FFFFFF; }
  .navmenu[hidden] { display: none; }
  .nav-links { width: 100%; flex-direction: column; gap: 0; }
  .nav-links a { font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
                 font-size: 0.875rem; letter-spacing: 1.4px; padding: 11px 0 11px 0; }
  .nav .btn { display: block; width: 100%; text-align: center; margin-top: 12px;
              padding: 15px 24px 14px 24px; }
  /* a page that opens on a black plate carries the bar in that plate's own material, so the
     mark and the hamburger sit on the hero instead of floating over a white strip. */
  .nav.ondark, .nav.ondark .navmenu { background: #000000; }
  .nav.ondark .logo { color: #FFFFFF; }
  .nav.ondark .burger i { background: #FFD700; }
  .nav.ondark .nav-links a { color: #C0C0C0; }
  .nav.ondark .nav-links a.here { color: #FFFFFF; }
  .hero { padding: 40px 0 48px 0; }
  .hero h1 { font-size: 2.0625rem; letter-spacing: -0.7px; }
  .hero .thin { font-size: 1rem; }
  .band-light, .band-dark { padding: 56px 0 58px 0; }
  /* the header block stacks: chip, heading, paragraph, the same reading order the Z carries on a
     desktop. The heading holds its six tenths of the phone hero h1. */
  .zhead { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .zh { font-size: 1.25rem; letter-spacing: -0.3px; margin-top: 14px; }
  .zp { font-size: 0.9375rem; max-width: none; }
  .grid4 { grid-template-columns: 1fr; gap: 14px; }
  .card { min-height: 0; }
  .grid3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .grid2 { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  /* at two across the centre label and a three line title collide, and the label is saying
     what the tag and title already say, so the tile keeps the words that carry content. */
  .tile .ph { display: none; }
  .tile .title { font-size: 0.875rem; min-height: 3.75em; }
  .item .cap { font-size: 0.8125rem; }
  .grid3b { grid-template-columns: 1fr; gap: 32px; }
  .step .n { font-size: 3.5rem; }
  .tier { padding: 26px 22px 26px 22px; }
  /* the deposit button carries 34 px of side padding, and on a phone that padding plus the
     longest word in its label is what stops the tier card fitting two across: the card
     cannot go below 181 px and the row runs off the right edge of a 390 screen. Narrower
     side padding here lets the card shrink to the track. */
  .tier .buy .btn { padding-left: 14px; padding-right: 14px; }
  .audience { font-size: 0.96875rem; }
  .quick { flex-direction: column; align-items: flex-start; gap: 20px;
           padding: 26px 22px 26px 22px; }
  .quick h3 { font-size: 1.3125rem; }
  .quick .buy { width: 100%; }
  .quick .buy .btn { display: block; width: 100%; text-align: center;
                     padding-left: 14px; padding-right: 14px; }
  /* Denis's call, relayed by SK on 2026-09-12: the tier cards go one across on a phone, where
     two across left the long deposit label breaking over four lines inside a pill. */
  .grid3.tiers { grid-template-columns: 1fr; gap: 14px; }
  /* a 16:9 frame on a phone is a letterbox with no room for a headline inside it, so the frame
     goes tall and the fill turns to run bottom to top with the words on the floor of the frame */
  .ihero { align-items: flex-end; }
  .ihero::before { padding-top: 125%; }
  .ihero .veil { background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.84) 40%,
                                                   rgba(0, 0, 0, 0) 84%); }
  .ihero .hbody { max-width: none; padding-bottom: 32px; }
  .ihero h1 { font-size: 2.0625rem; letter-spacing: -0.7px; }
  .ihero .thin { font-size: 1rem; margin: 14px 0 24px 0; }
  /* the mid page hero takes the top hero's phone shape: a 21:9 band on a 390 screen is a
     letterbox with no room for a heading inside it. The search pills go two across, which is
     how a search row reads on a phone, and the solid pill takes the row under them. */
  .mhero { align-items: flex-end; }
  .mhero::before { padding-top: 125%; }
  .mhero .veil { background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.84) 40%,
                                                   rgba(0, 0, 0, 0) 84%); }
  .mhero .hbody { max-width: none; padding-bottom: 32px; }
  .mhero.search .hbody { max-width: none; }
  .mhero .mh { font-size: 1.625rem; letter-spacing: -0.4px; }
  .mhero .thin { font-size: 0.96875rem; margin: 12px 0 22px 0; }
  /* 14 px, not 10: a white strip thinner than 14 px between the dark frame and a light
     grey pill reads as a divider line to the scan, and it is right to call it one. */
  .searchrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-radius: 26px;
               padding: 14px; max-width: none; margin-top: 18px; }
  .searchrow .spill { font-size: 0.78125rem; padding: 11px 8px 10px 8px; }
  .searchrow .btn.go { grid-column: 1 / -1; display: block; width: 100%; text-align: center;
                       padding-left: 14px; padding-right: 14px; }
  .grid-wide { grid-template-columns: 1fr; gap: 14px; }
  .group { margin-top: 40px; }
  .group .headroom { margin-bottom: 20px; }
  .note { font-size: 0.9375rem; }
  .formwrap { grid-template-columns: 1fr; gap: 14px; }
  .cta .btns { flex-direction: column; align-items: stretch; }
  .foot .row { flex-direction: column; align-items: flex-start; }
}


/* The tablet band for the section header block. Both columns stay, and the wide desktop gutter
   does not: at 768 a 56 px gap takes a fifth of the row and the heading breaks over four lines in
   what is left. Nothing else on the page changes here, and nothing at all changes above 1024. */
@media (min-width: 761px) and (max-width: 1024px) {
  .zhead { gap: 18px 34px; }
  .zh { font-size: 1.6875rem; letter-spacing: -0.4px; }
  .zp { font-size: 0.96875rem; }
}


/* ================================================================================
   PAGE THEMES START
   Mr. Studio's Restaurants and Real Estate page themes, approved by Denis 2026-09-12,
   merged by work order 2026-09-12-09. EVERY rule below this mark is scoped to a class on the
   body, so a page that does not carry the class is not touched by one declaration of it, and the
   build proves that by comparing the five untouched pages byte for byte across the change.
   No new hue and no new font. The warm ground is the kit gold at six percent over white, which is
   the accent itself at low strength; the neutral photo slot is the kit grey_light, and on the
   black strip it is the kit white at seven percent. Still no divider line: every edge you can see
   below is the edge of a filled container or a change of ground.
   ================================================================================ */

/* ---------------- Restaurants: warm ground, the mosaic, the full bleed strip ---------------- */
.page-restaurants .band-warm { background: rgba(255, 215, 0, 0.06); padding: 84px 0 88px 0; }
.page-restaurants .band-strip { background: #000000; padding: 84px 0 0 0; }
.page-restaurants .band-light { padding: 84px 0 88px 0; }

/* the page opens on the hero band, which is the full bleed plate this page used to open on with
   the headline now inside it. The theme's headline size is the size it carried here. */
.page-restaurants .ihero h1 { font-size: 3.375rem; line-height: 1.08; letter-spacing: -1.1px;
    margin: 22px 0 0 0; }

/* the menu band. Three items in a row, each a dish frame with the item's words under it, the name
   on the left of its row and the price slot on the right: a menu reads as two columns, and the
   gap between them is what separates them, since nothing on this site draws a leader line. */
.page-restaurants .grid-dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.page-restaurants .grid-dishes .tile.dish { aspect-ratio: 4 / 5; }
.page-restaurants .mnote { margin-top: 16px; font-size: 0.9375rem; color: #525252;
    max-width: 640px; }
.page-restaurants .mtop { display: flex; align-items: baseline; justify-content: space-between;
    gap: 18px; margin-top: 18px; }
.page-restaurants .mname { font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
    font-size: 1.125rem; color: #000000; }
.page-restaurants .mprice { font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
    font-size: 0.75rem; letter-spacing: 1.4px; text-transform: uppercase; color: #525252;
    white-space: nowrap; }
.page-restaurants .mdesc { font-size: 0.875rem; line-height: 1.55; color: #525252;
    margin-top: 8px; }

/* a photo slot is neutral, because a photograph is coming. The gold tint stays on the containers
   that hold words, so the accent never competes with the food. The label stays readable at every
   width, since on this page it is the only thing naming the slot. */
.page-restaurants .tile { background: #F0F0F0; aspect-ratio: auto; }
.page-restaurants .band-strip .tile { background: rgba(255, 255, 255, 0.07); }
/* the dining room strip is a black ground without being .band-dark, so the header block on it
   takes the dark band's ink by hand: the heading in white, the paragraph in the light grey. */
.page-restaurants .band-strip .zh { color: #FFFFFF; }
.page-restaurants .band-strip .zp { color: #C0C0C0; }
/* the slot labels in this strip sit on a near black box, so they take the light grey the
   rest of the dark ground text takes and not the muted ink of a light ground. */
.page-restaurants .band-strip .ph { color: #C0C0C0; }
/* and so does the chip, which is a black pill with white words and was therefore invisible on
   this ground. On the strip it takes the same inversion the dark band gives it: the accent
   carries the chip and the ink goes black. Defect fix, 2026-09-12, scoped to this page. */
.page-restaurants .band-strip .sec { background: #FFD700; }
.page-restaurants .band-strip .sec .n { color: #000000; opacity: 0.62; }
.page-restaurants .band-strip .sec .t { color: #000000; }
.page-restaurants .tile .ph { display: block; font-size: 0.6875rem; letter-spacing: 2px;
    text-align: center; padding: 0 14px; }

/* the dish mosaic. One ratio at two sizes: the feature spans two columns and two rows, which
   lands it back at four by five, so the biggest plate is the same crop as the small ones. */
.page-restaurants .grid-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.page-restaurants .grid-menu .tile { aspect-ratio: 4 / 5; }
.page-restaurants .grid-menu .tile.feature { grid-column: span 2; grid-row: span 2;
    aspect-ratio: auto; }
.page-restaurants .grid-menu .tile.feature .ph { font-size: 0.8125rem; }

/* the dining room strip runs to the page edge with square corners and closes the black band
   against the next one, so one set of photos touches the page instead of sitting in a container */
.page-restaurants .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin-top: 40px; }
.page-restaurants .strip .tile { aspect-ratio: 3 / 2; border-radius: 0; }

.page-restaurants .grid-reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.page-restaurants .grid-reels .tile { aspect-ratio: 9 / 16; }

/* ---------------- Real Estate: thin type, one piece a row, black held back ---------------- */
/* Mr. Studio's thin headline keeps its weight and its offset, now inside the hero band */
.page-real-estate .ihero h1 { font-family: "Raleway", "Segoe UI", Arial, sans-serif;
    font-weight: 200; font-size: 3.375rem; line-height: 1.16; letter-spacing: -0.2px;
    max-width: 820px; margin: 26px 0 0 0; }
/* the section headings on this page take its own thin face, not the Quicksand Bold every other
   page reads them in, so the page keeps one voice from the headline down. 2026-09-12. */
.page-real-estate .zh { font-family: "Raleway", "Segoe UI", Arial, sans-serif;
    font-weight: 300; letter-spacing: -0.2px; }
/* the mid page hero heading is a headline on this page, so it takes the headline face and
   weight rather than the section heading's. Read off the 1440 render of the new band. */
.page-real-estate .mhero .mh { font-family: "Raleway", "Segoe UI", Arial, sans-serif;
    font-weight: 200; letter-spacing: -0.2px; }
.page-real-estate .gallery { background: #FFFFFF; padding: 96px 0 96px 0; }
.page-real-estate .band-light { padding: 96px 0 104px 0; }
.page-real-estate .headroom { margin-bottom: 34px; }

.page-real-estate .tile { background: #F0F0F0; aspect-ratio: auto; }
.page-real-estate .tile .ph { display: block; font-size: 0.6875rem; letter-spacing: 2px;
    text-align: center; padding: 0 14px; }
.page-real-estate .tile.land { aspect-ratio: 3 / 2; }

/* the listing cards. Denis, 2026-09-12: "more like how listings look online with carusells
   inside". Two cards across on a desktop and one on a phone. A card is Look B's tile material
   with the carousel flush to its top edge, the listing facts under it, and the piece's own name
   and line on the floor of the card, so two cards in a row end level whatever the line's length.
   The rail is CSS scroll snap and stays that way: it scrolls by touch, trackpad or drag, each
   frame is one full width of the rail and snaps to its left edge. SK turned the no script rule
   over for controls on 2026-09-12, so the dots and the two arrow pills are now buttons that
   assets/site.js wires to the rail, and the filled dot follows the frame in view however the
   rail got there. They keep the shapes they carried; with that file missing they are inert
   and the rail still swipes. */
/* two across is a width, not a count: 1fr 1fr held the two cards at their own content floor and
   pushed the page 46 px sideways at 768. The track carries the floor now, so the row drops to one
   card the moment two of them would not fit, and the card may shrink below its content because
   the carousel inside it scrolls and the card clips. */
.page-real-estate .listings { display: grid; gap: 52px 30px;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
/* the card fills its cell, so two cards in a row end level whatever the length of the line
   under them; the name block rides the floor of the card the way a tier's price does. */
.page-real-estate .listing { min-width: 0; display: flex; flex-direction: column; }
.page-real-estate .listing .lcard { flex: 1; }
.page-real-estate .listing .headroom { margin-bottom: 18px; }
/* a listing card is half a row wide at most, so its header block stacks at every width instead of
   splitting a 380 px card into two columns, and the heading drops to the size a card carries. */
.page-real-estate .listing .zhead { grid-template-columns: 1fr; gap: 12px; align-items: start; }
.page-real-estate .listing .zh { font-size: 1.5rem; letter-spacing: -0.4px; margin-top: 14px; }
.page-real-estate .listing .zp { font-size: 0.9375rem; max-width: none; }
.page-real-estate .lcard { background: rgba(255, 215, 0, 0.08); border-radius: 14px;
    overflow: hidden; display: flex; flex-direction: column; }
.page-real-estate .carousel { position: relative; }
.page-real-estate .rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; }
.page-real-estate .rail .tile { flex: 0 0 100%; scroll-snap-align: start; border-radius: 0; }
.page-real-estate .arrows { position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: space-between; padding: 0 14px; pointer-events: none; }
/* the middle of the frame stays free for a swipe: the arrow row takes no pointer and each
   pill takes it back, so a drag between the two pills still scrolls the rail. */
.page-real-estate .arrow { width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.42); display: flex; align-items: center;
    justify-content: center; padding: 0; border: none; cursor: pointer;
    pointer-events: auto; }
.page-real-estate .arrow i { width: 7px; height: 11px; background: #FFFFFF;
    clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.page-real-estate .arrow.next i { clip-path: polygon(0 0, 0 100%, 100% 50%); }
.page-real-estate .dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex;
    justify-content: center; gap: 0; pointer-events: none; }
/* the dots take the arrow pill's own ink, not white: the slot under them is the light grey of
   an empty frame, and a white dot on light grey is a dot nobody can see. */
/* a 7 px dot is not a tap target. The button is 14 by 22 and the dot inside it keeps its
   7 px and its 7 px of air: the gap moved into the button's own width, so the circles land
   where they always landed and the thing a thumb has to hit is three times the size. */
.page-real-estate .dots .cdot { width: 24px; height: 24px; padding: 0; background: none;
    border: none; cursor: pointer; display: flex; align-items: center;
    justify-content: center; pointer-events: auto; }
.page-real-estate .dots .cdot i { width: 7px; height: 7px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.30); }
.page-real-estate .dots .cdot.on i { background: rgba(0, 0, 0, 0.72); }
/* what a listing carries above its name, in the small label style the site uses for a label. The
   address takes the row above and the four slots run under it, held apart by the gap and by
   nothing else. Every one of them is a word: no listing exists yet to carry a figure. */
.page-real-estate .facts { padding: 22px 26px 0 26px; display: flex; flex-wrap: wrap;
    gap: 9px 20px; }
.page-real-estate .fact { font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
    font-size: 0.6875rem; letter-spacing: 1.6px; text-transform: uppercase; color: #525252; }
.page-real-estate .fact.addr { flex: 0 0 100%; font-size: 0.84375rem; letter-spacing: 0.8px;
    color: #000000; }
.page-real-estate .lcard .under { margin-top: auto; padding: 18px 26px 26px 26px; }
.page-real-estate .lcard .name { font-family: "Raleway", "Segoe UI", Arial, sans-serif;
    font-weight: 300; font-size: 1.25rem; color: #000000; }
.page-real-estate .lcard .cap { font-size: 0.90625rem; line-height: 1.6; color: #525252;
    margin-top: 10px; }
.page-real-estate .group { margin-top: 86px; }
/* the plain line takes the mid grey, not the light grey the other industry pages read it in:
   they carry it on the black band and this page has no black band in its body. */
.page-real-estate .note { color: #525252; }

/* -------- the packages blocks, their own grid on the three pages that sell them --------
   The work tiles and the service tiers already own .grid3, and a phone rule written for one grid
   hits every grid sharing its class, so these cards get a class of their own.
   Home Services joined on 2026-09-13 and takes the Restaurants measurements unchanged: five
   cards, three to a row, on the white ground its own band record names. */
.page-restaurants .packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.page-real-estate .packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-home-services .packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.page-real-estate .tier { padding: 32px 30px 32px 30px; }
.page-real-estate .tier h3 { font-family: "Raleway", "Segoe UI", Arial, sans-serif;
    font-weight: 200; font-size: 1.625rem; margin: 14px 0 0 0; }
.page-real-estate .tier .thin { font-size: 0.90625rem; line-height: 1.6; }
.page-real-estate .tier .price { padding-top: 30px; }
.page-real-estate .tier .price .val { font-family: "Raleway", "Segoe UI", Arial, sans-serif;
    font-weight: 300; font-size: 1.5rem; margin-top: 8px; }
.page-real-estate .tier .price .term { margin-top: 10px; }
.page-real-estate .tier .buy { padding-top: 28px; }

@media (max-width: 760px) {
  /* Same order on a phone, nothing dropped. 14 px is Look B's own phone gutter: anything thinner
     between two stacked photos reads as a line, and the line scan is right to call it one. */
  .page-restaurants .band-warm { padding: 56px 0 58px 0; }
  .page-restaurants .band-strip { padding: 56px 0 0 0; }
  .page-restaurants .band-light { padding: 56px 0 58px 0; }
  .page-restaurants .headroom { margin-bottom: 28px; }
  .page-restaurants .ihero h1 { font-size: 2.0625rem; letter-spacing: -0.7px; margin: 16px 0 0 0; }
  /* one dish to a row on a phone: two frames side by side at 390 leave the item name breaking
     over three lines under a frame the size of a stamp */
  .page-restaurants .grid-dishes { grid-template-columns: 1fr; gap: 22px; }
  /* the mosaic keeps its shape at two across, with the feature full width on its own row: a two
     row span on a two column grid leaves no tile to give those rows a height */
  .page-restaurants .grid-menu { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .page-restaurants .grid-menu .tile.feature { grid-column: span 2; grid-row: span 1;
      aspect-ratio: 4 / 5; }
  /* a dining room at half a phone width is not a room, so one to a row, still full bleed */
  .page-restaurants .strip { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .page-restaurants .grid-reels { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .page-real-estate .ihero h1 { font-size: 2.125rem; line-height: 1.2; margin: 16px 0 0 0; }
  .page-real-estate .gallery { padding: 58px 0 58px 0; }
  .page-real-estate .band-light { padding: 58px 0 62px 0; }
  /* one listing card to a row on a phone, which is how a listing reads on a phone anyway */
  .page-real-estate .listings { grid-template-columns: 1fr; gap: 40px; }
  .page-real-estate .group { margin-top: 54px; }
  .page-real-estate .lcard .name { font-size: 1.1875rem; }
  .page-real-estate .facts { padding: 20px 22px 0 22px; }
  .page-real-estate .lcard .under { padding: 16px 22px 24px 22px; }

  .page-restaurants .packages { grid-template-columns: 1fr; gap: 14px; }
  .page-real-estate .packages { grid-template-columns: 1fr; gap: 14px; }
  .page-home-services .packages { grid-template-columns: 1fr; gap: 14px; }
  .page-real-estate .tier { padding: 26px 22px 26px 22px; }
}

/* The tablet band, where three package cards share a row that is narrower than three pills with
   34 px of side padding each. Nothing else in the two themes changes here, and nothing at all
   changes above 1024 px. */
@media (min-width: 761px) and (max-width: 1024px) {
  .page-restaurants .packages .btn, .page-real-estate .packages .btn,
  .page-home-services .packages .btn {
      padding-left: 14px; padding-right: 14px; }
  /* four pills and a Search pill want about 990 px of row and a tablet has 688 at 768, so the
     pills go two across here the way they do on a phone. Measured at 768 and at 1024. */
  .page-real-estate .searchrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
      border-radius: 26px; padding: 14px; max-width: 560px; }
  .page-real-estate .searchrow .btn.go { grid-column: 1 / -1; display: block; width: 100%;
      text-align: center; }
  /* three dishes across stopped fitting below 1024: an item name and its price share one row and
     that row will not break, so the item has a floor of 274 px and three of them ran the page
     147 px sideways at 768. Two across on a tablet, three only where three fit. */
  .page-restaurants .grid-dishes { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .page-real-estate .tier { padding: 30px 22px 30px 22px; }
  .page-real-estate .packages { gap: 20px; }
}


/* ================================================================================
   THE LANDING CATCHER at /start. Mr. Studio's mock A, background A, the beam, approved by Denis
   2026-09-12. Every rule below is scoped to the body class the start page alone carries, so not
   one declaration of it touches the eight pages of the site.
   The background is four gradients, one clipped polygon and one authored SVG turbulence filter,
   and no raster image of any kind. The cone is clipped and then its PARENT is blurred, because
   CSS applies a filter before it applies a clip path and blurring the clipped element hands the
   cone its hard edge back. Still no divider line: there is nothing on this page with an edge that
   is not the edge of a filled shape.
   ================================================================================ */
.page-start { background: #000000; }
.page-start .stage { position: relative; width: 100%; height: 100vh; overflow: hidden;
    background: #000000; }
.page-start .bg { position: absolute; inset: 0; overflow: hidden; }
.page-start .beamwrap { position: absolute; inset: -14%; filter: blur(76px); }
.page-start .cone { position: absolute; inset: 0;
    clip-path: polygon(45.5% 0%, 54.5% 0%, 99% 118%, 1% 118%);
    background: linear-gradient(to bottom,
        rgba(255, 215, 0, 0.13) 0%,
        rgba(255, 215, 0, 0.07) 13%,
        rgba(255, 255, 255, 0.090) 30%,
        rgba(255, 255, 255, 0.040) 58%,
        rgba(255, 255, 255, 0.012) 82%,
        rgba(255, 255, 255, 0.000) 100%); }
.page-start .pool { position: absolute; inset: 0;
    background: radial-gradient(ellipse 44% 24% at 50% 50%,
        rgba(255, 255, 255, 0.050) 0%, rgba(255, 255, 255, 0.018) 48%,
        rgba(255, 255, 255, 0.000) 76%); }
.page-start .vignette { position: absolute; inset: 0;
    background: radial-gradient(ellipse 74% 66% at 50% 48%,
        rgba(0, 0, 0, 0.00) 40%, rgba(0, 0, 0, 0.34) 78%,
        rgba(0, 0, 0, 0.66) 100%); }
.page-start .grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.10; }
.page-start .frame { position: relative; z-index: 2; height: 100%; display: flex;
    flex-direction: column; align-items: center; justify-content: space-between;
    padding: 48px 0 46px 0; }
.page-start .mark { font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
    font-size: 0.96875rem; letter-spacing: 0.4px; color: #FFFFFF; text-align: center; }
.page-start .mark .dot { color: #FFD700; }
/* the stack is centred on the frame itself, not on the space left between the mark and the links,
   so the centre line is the true centre of the screen */
.page-start .middle { position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); text-align: center; }
.page-start .middle h1 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
    font-size: 2.9375rem; line-height: 1.16; letter-spacing: 0.4px; text-transform: uppercase;
    color: #FFFFFF; max-width: 900px; margin: 0 auto; }
.page-start .middle .thin { font-size: 1.0625rem; color: #C0C0C0; max-width: 560px;
    margin: 21px auto 32px auto; }
/* width: 100% because the frame is a centred column flex container, in which a child sizes
   to its own content: without it the three links bunch into one centred run and
   space-between has nothing left to spread. Read off the 1440 render. */
.page-start .links { display: flex; justify-content: space-between; align-items: center;
    width: 100%; }
.page-start .links a { font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-weight: 500;
    font-size: 0.78125rem; letter-spacing: 1.9px; text-transform: uppercase; color: #C0C0C0; }

@media (max-width: 760px) {
  .page-start .frame { padding: 34px 0 32px 0; }
  .page-start .mark { font-size: 0.8125rem; }
  .page-start .middle h1 { font-size: 1.5625rem; line-height: 1.2; letter-spacing: 0.3px; }
  .page-start .middle .thin { font-size: 0.90625rem; margin: 15px auto 26px auto; max-width: 300px; }
  .page-start .btn { font-size: 0.75rem; padding: 14px 26px 13px 26px; letter-spacing: 1.2px; }
  .page-start .links a { font-size: 0.59375rem; letter-spacing: 1.1px; }
  /* the beam opens up on a narrow frame, or it reads as a stripe instead of a shaft */
  .page-start .beamwrap { filter: blur(54px); }
  .page-start .cone { clip-path: polygon(38% 0%, 62% 0%, 112% 118%, -12% 118%); }
}


/* ---------------- The plan terms page: a reading column on the black ground ----------------
   Denis, 2026-09-13. The start page's ground, which is the kit black, so the page runs into the
   footer without a change of surface; the contact page's text measure, which is the 860 px its
   form column takes. Every rule here is scoped to the page class, so no other page moves.
   NO DIVIDER LINE: the table's rows are filled containers in the kit white at seven percent, the
   same material the dining room strip gives a photo slot, and what separates one row from the
   next is 18 px of the page's own ground. There is no border, no rule and no underline in it. */
.page-terms { background: #000000; }
/* the header bar on this page sits on the black ground at EVERY width, not only on a phone, so
   the mark and the links take the black plate's own colours the way .nav.ondark gives them to
   the phone bar. Scoped to this page and to the header wrapper, so no other header and no
   footer mark moves. Read off the first 1440 render, where the wordmark was black on black. */
.page-terms .navwrap .logo { color: #FFFFFF; }
.page-terms .navwrap .nav-links a { color: #C0C0C0; }
.page-terms .navwrap .nav-links a.here { color: #FFFFFF; }
.page-terms .terms { max-width: 860px; }
.page-terms h1 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 2.5rem;
    line-height: 1.12; letter-spacing: -0.8px; color: #FFFFFF; }
.page-terms .lede { font-size: 1.0625rem; line-height: 1.6; color: #C0C0C0; margin-top: 18px; }
.page-terms .tsec { margin-top: 46px; }
.page-terms .tsec h2 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
    font-size: 1.625rem; line-height: 1.18; letter-spacing: -0.4px; color: #FFFFFF; }
.page-terms .tsec p { font-size: 0.96875rem; line-height: 1.7; color: #C0C0C0; margin-top: 16px; }

/* the table. Fixed columns, because the plan name and the two short columns must not be squeezed
   out by the contents column, which is the one that should take the wrapping. */
.page-terms .ptable { width: 100%; margin-top: 22px; border-collapse: separate;
    border-spacing: 0 18px; table-layout: fixed; }
.page-terms .ptable th { text-align: left; font-family: "Quicksand", Arial, sans-serif;
    font-weight: 700; font-size: 0.65625rem; letter-spacing: 1.8px; text-transform: uppercase;
    color: #C0C0C0; opacity: 0.62; padding: 0 16px; }
.page-terms .ptable th:nth-child(1), .page-terms .ptable td:nth-child(1) { width: 22%; }
.page-terms .ptable th:nth-child(2), .page-terms .ptable td:nth-child(2) { width: 46%; }
.page-terms .ptable th:nth-child(3), .page-terms .ptable td:nth-child(3) { width: 16%; }
.page-terms .ptable th:nth-child(4), .page-terms .ptable td:nth-child(4) { width: 16%; }
.page-terms .ptable td { background: rgba(255, 255, 255, 0.07); padding: 18px 16px 19px 16px;
    font-size: 0.875rem; line-height: 1.55; color: #C0C0C0; vertical-align: top; }
.page-terms .ptable td:nth-child(1) { border-radius: 14px 0 0 14px;
    font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 1rem;
    color: #FFFFFF; }
.page-terms .ptable td:nth-child(3) { font-family: "Quicksand", Arial, sans-serif;
    font-weight: 700; font-size: 0.9375rem; color: #FFFFFF; }
.page-terms .ptable td:nth-child(4) { border-radius: 0 14px 14px 0; }
/* the column label a cell carries for the phone stack. It sits in the markup as an attribute,
   filled from the same columns list the head row is filled from, so the two cannot drift. */
.page-terms .ptable td::before { content: ""; display: none; }

@media (max-width: 760px) {
  .page-terms h1 { font-size: 1.75rem; letter-spacing: -0.4px; }
  .page-terms .lede { font-size: 0.96875rem; margin-top: 14px; }
  .page-terms .tsec { margin-top: 34px; }
  .page-terms .tsec h2 { font-size: 1.25rem; letter-spacing: -0.2px; }
  .page-terms .tsec p { font-size: 0.9375rem; margin-top: 13px; }
  /* four columns of this table do not fit a phone, so every row becomes one filled container and
     every cell a line inside it with its column name over it. Nothing is dropped and nothing is
     abbreviated: the reader gets the same four facts a desktop gets. */
  .page-terms .ptable, .page-terms .ptable tbody,
  .page-terms .ptable tr { display: block; width: 100%; }
  .page-terms .ptable thead { display: none; }
  .page-terms .ptable { border-spacing: 0; margin-top: 18px; }
  .page-terms .ptable tr { background: rgba(255, 255, 255, 0.07); border-radius: 14px;
      padding: 6px 0 16px 0; margin-bottom: 18px; }
  /* the four column widths are released here as well as on the bare cell: a width set on
     .ptable td alone is beaten by the nth-child rules above and the cells keep their desktop
     columns, which on a 390 px phone breaks the price one word to a line. */
  .page-terms .ptable td, .page-terms .ptable td:nth-child(1),
  .page-terms .ptable td:nth-child(2), .page-terms .ptable td:nth-child(3),
  .page-terms .ptable td:nth-child(4) {
      display: block; width: auto; background: none; border-radius: 0;
      padding: 12px 18px 0 18px; }
  .page-terms .ptable td::before { content: attr(data-label); display: block;
      font-family: "Quicksand", Arial, sans-serif; font-weight: 700; font-size: 0.625rem;
      letter-spacing: 1.7px; text-transform: uppercase; color: #C0C0C0; opacity: 0.55;
      margin-bottom: 6px; }
}

/* ---------------- The accessibility statement: the same reading column, its own page ----------
   Work order FROM-SIDEKICK-DESKTOP-2026-09-13-09. The plan terms page's ground and measure, with
   no table and no plan rows, so the rules here are the reading ones and nothing else. Scoped to
   the page class, so no other page moves. NO DIVIDER LINE: what separates one paragraph from the
   next is the page's own ground. */
.page-accessibility { background: #000000; }
.page-accessibility .navwrap .logo { color: #FFFFFF; }
.page-accessibility .navwrap .nav-links a { color: #C0C0C0; }
.page-accessibility .navwrap .nav-links a.here { color: #FFFFFF; }
.page-accessibility .reading { max-width: 860px; }
.page-accessibility h1 { font-family: "Quicksand", Arial, sans-serif; font-weight: 700;
    font-size: 2.5rem; line-height: 1.12; letter-spacing: -0.8px; color: #FFFFFF; }
.page-accessibility .lede { font-size: 1.0625rem; line-height: 1.6; color: #C0C0C0;
    margin-top: 18px; }
.page-accessibility .apar { font-size: 0.96875rem; line-height: 1.7; color: #C0C0C0;
    margin-top: 30px; max-width: 760px; }