/* detail.css · the /boat-detailing/ page only. Loaded after site.css and home.css (which carries the dark system).
   Direction "Marque": full-bleed photographs shown clean, then precise specification. Hairlines and alignment do the work.
   Everything here is prefixed dt-. Colours, type, corners and motion are the home page's own values; nothing new is introduced.
   Phones are the primary design (single column, vertical scrolling only); wider screens are layered on with min-width queries.

   Type, phones:  headline 40 (h2; the hero sets its own display size, the questions take the site's 32) · small headline 32
                  · title 26 · subhead 21 · body 16.5 · small 14 and 13 · label 11.5
   Space:         4 8 12 16 20 24 32 40 48, then the site's own phone steps: 64 between sections on one ground, 88 where the
                  ground changes (--dt-pad, --dt-shift), 32 from a heading to what it introduces (--dt-gap). Fluid from 960px.
   Corners:       14px (--rad) photographs and cards · 8px (--r) buttons and inputs · square for full-bleed photographs */

/* The page is dark edge to edge, including the strip a phone shows when the page is pulled past its top or bottom. */
body{background:#050A1E}

/* The dark token block (the home page's, home.css L14-19) for every section of this page, plus this page's own steps. */
.dt-sec{
  --ink:#050A1E; --ground:#08102B; --panel:#0F1A3D; --line:rgba(255,255,255,.12);
  --text:#F5F4F1; --body:#C7CCDA; --muted:#949CB3; --accent:#BFDDD5; --bone:#F5F4F1;
  --ghost:rgba(255,255,255,.34); --ghost-hover:rgba(255,255,255,.07); --btn-hover:#fff; --hair:rgba(255,255,255,.3);
  --dt-pad:clamp(64px,7.4vw,104px);        /* a section's top and bottom */
  --dt-shift:var(--dt-pad);                /* a section's top or bottom where the ground changes colour */
  --dt-gap:clamp(32px,4.4vw,56px);         /* a heading to what it introduces */
  --dt-step:clamp(56px,7vw,96px);          /* between two blocks that share a section */
  --dt-title:26px;                         /* tier names, the sign-off */
  --dt-head-s:clamp(30px,8.2vw,34px);      /* the flagship's name, the jet ski headline */
  position:relative;background:#08102B;color:var(--body);
}
/* Under 960px the steps are the site's own (home.css sets them on body.home2): 64px between sections that share a ground,
   88px where the ground changes colour, 32px from a heading to what it introduces. */
@media (max-width:959px){
  .dt-sec{--dt-pad:var(--sp-sec,64px);--dt-shift:var(--sp-shift,88px);--dt-gap:var(--sp-group,32px);--dt-step:var(--sp-sec,64px)}
}

/* The centred mark with the phone number under it ({{LX_TOP}} in the builder): the top of this page and of /boat-services/.
   Over that top the header shows only the menu button: the corner logo is hidden by home.css until the bar turns solid, and the
   phone number and "Text us" are hidden here the same way. All three return once the page has scrolled past the top. */
.lx-top{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.lx-logo{display:block;width:156px}
.lx-logo img{display:block;width:100%;height:auto}
 /* the number is a button (owner, 2026-10-06): wide, a mint outline on glass, the word Call small in mint and the digits large */
.lx-phone{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:264px;min-height:50px;padding:0 22px;border:1px solid rgba(191,221,213,.78);border-radius:var(--r);background:rgba(5,10,30,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 17px/1 var(--font);letter-spacing:.12em;text-decoration:none;white-space:nowrap;transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.lx-phone span{font:600 10.5px/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:var(--sea);transition:color var(--t) var(--ease)}
.lx-phone:active{background:var(--sea);border-color:var(--sea);color:#08102B}
.lx-phone:active span{color:#08102B}
@media (hover:hover){.lx-phone:hover{background:var(--sea);border-color:var(--sea);color:#08102B}.lx-phone:hover span{color:#08102B}}
.lx-logo:focus-visible{outline:2px solid var(--sea);outline-offset:6px}
.lx-phone:focus-visible{outline:2px solid var(--sea);outline-offset:3px}
.js body:has(.lx-top) .site-header :is(.header-cta,.nav-phone){transition:opacity var(--t) var(--ease),visibility 0s}
.js body:has(.lx-top) .site-header:not(.solid) :is(.header-cta,.nav-phone){opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t) var(--ease),visibility 0s var(--t)}
@media (min-width:960px){.lx-top{gap:18px}.lx-logo{width:208px}.lx-phone{min-width:300px;min-height:54px;font-size:18px}}

/* ---------- Shared pieces: label, headlines, the mint button ---------- */
.dt-label{display:flex;align-items:center;gap:18px;margin:0 0 20px;font:500 11.5px/1 var(--font);letter-spacing:.4em;text-transform:uppercase;color:var(--sea)}
.dt-label i{display:block;flex:none;width:56px;height:1px;background:rgba(191,221,213,.6);transform-origin:0 50%}
/* The hairline draws in. It is its own .reveal, so site.js marks it when it comes into view; opacity stays at 1, only the length moves. */
.js .dt-label i.reveal{opacity:1;transform:scaleX(0);transition:transform 380ms var(--ease) 120ms}
.js .dt-label i.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){.js .dt-label i.reveal{transform:none}}
.dt-sec h2{max-width:none;margin:0;font-size:clamp(36px,10.4vw,46px);line-height:1;color:#fff}
.dt-sec h1 em,.dt-sec h2 em{font-style:normal;color:var(--sea)}
.dt-head{margin-bottom:var(--dt-gap)}
.dt-sec .dt-mint{background:var(--sea);border-color:var(--sea);color:#08102B}
@media (hover:hover){.dt-sec .dt-mint:hover{background:#D6ECE6;border-color:#D6ECE6}}

/* ---------- 1. Hero ---------- */
/* Built to the owner's reference picture (2026-10-06 night). From the top: the mark and the call button (both as they were); the
   name of the service large on two lines, the second in mint italic; a short rule; three points under thin-line icons, ruled apart;
   the photograph; one mint action with a round "keep going" button beside it.
   Phones and tablets: the photograph is exactly as wide as the screen and hangs from the last line of words (it is positioned from
   the bottom of .dt-top-words), so the top of the hood clears the three points by --dt-hood on any screen: 39.6vw is how far down
   the photograph the hood starts (26.4% of its height, which is 150vw). A scrim as tall as the words darkens what lies behind them
   and is gone a little below the last line; the photograph's own top edge fades in.
   Heights are tuned from the small viewport height (svh), which stays the same when a phone's toolbar hides, so nothing here moves
   while the page scrolls. The hero is one whole screen and nothing of the next section shows under it (owner, 2026-10-06 late):
   it is as tall as the large viewport (lvh, the screen once the toolbar has slid away), and its foot fades into the colour of the
   section below (#08102B), which opens with 64px of the same colour, so what a phone shows behind and below its toolbar is one
   unbroken ground.
   The button sits at the very foot of the first screen (owner, 2026-10-06, later still): 8px above the bottom of the small
   viewport, which on an iPhone is as low as it can go without sliding under Safari's toolbar. It is placed with padding
   (--dt-under is the strip between the small and the large viewport), NOT with position:sticky or fixed: Safari 26 and later
   tint the whole toolbar area with the colour of anything pinned to the bottom edge, and a pinned mint button turned that
   area pale green (tried and removed the same night).
   --dt-n      0 to 32px: the mark and the call button are their full size from 700px of screen height, and close up below 690px.
   --dt-spare  what the first screen has left once the words, the photograph from the hood down to the foot of the chrome lettering
               (52.2vw) and the button all fit, at the closest spacing. The words are 242px + 23.6vw tall like that, so
               everything needs 340px + 75.8vw (and .572 of --dt-n).
   --dt-k      0 to 100px: the spacing between the words opens up (18px in all) with what is left beyond 12px. */
.dt-top{--dt-n:0px;--dt-k:0px;--dt-under:0px;--dt-hood:26px;isolation:isolate;overflow:hidden;display:flex;min-height:100vh;background:#050A1E}
@supports (height:100svh){
  .dt-top{--dt-n:clamp(0px,calc((100svh - 690px) * 3.2),32px);--dt-spare:calc(100svh - 340px - 75.8vw - var(--dt-n) * .572);
    --dt-k:clamp(0px,calc((var(--dt-spare) - 12px) * 5.5),100px);--dt-under:calc(100lvh - 100svh);min-height:100lvh}
}
.dt-top-in{position:relative;display:flex;flex-direction:column;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(8px + var(--dt-under) + env(safe-area-inset-bottom))}
/* the bottom margin is the least room the photograph ever gets between the three points and the button */
.dt-top-words{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:112px;text-align:center}
.dt-top-bg{position:absolute;z-index:-2;left:50%;top:calc(100% + var(--dt-hood) - 39.6vw);width:100vw;height:150vw;transform:translateX(-50%);pointer-events:none}
.dt-top-bg picture,.dt-top-bg img{position:absolute;inset:0;width:100%;height:100%}
.dt-top-bg img{object-fit:cover;transform-origin:50% 60%;animation:dt-zoom 8s cubic-bezier(.22,.61,.36,1) both}
.dt-top-d{display:none}
/* the photograph's top edge fades in over its first quarter, so no hard line shows behind the words; its foot fades too, for the tall
   narrow screen where it ends above the button */
@media (max-width:959px){.dt-top-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 12%,#000 26%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 12%,#000 26%,#000 90%,transparent 100%)}}
/* the photograph darkens toward the button, so the button stands on a clean navy foot (nothing of the picture pokes out under it), and
   the ground is the colour of the section below from the button's lower edge down through the strip under the small viewport */
.dt-top::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;height:26vh;height:calc(max(26svh,200px) + var(--dt-under));pointer-events:none;background:linear-gradient(180deg,rgba(8,16,43,0) 0,rgba(8,16,43,.1) calc((100% - var(--dt-under)) * .24),rgba(8,16,43,.32) calc((100% - var(--dt-under)) * .46),rgba(8,16,43,.64) calc((100% - var(--dt-under)) * .68),rgba(8,16,43,.92) calc((100% - var(--dt-under)) * .86),#08102B calc((100% - var(--dt-under)) * .96),#08102B 100%)}
/* the words' own scrim: from above the top of the screen to 96px below the last line */
.dt-top-words::before{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;top:-120px;bottom:-96px;pointer-events:none;background:linear-gradient(180deg,rgba(5,10,30,.97) 0,rgba(5,10,30,.94) calc(100% - 270px),rgba(5,10,30,.9) calc(100% - 160px),rgba(5,10,30,.82) calc(100% - 96px),rgba(5,10,30,.56) calc(100% - 64px),rgba(5,10,30,.24) calc(100% - 32px),rgba(5,10,30,0) 100%)}
.dt-top .lx-top{animation:dt-up 380ms var(--ease) 80ms backwards}

/* The name of the service: sized from the screen's width so the first line always spans the same share of it (three quarters). */
.dt-top h1{max-width:none;margin:calc(18px + var(--dt-k) * .08) 0 0;font-size:clamp(34px,11.8vw,58px);line-height:1;letter-spacing:-.018em;color:#fff;white-space:nowrap;animation:dt-up 380ms var(--ease) 160ms backwards}
.dt-top h1 em{display:block;font-style:italic}   /* slanted by the browser from the upright face: the owner chose not to add the italic file (2026-10-06) */
.dt-top h1::after{content:"";display:block;width:30px;height:1px;margin:calc(15px + var(--dt-k) * .05) auto 0;background:rgba(255,255,255,.85);animation:dt-draw 420ms var(--ease) 520ms backwards}

/* Three points: icon above, three short lines beneath, a hairline between neighbours. The line breaks are set in the markup. */
.dt-top-points{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:440px;margin:calc(17px + var(--dt-k) * .05) 0 0;padding:0;animation:dt-up 380ms var(--ease) 260ms backwards}
.dt-top-points li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 4px;font:500 11px/1.4 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#F5F4F1}
.dt-top-points li + li::before{content:"";position:absolute;left:0;top:50%;width:1px;height:40px;margin-top:-20px;background:rgba(191,221,213,.5)}
.dt-top-points svg{flex:none;width:22px;height:22px;color:var(--sea)}
.dt-top-points span{display:block;padding-left:.18em}   /* the space after each line's last letter, given back on the left so the lines stay centred */
/* the wide version's own pieces (label, extra headline words, sentence, call button, pin icon): shown from 1200px only */
.dt-top-kicker,.dt-top-lede,.dt-top-wide,.dt-top-call,.dt-top-points .dt-ico-w{display:none}
@media (max-width:429px){.dt-top-points br.w{display:none}}
@media (min-width:430px){.dt-top-points br.n{display:none}}
@media (min-width:430px) and (max-width:759px){.dt-top-points li{font-size:10.5px}}
@media (max-width:339px){.dt-top-points li{font-size:10px;letter-spacing:.14em}.dt-top-points span{padding-left:.14em}}

/* The action, at the foot of the first screen: a mint pill with a long arrow, and beside it a round button that carries on down the page. */
.dt-top-go{display:flex;align-items:center;gap:10px;margin-top:auto;animation:dt-up 380ms var(--ease) 360ms backwards}
.dt-top-btn{flex:1 1 auto;min-width:0;min-height:56px;padding:0 14px;gap:16px;border-radius:999px;box-shadow:0 16px 32px -16px rgba(0,0,0,.75),0 0 0 1px rgba(191,221,213,.18)}
.dt-top-btn svg{width:28px;height:12px}
.dt-top-more{flex:none;display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(5,10,30,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#F5F4F1;-webkit-tap-highlight-color:transparent;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
.dt-top-more svg{width:11px;height:16.5px;transition:transform var(--t) var(--ease)}
.dt-top-more:active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.72)}
.dt-top-more:focus-visible{outline:2px solid var(--sea);outline-offset:3px}
@media (hover:hover){.dt-top-more:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.72)}.dt-top-more:hover svg{transform:translateY(3px)}}
@media (max-width:374px){.dt-top-btn{gap:12px;font-size:12px;letter-spacing:.1em}.dt-top-btn svg{width:24px}}
@media (max-width:339px){.dt-top-btn svg{display:none}}

@media (max-width:759px){
  /* phones: the mark and the call button at their full size (156px, 264 by 50px) from 700px of screen height, a little smaller below 690px */
  .dt-top .lx-logo{width:calc(124px + var(--dt-n))}
  .dt-top .lx-top{gap:calc(10px + var(--dt-n) * .125)}
  .dt-top .lx-phone{min-width:calc(240px + var(--dt-n) * .75);min-height:calc(44px + var(--dt-n) * .1875);font-size:calc(16px + var(--dt-n) * .03125)}
}
@media (min-width:760px) and (max-width:959px){
  /* tablets: the same composition, larger type */
  .dt-top{--dt-hood:36px}
  .dt-top .lx-logo{width:188px}
  .dt-top .lx-phone{min-width:300px;min-height:54px;font-size:18px}
  .dt-top h1{margin-top:36px;font-size:clamp(64px,9.4vw,84px)}
  .dt-top h1::after{width:40px;margin-top:26px}
  .dt-top-points{max-width:560px;margin-top:30px}
  .dt-top-points li{gap:14px;font-size:13px}
  .dt-top-points svg{width:28px;height:28px}
  .dt-top-points li + li::before{height:52px;margin-top:-26px}
  .dt-top-go{align-self:center}
  .dt-top-btn{flex:none;min-width:340px;min-height:60px}
  .dt-top-more{width:54px;height:54px}
}
@media (min-width:960px){
  /* Small desktops and tablets turned sideways, 960 to 1199px (from 1200px the block further down takes over):
     his landscape photograph of the Robalo's side (1620 x 1080) is the picture, in the right-hand two
     thirds of the screen, and the words stand centred in the room to its left (--dt-room: 36% of the screen, never under 508px).
     The picture is shown whole (owner, 2026-10-07): as wide as its panel and two thirds of that tall, centred in the height.
     That leaves a band above and below it on most windows, which is why its top and foot fade into the navy; its left edge
     dissolves under the words' room.
     The photograph is placed from the section here, so the two boxes around it are not positioned. */
  .dt-top{--dt-room:max(508px,36vw)}
  .dt-top-m{display:none}
  .dt-top-d{display:block}
  .dt-top-in,.dt-top-words{position:static}
  .dt-top-bg{top:var(--header-h);bottom:0;left:var(--dt-room);right:0;z-index:-1;width:auto;height:auto;transform:none}
  .dt-top-bg .dt-top-d{inset:auto 0;top:50%;height:min(100%,calc((100vw - var(--dt-room)) * .6667));transform:translateY(-50%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%)}
  .dt-top-bg .dt-top-d img{object-fit:contain;object-position:100% 50%;transform-origin:55% 60%}   /* the whole photograph, never cropped (owner, 2026-10-07) */
  .dt-top-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050A1E 0,rgba(5,10,30,.8) 3%,rgba(5,10,30,.42) 7%,rgba(5,10,30,.14) 11%,rgba(5,10,30,0) 15%)}
  .dt-top-words::before{display:none}
  /* the foot of the whole hero, photograph included, eases into the colour of the section below */
  .dt-top::after{height:clamp(120px,22vh,220px);background:linear-gradient(180deg,rgba(8,16,43,0),rgba(8,16,43,.55) 60%,#08102B)}
  /* the words' column is the room itself, not the page column, so they stand centred between the screen's edge and the picture */
  .dt-top-in{width:var(--dt-room);max-width:none;margin:0;justify-content:center;align-items:center;padding:var(--header-h) 28px clamp(24px,5vh,56px)}
  @supports (height:100svh){.dt-top-in{padding-bottom:clamp(24px,5svh,56px)}}
  .dt-top-words{margin-bottom:0}
  .dt-top h1{margin-top:clamp(22px,4.4vh,44px);font-size:clamp(44px,min(calc(var(--dt-room) / 7.7),8.6vh),92px)}   /* the first line takes five sixths of the room */
  .dt-top h1::after{width:40px;margin-top:clamp(18px,3vh,28px)}
  .dt-top-points{min-width:444px;max-width:520px;margin-top:clamp(18px,3vh,28px)}
  .dt-top-points li{gap:12px;font-size:11.5px}
  .dt-top-points svg{width:24px;height:24px}
  .dt-top-go{margin-top:clamp(24px,4.4vh,44px)}
  .dt-top-btn{flex:none;min-width:320px}
}
@media (min-width:1200px){
  /* ---- The wide hero, built to the owner's desktop picture (2026-10-07). Phones, tablets and 960 to 1199px are untouched. ----
     Header, on this page only: the logo with the name under it on the left, the menu in the middle, the phone number as an outlined
     pill on the right in place of "Text us"; all three show over the hero too, since the hero no longer carries its own logo. */
  /* On a wide screen the header is a solid navy bar from the first moment, here and on /boat-services/ (both carry .lx-top): the
     site's see-through header let the hero's words and logo show through the menu as the page began to scroll, which read as the
     logo overlapping the words (owner, 2026-10-07). Both heroes start below the header on the same navy, so nothing changes at rest. */
  body:has(.lx-top) .site-header:not(.solid){background:#050A1E}
  :root:has(.dt-top){--header-h:84px}   /* a little taller here, for the name under the logo */
  .js body:has(.dt-top) .site-header:not(.solid) :is(.brand,.nav-phone){opacity:1;visibility:visible;pointer-events:auto}
  body:has(.dt-top) .site-header .brand{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none}
  body:has(.dt-top) .site-header .brand img{width:124px}
  body:has(.dt-top) .site-header .brand::after{content:"Luxe Yacht Care";padding-left:.36em;font:500 10px/1 var(--font);letter-spacing:.36em;text-transform:uppercase;white-space:nowrap;color:#fff}
  body:has(.dt-top) .site-header .header-cta{display:none}
  body:has(.dt-top) .site-header .nav-phone{display:inline-flex;align-items:center;gap:10px;height:48px;margin-left:auto;padding:0 24px;font-size:12.5px;border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
  body:has(.dt-top) .site-header .nav-phone::before{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat}
  body:has(.dt-top) .site-header .nav-phone:hover{background:rgba(255,255,255,.08);border-color:#fff}
  body:has(.dt-top) .site-header .nav-phone:focus-visible{outline:2px solid var(--sea);outline-offset:3px}

  /* The photograph, shown whole (owner, 2026-10-07: "I want the full image in the frame"): its right edge is the screen's right
     edge and nothing of it runs off the screen. It is as tall as the hero below the header (--dt-ph) when the window is wide
     enough for the two buttons and the chrome lettering to stand side by side; otherwise it is as large as lets them
     (--dt-row is the width the two buttons are given, --dt-text is where they end plus 32px; the lettering starts 11.4% into the
     picture, so the picture may be at most (100vw - --dt-text) / .886 wide), and then it sits centred in the height with a short
     fade at its top and foot. */
  .dt-top{--dt-ph:calc(100vh - var(--header-h));--dt-row:clamp(548px,37vw,620px);--dt-text:calc(var(--gutter) + var(--dt-row) + 32px);
    --dt-pw:min(calc(var(--dt-ph) * 1.5),calc((100vw - var(--dt-text)) / .886));
    --dt-slack:calc((var(--dt-ph) - var(--dt-pw) / 1.5) / 2);--dt-fade:clamp(0px,calc(var(--dt-slack) * 1.2),44px)}
  @supports (height:100lvh){.dt-top{--dt-ph:calc(100lvh - var(--header-h))}}
  .dt-top-bg{top:calc(var(--header-h) + var(--dt-slack));bottom:auto;left:auto;right:0;width:var(--dt-pw);height:calc(var(--dt-pw) / 1.5)}
  .dt-top-bg .dt-top-d{inset:0;height:100%;transform:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--dt-fade),#000 calc(100% - var(--dt-fade)),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 var(--dt-fade),#000 calc(100% - var(--dt-fade)),transparent 100%)}
  .dt-top-bg .dt-top-d img{object-fit:cover;object-position:50% 50%;transform-origin:70% 60%}
  /* the navy the words stand on: the picture's left edge dissolves just short of the lettering, and its top left corner, where the
     headline's second line runs over the boat's console, is held dark */
  .dt-top-bg::after{background:
    linear-gradient(90deg,#050A1E 0,rgba(5,10,30,.92) 4.5%,rgba(5,10,30,.7) 7.5%,rgba(5,10,30,.3) 9.8%,rgba(5,10,30,0) 11.6%),
    radial-gradient(ellipse 44% 40% at 0% 30%,rgba(5,10,30,.97) 0,rgba(5,10,30,.92) 40%,rgba(5,10,30,.6) 68%,rgba(5,10,30,0) 100%)}
  /* the hero's foot eases into the section below over a short band only, so the picture's own foot stays in view */
  .dt-top::after{height:clamp(64px,9vh,100px)}

  /* The words: on the left edge of the screen, in line with the logo above them, in the picture's order
     (label, headline, sentence, the two buttons, the three points). */
  .dt-top .lx-top,.dt-top-more,.dt-top h1::after,.dt-top-points .dt-ico-m{display:none}
  .dt-top-in{width:100%;align-items:flex-start;padding:calc(var(--header-h) + 16px) var(--gutter) clamp(20px,3.4vh,36px)}
  .dt-top-words{display:contents;text-align:left}
  .dt-top-kicker{order:1;display:flex;align-items:center;gap:16px;margin:0 0 clamp(14px,2.6vh,24px);font:500 11.5px/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:#DCE1EA;animation:dt-up 380ms var(--ease) 80ms backwards}
  .dt-top-kicker{font-size:clamp(11.5px,.69vw,12px)}
  .dt-top-kicker i{display:block;flex:none;width:42px;height:1px;background:rgba(255,255,255,.6)}
  .dt-top h1{order:2;margin:0;font-size:clamp(56px,min(5.27vw,10.4vh),96px);line-height:1.03}
  .dt-top-wide{display:inline}
  .dt-top-lede{order:3;display:block;max-width:26.5em;margin:clamp(16px,3vh,28px) 0 0;font:400 clamp(17px,1.2vw,20px)/1.66 var(--font);letter-spacing:.1em;color:#E6E9F0;animation:dt-up 380ms var(--ease) 240ms backwards}
  .dt-top-go{order:4;gap:18px;width:var(--dt-row);margin-top:clamp(20px,3.8vh,36px);animation-delay:320ms}
  /* from here down the sizes follow the screen's width up to 1672px (the size of the picture supplied) and stop there */
  .dt-top-btn{flex:1 1 auto;min-width:0;min-height:clamp(54px,3.77vw,63px);padding:0 clamp(24px,2.3vw,40px);font-size:clamp(12px,.8vw,13.4px)}
  .dt-top-call{display:inline-flex;flex:none;align-items:center;gap:12px;min-height:clamp(48px,3.35vw,56px);padding:0 clamp(20px,1.85vw,31px);border:1px solid rgba(255,255,255,.6);border-radius:999px;color:#fff;font:600 clamp(12px,.8vw,13.4px)/1 var(--font);letter-spacing:.15em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
  .dt-top-call svg{flex:none;width:17px;height:17px}
  .dt-top-call:hover{background:rgba(255,255,255,.08);border-color:#fff}
  .dt-top-call:focus-visible{outline:2px solid var(--sea);outline-offset:3px}
  .dt-top-points{order:5;display:flex;width:auto;min-width:0;max-width:none;margin:clamp(24px,5.4vh,52px) 0 0;text-align:center;animation-delay:400ms}
  .dt-top-points li{gap:14px;padding:0 clamp(30px,3.1vw,52px);font-size:clamp(11.5px,.79vw,13.2px)}
  .dt-top-points li:first-child{padding-left:0}
  .dt-top-points li:last-child{padding-right:0}
  .dt-top-points svg{width:clamp(24px,1.85vw,31px);height:clamp(24px,1.85vw,31px)}
  .dt-top-points .dt-ico-w{display:block}
  .dt-top-points li + li::before{height:56px;margin-top:-28px}
}
@media (min-width:1200px) and (max-width:1339px){
  /* seven links and the phone pill on a narrow desktop: both close up a little so they clear each other */
  body:has(.dt-top) .site-header .nav{gap:15px}
  body:has(.dt-top) .site-header .nav a{letter-spacing:.08em}
  body:has(.dt-top) .site-header .nav-phone{gap:8px;height:42px;padding:0 15px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){.dt-top-bg img,.dt-top .lx-top,.dt-top h1,.dt-top h1::after,.dt-top-points,.dt-top-go,.dt-top-kicker,.dt-top-lede{animation:none}}
@keyframes dt-zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes dt-up{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
@keyframes dt-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* A headline that has to break, breaks into even lines (as the home page's serif headlines do) */
:is(.dt-services,.dt-skis,.dt-faq,.dt-quote) h2{text-wrap:balance}
/* every photograph on the page carries the same 1px inner edge */
.dt-svc-photo::after,.dt-skis-photo::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--img-edge);pointer-events:none}

/* ---------- 2. Two short statements in the owner's words: what this is (directly under the hero), and where (after the services).
   The heading's second line is the mint part; on desktop the heading and the sentence stand side by side. ---------- */
.dt-note{padding:var(--dt-shift) 0 0}
.dt-note-mobile{padding-top:var(--dt-pad)}   /* it shares the hero's ground now, and the hero's foot already gives it room */
.dt-note-areas{padding-top:var(--dt-step)}
.dt-note-in{display:grid;gap:16px}
.dt-sec.dt-note h2{font-size:var(--dt-head-s);line-height:1.04;text-wrap:balance}
.dt-note h2 em{display:block}
.dt-note p{max-width:40ch;margin:0;font-size:16.5px;line-height:1.55;color:#C7CCDA}

/* ---------- 3. Services: two services, each introduced by one full photograph, then the options list.
   The photographs are shown whole, at their own shape (2:3 and about 4:5), inside the page margins with the corner every photograph has.
   Phones: photograph, then the words under it. From tablets up: photograph and words side by side, and the sides swap from one
   service to the next. A photograph is never taller than the screen shows: on a short window it narrows instead (--dt-ar is its shape). ---------- */
.dt-services{padding:var(--dt-pad) 0 0}
.dt-svc-row{display:grid;gap:28px}
.dt-svc-row + .dt-svc-row{margin-top:var(--dt-step)}
.dt-svc-photo{--dt-ar:.6664;position:relative;margin:0;overflow:hidden;border-radius:var(--rad);background:#0F1A3D}
.dt-svc-row-b .dt-svc-photo{--dt-ar:.7852}
.dt-svc-photo picture,.dt-svc-photo img{display:block;width:100%;height:auto}
.dt-svc-item{display:grid;align-content:start;gap:12px}
.dt-svc-name{margin:0;font:500 var(--dt-head-s)/1.06 var(--serif);letter-spacing:-.014em;color:#fff;text-wrap:balance}
.dt-svc-line{max-width:38ch;margin:0;font-size:16.5px;line-height:1.5;color:#C7CCDA}
.dt-svc-btn{width:100%;margin-top:12px}
/* Also available: quieter than the two services through a smaller name and a text link. Each row is one link. The rule belongs to the row;
   the link reaches 14px past the words on both sides, so its focus ring stands 12px clear of them. */
.dt-own{margin-top:var(--dt-step)}
.dt-sec .dt-own-label{margin:0 0 16px;font:500 11.5px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#949CB3}
.dt-own-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.dt-own-list li{border-top:1px solid var(--line)}
.dt-own-list a{display:grid;gap:8px;margin-inline:-14px;padding:20px 14px;border-radius:var(--r);color:inherit;text-decoration:none}
.dt-own-name{font:450 21px/1.25 var(--font);letter-spacing:-.012em;color:#F5F4F1;text-wrap:balance}
.dt-own-line{max-width:40ch;font-size:16.5px;line-height:1.5;color:#C7CCDA;text-wrap:balance}
/* every quote action on this page is mint, so none of them reads as part of the page (owner, 2026-10-06): here a small mint button */
.dt-own-go{display:inline-flex;align-items:center;justify-self:start;gap:10px;min-height:40px;margin-top:6px;padding:0 16px;border-radius:var(--r);background:var(--sea);color:#08102B;font:600 11.5px/1 var(--font);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;transition:background-color var(--t) var(--ease)}
.dt-own-go svg{width:16px;height:16px;flex:none;transition:transform var(--t) var(--ease)}
.dt-own-list a:focus-visible{outline-offset:-2px}
@media (hover:hover){.dt-own-list a:hover .dt-own-go{background:#D6ECE6}.dt-own-list a:hover .dt-own-go svg{transform:translateX(4px)}}

/* ---------- 5. Jet skis ---------- */
.dt-skis{padding:var(--dt-step) 0 var(--dt-shift)}
.dt-skis-in{display:grid;gap:24px}
.dt-skis-photo{position:relative;margin:0;overflow:hidden;aspect-ratio:3/2;border-radius:var(--rad);background:#0F1A3D}
.dt-skis-photo picture,.dt-skis-photo img{display:block;width:100%;height:100%}
.dt-skis-photo img{object-fit:cover}
.dt-sec.dt-skis h2{margin-bottom:12px;font-size:var(--dt-head-s)}
.dt-skis-copy p{max-width:36ch;margin:0;font-size:16.5px;line-height:1.5;text-wrap:balance}
.dt-skis-copy .dt-skis-go{margin-top:24px}
.dt-skis-btn{min-width:200px}

/* ---------- 6. Why owners choose us: a ruled list on phones, one ruled line of four on desktop.
   Small line icons in the label's colour; mint stays with the headlines. It is a band of its own on the deeper navy, between
   the jet skis and the questions, so it carries the full step above and below. ---------- */
.dt-why{padding:var(--dt-shift) 0;background:#050A1E}
.dt-sec .dt-why-label{margin:0 0 16px;font:500 11.5px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#949CB3}
.dt-why-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.dt-why-list li{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.dt-why-list svg{flex:none;width:20px;height:20px;color:#949CB3}
.dt-why-list span{font:500 16.5px/1.3 var(--font);letter-spacing:-.01em;color:#F5F4F1;white-space:nowrap}

/* ---------- 7. Questions (the site's accordion, on this page's ground and spacing) ---------- */
.dt-faq .faq{padding-top:var(--dt-shift);padding-bottom:var(--dt-shift)}
.dt-faq .faq a{color:#F5F4F1;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
/* Links inside running text get a 44px tap area without moving anything (the site's own approach, site.css v72) */
.dt-faq .faq p a,.dt-form .consent a{position:relative}
.dt-faq .faq p a::after,.dt-form .consent a::after{content:"";position:absolute;inset:-13px -4px}

/* ---------- 8. Free quote ---------- */
.dt-quote{padding:var(--dt-shift) 0 var(--dt-pad);background:#050A1E}
.dt-quote-in{display:grid}
.dt-quote h2 span{display:block}   /* "Bring your / boat back.": a set break, so "back." never stands alone */
.dt-quote-sub{max-width:34ch;margin:16px 0 32px;font-size:16.5px;line-height:1.5;color:#DDE0E9}
.home2 .dt-form{order:0;padding:24px 20px}
.dt-form .field input[type=number]{appearance:textfield;-moz-appearance:textfield}
.dt-form .field input::-webkit-outer-spin-button,.dt-form .field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* The select's arrow is the thin caret the home form's choices carry, in place of the solid triangle */
.dt-form .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23F5F4F1' fill-opacity='.85'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E");background-position:right 16px center;background-size:15px 15px;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
.dt-form .field select.dt-set{border-color:var(--sea);background-color:rgba(191,221,213,.14)}
/* Where it is kept: two equal halves and one full row, so no choice ever wraps */
.dt-seg{min-width:0;margin:0 0 16px;padding:0;border:0}
.dt-seg legend{margin-bottom:8px;padding:0;font:500 13px/1 var(--font);color:#C7CCDA}
.dt-seg-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dt-seg label{position:relative;display:block}
.dt-seg label:last-child{grid-column:1 / -1}
.dt-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dt-seg span{display:flex;align-items:center;justify-content:center;height:100%;min-height:52px;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r);background:rgba(255,255,255,.04);color:#F5F4F1;font:500 15px/1.2 var(--font);text-align:center;white-space:nowrap;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease),color var(--t) var(--ease)}
.dt-seg input:checked + span{border-color:var(--sea);background:rgba(191,221,213,.14);color:#fff}
.dt-seg input:focus-visible + span{outline:2px solid var(--sea);outline-offset:3px}
@media (hover:hover){.dt-seg label:hover input:not(:checked) + span{border-color:rgba(255,255,255,.72)}}
.dt-form .btn{margin-top:8px}
.dt-form .btn[disabled]{opacity:.7;cursor:default}
/* The answer to a failed send sits directly under the button, above the consent line */
.dt-form .form-status{min-height:0;margin:0}
.dt-form .form-status:not(:empty){margin:12px 0 0}
.dt-form .form-status a{color:inherit;white-space:nowrap;text-underline-offset:3px}
.dt-form .consent{text-wrap:balance}
/* Sent: the card closes down to the answer */
.home2 .dt-form.is-done{padding:32px 24px 40px}
.dt-done{max-width:30ch;margin:0;font-size:16.5px;line-height:1.5;color:#DDE0E9;animation:dt-up 380ms var(--ease) backwards}
.dt-done::before{content:"";display:block;width:56px;height:1px;margin-bottom:24px;background:rgba(191,221,213,.6)}
.dt-done strong{display:block;margin-bottom:12px;font:500 clamp(36px,10.4vw,46px)/1 var(--serif);letter-spacing:-.012em;color:#fff}
.dt-done:focus{outline:none}
.dt-quote-contact{margin-top:48px}
.dt-quote-text{margin:0;font-size:19px;line-height:1.4;color:#fff}
.dt-quote-text a{position:relative;padding-bottom:1px;border-bottom:1px solid var(--sea);color:var(--sea);letter-spacing:.02em;text-decoration:none}
.dt-quote-text a::after{content:"";position:absolute;inset:-10px 0}
.dt-quote-hours{margin:20px 0 0;font:500 11.5px/1.4 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#A3ABC0}

/* ---------- Phones and tablets ---------- */
@media (max-width:959px){
  /* the form's rhythm follows the home form's (home.css sets these on .field under 960px) */
  .dt-seg{margin-bottom:var(--sp-el)}
  .dt-seg legend{font-size:var(--t-small)}
  /* the consent line: at 13px it closes on a full line at the common phone widths, with or without text-wrap */
  .dt-form .consent{font-size:13px}
}
@media (max-width:759px){
  /* the questions headline at the site's own size for it on phones (home.css) */
  .dt-faq .faq h2{font-size:var(--t-headline);line-height:1.03}
  /* a phone measure for the short promises: the same line breaks on every phone, and no stray last word where text-wrap is not supported */
  .dt-svc-line{max-width:30ch}
  .dt-skis-copy p{max-width:28ch}
}
@media (max-width:359px){
  .dt-seg span{font-size:14px}
  /* the bottom bar at 320px: both lines of words and both buttons */
  .home2 .stickybar .btn{padding:0 8px}
}

/* ---------- Tablets and up ---------- */
@media (min-width:760px){
  .dt-sec h2{font-size:clamp(46px,5vw,72px)}
  .dt-label{margin-bottom:24px}

  /* photograph and words side by side: the photograph on the outer edge of the column at its own width (37vw, at most 466px, and
     never taller than the window shows), the words taking the rest; the second row mirrors the first */
  .dt-svc-row{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px)}
  .dt-svc-row-b{grid-template-columns:minmax(0,1fr) auto}
  .dt-svc-row-b .dt-svc-photo{order:2}
  .dt-svc-photo{width:min(clamp(264px,37vw,466px),calc((100vh - var(--header-h) - 96px) * var(--dt-ar)))}
  @supports (height:100svh){.dt-svc-photo{width:min(clamp(264px,37vw,466px),max(220px,calc((100svh - var(--header-h) - 96px) * var(--dt-ar))))}}
  .dt-svc-btn{width:auto;min-width:200px;justify-self:start;margin-top:16px}

  .dt-skis-in{grid-template-columns:minmax(0,.84fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px)}

  .home2 .dt-form{padding:32px}
}
/* The quote card when it is wide (tablets, and desktop from 1100px): where it is kept runs on one line, each choice as wide as
   its words need, and name and number stand side by side */
@media (min-width:600px) and (max-width:959px),(min-width:1100px){
  .dt-seg-row{display:flex}
  .dt-seg label{flex:1 1 auto}
  .dt-seg span{padding-inline:16px}
  .dt-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
}

/* ---------- Desktop ---------- */
@media (min-width:960px){
  .dt-sec{--dt-title:clamp(28px,2.5vw,36px);--dt-head-s:clamp(34px,3.4vw,48px)}

  .dt-note-in{grid-template-columns:minmax(0,.86fr) minmax(0,1fr);align-items:start;column-gap:clamp(40px,6vw,96px)}
  .dt-note p{max-width:44ch;padding-top:.28em;font-size:19px;line-height:1.55}
  .dt-svc-line{max-width:44ch;font-size:17px;line-height:1.55}
  /* Options: name, promise and action on one line */
  .dt-own-list a{grid-template-columns:calc((100% - 264px) * .44) minmax(0,1fr) auto;align-items:baseline;column-gap:32px;padding-block:24px}
  .dt-own-line{font-size:17px;line-height:1.55}
  .dt-own-go{margin:0;justify-self:end}

  .dt-sec.dt-skis h2{margin-bottom:16px}
  .dt-skis-copy p{font-size:17px;line-height:1.55}

  /* Why: one ruled line of four */
  .dt-why-list{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;border-top:1px solid var(--line)}
  .dt-why-list li{gap:12px;padding:24px 0;border-top:0}
  .dt-why-list span{font-size:17px}

  /* The home page holds its questions to one screen; here the block is as tall as its words */
  .dt-faq .faq{min-height:0}

  .dt-quote-in{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);grid-template-areas:"head form" "contact form";column-gap:clamp(40px,5vw,88px)}
  .dt-quote-head{grid-area:head;align-self:end}
  .dt-form{grid-area:form;align-self:center}
  .dt-quote-contact{grid-area:contact;align-self:start;margin-top:0}
  .dt-quote-sub{margin:24px 0 32px;font-size:19px}
  .home2 .dt-form{padding:40px}
  .home2 .dt-form.is-done{padding:48px 40px 56px}
  .dt-done{font-size:19px}
}